`s.
.nav {
// scss-docs-start nav-css-vars
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
// scss-docs-end nav-css-vars
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
@include font-size(var(--#{$prefix}nav-link-font-size));
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color);
text-decoration: if($link-decoration == none, null, none);
background: none;
border: 0;
@include transition($nav-link-transition);
&:hover,
&:focus {
color: var(--#{$prefix}nav-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
}
&:focus-visible {
outline: 0;
box-shadow: $nav-link-focus-box-shadow;
}
// Disabled state lightens text
&.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
}
//
// Tabs
//
.nav-tabs {
// scss-docs-start nav-tabs-css-vars
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
// scss-docs-end nav-tabs-css-vars
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link {
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
&:hover,
&:focus {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: var(--#{$prefix}nav-tabs-link-active-color);
background-color: var(--#{$prefix}nav-tabs-link-active-bg);
border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
}
//
// Pills
//
.nav-pills {
// scss-docs-start nav-pills-css-vars
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars
.nav-link {
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
}
.nav-link.active,
.show > .nav-link {
color: var(--#{$prefix}nav-pills-link-active-color);
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
}
}
//
// Underline
//
.nav-underline {
// scss-docs-start nav-underline-css-vars
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars
gap: var(--#{$prefix}nav-underline-gap);
.nav-link {
padding-right: 0;
padding-left: 0;
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
&:hover,
&:focus {
border-bottom-color: currentcolor;
}
}
.nav-link.active,
.show > .nav-link {
font-weight: $font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
}
}
//
// Justified variants
//
.nav-fill {
> .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
}
}
.nav-justified {
> .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
}
.nav-fill,
.nav-justified {
.nav-item .nav-link {
width: 100%; // Make sure button will grow
}
}
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_navbar.scss
================================================
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
// scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
// scss-docs-end navbar-css-vars
position: relative;
display: flex;
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
@include gradient-bg();
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
// The `flex-wrap` property is inherited to simplify the expanded navbars
%container-flex-properties {
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
> .container,
> .container-fluid {
@extend %container-flex-properties;
}
@each $breakpoint, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
@extend %container-flex-properties;
}
}
}
// Navbar brand
//
// Used for brand, project, or site names.
.navbar-brand {
padding-top: var(--#{$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
margin-right: var(--#{$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$prefix}navbar-brand-font-size));
color: var(--#{$prefix}navbar-brand-color);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
&:hover,
&:focus {
color: var(--#{$prefix}navbar-brand-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
}
}
// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav {
// scss-docs-start navbar-nav-css-vars
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding-left: 0;
margin-bottom: 0;
list-style: none;
.nav-link {
&.active,
&.show {
color: var(--#{$prefix}navbar-active-color);
}
}
.dropdown-menu {
position: static;
}
}
// Navbar text
//
//
.navbar-text {
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
color: var(--#{$prefix}navbar-color);
a,
a:hover,
a:focus {
color: var(--#{$prefix}navbar-active-color);
}
}
// Responsive navbar
//
// Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin.
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center;
}
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1;
color: var(--#{$prefix}navbar-color);
background-color: transparent; // remove default button style
border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$prefix}navbar-toggler-transition));
&:hover {
text-decoration: none;
}
&:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
}
}
// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-image: var(--#{$prefix}navbar-toggler-icon-bg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar-nav-scroll {
max-height: var(--#{$prefix}scroll-height, 75vh);
overflow-y: auto;
}
// scss-docs-start navbar-expand-loop
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
.offcanvas {
// stylelint-disable declaration-no-important
position: static;
z-index: auto;
flex-grow: 1;
width: auto !important;
height: auto !important;
visibility: visible !important;
background-color: transparent !important;
border: 0 !important;
transform: none !important;
@include box-shadow(none);
@include transition(none);
// stylelint-enable declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}
}
// scss-docs-end navbar-expand-loop
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
.navbar-light {
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
}
.navbar-dark,
.navbar[data-bs-theme="dark"] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
@if $enable-dark-mode {
@include color-mode(dark) {
.navbar-toggler-icon {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_offcanvas.scss
================================================
// stylelint-disable function-disallowed-list
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
--#{$prefix}offcanvas-color: #{$offcanvas-color};
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
// scss-docs-end offcanvas-css-vars
}
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
.offcanvas#{$infix} {
@extend %offcanvas-css-vars;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
.offcanvas#{$infix} {
@include media-breakpoint-down($next) {
position: fixed;
bottom: 0;
z-index: var(--#{$prefix}offcanvas-zindex);
display: flex;
flex-direction: column;
max-width: 100%;
color: var(--#{$prefix}offcanvas-color);
visibility: hidden;
background-color: var(--#{$prefix}offcanvas-bg);
background-clip: padding-box;
outline: 0;
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
@include transition(var(--#{$prefix}offcanvas-transition));
&.offcanvas-start {
top: 0;
left: 0;
width: var(--#{$prefix}offcanvas-width);
border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
transform: translateX(-100%);
}
&.offcanvas-end {
top: 0;
right: 0;
width: var(--#{$prefix}offcanvas-width);
border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
transform: translateX(100%);
}
&.offcanvas-top {
top: 0;
right: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height);
max-height: 100%;
border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
transform: translateY(-100%);
}
&.offcanvas-bottom {
right: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height);
max-height: 100%;
border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
transform: translateY(100%);
}
&.showing,
&.show:not(.hiding) {
transform: none;
}
&.showing,
&.hiding,
&.show {
visibility: visible;
}
}
@if not ($infix == "") {
@include media-breakpoint-up($next) {
--#{$prefix}offcanvas-height: auto;
--#{$prefix}offcanvas-border-width: 0;
background-color: transparent !important; // stylelint-disable-line declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
// Reset `background-color` in case `.bg-*` classes are used in offcanvas
background-color: transparent !important; // stylelint-disable-line declaration-no-important
}
}
}
}
}
.offcanvas-backdrop {
@include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
}
.offcanvas-header {
display: flex;
align-items: center;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
.btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
}
}
.offcanvas-title {
margin-bottom: 0;
line-height: var(--#{$prefix}offcanvas-title-line-height);
}
.offcanvas-body {
flex-grow: 1;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
overflow-y: auto;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_pagination.scss
================================================
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
--#{$prefix}pagination-border-color: #{$pagination-border-color};
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
// scss-docs-end pagination-css-vars
display: flex;
@include list-unstyled();
}
.page-link {
position: relative;
display: block;
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
@include font-size(var(--#{$prefix}pagination-font-size));
color: var(--#{$prefix}pagination-color);
text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$prefix}pagination-bg);
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
@include transition($pagination-transition);
&:hover {
z-index: 2;
color: var(--#{$prefix}pagination-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}pagination-hover-bg);
border-color: var(--#{$prefix}pagination-hover-border-color);
}
&:focus {
z-index: 3;
color: var(--#{$prefix}pagination-focus-color);
background-color: var(--#{$prefix}pagination-focus-bg);
outline: $pagination-focus-outline;
box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
}
&.active,
.active > & {
z-index: 3;
color: var(--#{$prefix}pagination-active-color);
@include gradient-bg(var(--#{$prefix}pagination-active-bg));
border-color: var(--#{$prefix}pagination-active-border-color);
}
&.disabled,
.disabled > & {
color: var(--#{$prefix}pagination-disabled-color);
pointer-events: none;
background-color: var(--#{$prefix}pagination-disabled-bg);
border-color: var(--#{$prefix}pagination-disabled-border-color);
}
}
.page-item {
&:not(:first-child) .page-link {
margin-left: $pagination-margin-start;
}
@if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
}
}
&:last-child {
.page-link {
@include border-end-radius(var(--#{$prefix}pagination-border-radius));
}
}
} @else {
// Add border-radius to all pageLinks in case they have left margin
.page-link {
@include border-radius(var(--#{$prefix}pagination-border-radius));
}
}
}
//
// Sizing
//
.pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
}
.pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_placeholders.scss
================================================
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentcolor;
opacity: $placeholder-opacity-max;
&.btn::before {
display: inline-block;
content: "";
}
}
// Sizing
.placeholder-xs {
min-height: .6em;
}
.placeholder-sm {
min-height: .8em;
}
.placeholder-lg {
min-height: 1.2em;
}
// Animation
.placeholder-glow {
.placeholder {
animation: placeholder-glow 2s ease-in-out infinite;
}
}
@keyframes placeholder-glow {
50% {
opacity: $placeholder-opacity-min;
}
}
.placeholder-wave {
mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}
@keyframes placeholder-wave {
100% {
mask-position: -200% 0%;
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_popover.scss
================================================
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
// scss-docs-end popover-css-vars
z-index: var(--#{$prefix}popover-zindex);
display: block;
max-width: var(--#{$prefix}popover-max-width);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@include font-size(var(--#{$prefix}popover-font-size));
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: var(--#{$prefix}popover-bg);
background-clip: padding-box;
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-radius(var(--#{$prefix}popover-border-radius));
@include box-shadow(var(--#{$prefix}popover-box-shadow));
.popover-arrow {
display: block;
width: var(--#{$prefix}popover-arrow-width);
height: var(--#{$prefix}popover-arrow-height);
&::before,
&::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
border-width: 0;
}
}
}
.bs-popover-top {
> .popover-arrow {
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
&::before,
&::after {
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
bottom: 0;
border-top-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
bottom: var(--#{$prefix}popover-border-width);
border-top-color: var(--#{$prefix}popover-bg);
}
}
}
/* rtl:begin:ignore */
.bs-popover-end {
> .popover-arrow {
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
left: 0;
border-right-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
left: var(--#{$prefix}popover-border-width);
border-right-color: var(--#{$prefix}popover-bg);
}
}
}
/* rtl:end:ignore */
.bs-popover-bottom {
> .popover-arrow {
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
&::before,
&::after {
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
top: 0;
border-bottom-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
top: var(--#{$prefix}popover-border-width);
border-bottom-color: var(--#{$prefix}popover-bg);
}
}
// This will remove the popover-header's border just below the arrow
.popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: "";
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
}
/* rtl:begin:ignore */
.bs-popover-start {
> .popover-arrow {
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
right: 0;
border-left-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
right: var(--#{$prefix}popover-border-width);
border-left-color: var(--#{$prefix}popover-bg);
}
}
}
/* rtl:end:ignore */
.bs-popover-auto {
&[data-popper-placement^="top"] {
@extend .bs-popover-top;
}
&[data-popper-placement^="right"] {
@extend .bs-popover-end;
}
&[data-popper-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[data-popper-placement^="left"] {
@extend .bs-popover-start;
}
}
// Offset the popover to account for the popover arrow
.popover-header {
padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot
@include font-size(var(--#{$prefix}popover-header-font-size));
color: var(--#{$prefix}popover-header-color);
background-color: var(--#{$prefix}popover-header-bg);
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
&:empty {
display: none;
}
}
.popover-body {
padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
color: var(--#{$prefix}popover-body-color);
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_progress.scss
================================================
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}
// scss-docs-end progress-keyframes
.progress,
.progress-stacked {
// scss-docs-start progress-css-vars
--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};
// scss-docs-end progress-css-vars
display: flex;
height: var(--#{$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it
@include font-size(var(--#{$prefix}progress-font-size));
background-color: var(--#{$prefix}progress-bg);
@include border-radius(var(--#{$prefix}progress-border-radius));
@include box-shadow(var(--#{$prefix}progress-box-shadow));
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: var(--#{$prefix}progress-bar-color);
text-align: center;
white-space: nowrap;
background-color: var(--#{$prefix}progress-bar-bg);
@include transition(var(--#{$prefix}progress-bar-transition));
}
.progress-bar-striped {
@include gradient-striped();
background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
}
.progress-stacked > .progress {
overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
width: 100%;
}
@if $enable-transitions {
.progress-bar-animated {
animation: $progress-bar-animation-timing progress-bar-stripes;
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_reboot.scss
================================================
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
// styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
box-sizing: border-box;
}
// Root
//
// Ability to the value of the root font sizes, affecting the value of `rem`.
// null by default, thus nothing is generated.
:root {
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
}
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
}
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
// scss-docs-end reboot-body-rules
// Content grouping
//
// 1. Reset Firefox's gray color
hr {
margin: $hr-margin-y 0;
color: $hr-color; // 1
border: 0;
border-top: $hr-border-width solid $hr-border-color;
opacity: $hr-opacity;
}
// Typography
//
// 1. Remove top margins from headings
// By default, ``-`` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
%heading {
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: var(--#{$prefix}heading-color);
}
h1 {
@extend %heading;
@include font-size($h1-font-size);
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
}
// Reset margins on paragraphs
//
// Similarly, the top margin on ` `s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}
// Abbreviations
//
// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 2. Add explicit cursor to indicate changed behavior.
// 3. Prevent the text-decoration to be skipped.
abbr[title] {
text-decoration: underline dotted; // 1
cursor: help; // 2
text-decoration-skip-ink: none; // 3
}
// Address
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
// Lists
ol,
ul {
padding-left: 2rem;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: $dt-font-weight;
}
// 1. Undo browser default
dd {
margin-bottom: .5rem;
margin-left: 0; // 1
}
// Blockquote
blockquote {
margin: 0 0 1rem;
}
// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari
b,
strong {
font-weight: $font-weight-bolder;
}
// Small
//
// Add the correct font size in all browsers
small {
@include font-size($small-font-size);
}
// Mark
mark {
padding: $mark-padding;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg);
}
// Sub and Sup
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
sub,
sup {
position: relative;
@include font-size($sub-sup-font-size);
line-height: 0;
vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }
// Links
a {
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
&:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
}
}
// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) {
&,
&:hover {
color: inherit;
text-decoration: none;
}
}
// Code
pre,
code,
kbd,
samp {
font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
// 1. Remove browser default top margin
// 2. Reset browser default of `1em` to use `rem`s
// 3. Don't allow content to break outside
pre {
display: block;
margin-top: 0; // 1
margin-bottom: 1rem; // 2
overflow: auto; // 3
@include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
color: inherit;
word-break: normal;
}
}
code {
@include font-size($code-font-size);
color: var(--#{$prefix}code-color);
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
kbd {
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
kbd {
padding: 0;
@include font-size(1em);
font-weight: $nested-kbd-font-weight;
}
}
// Figures
//
// Apply a consistent margin strategy (matches our type styles).
figure {
margin: 0 0 1rem;
}
// Images and content
img,
svg {
vertical-align: middle;
}
// Tables
//
// Prevent double borders
table {
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y;
color: $table-caption-color;
text-align: left;
}
// 1. Removes font-weight bold by inheriting
// 2. Matches default `
` alignment by inheriting `text-align`.
// 3. Fix alignment for Safari
th {
font-weight: $table-th-font-weight; // 1
text-align: inherit; // 2
text-align: -webkit-match-parent; // 3
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
// Forms
//
// 1. Allow labels to use `margin` for spacing.
label {
display: inline-block; // 1
}
// Remove the default `border-radius` that macOS Chrome adds.
// See https://github.com/twbs/bootstrap/issues/24093
button {
// stylelint-disable-next-line property-disallowed-list
border-radius: 0;
}
// Explicitly remove focus outline in Chromium when it shouldn't be
// visible (e.g. as result of mouse click or touch tap). It already
// should be doing this automatically, but seems to currently be
// confused and applies its very visible two-tone outline anyway.
button:focus:not(:focus-visible) {
outline: 0;
}
// 1. Remove the margin in Firefox and Safari
input,
button,
select,
optgroup,
textarea {
margin: 0; // 1
font-family: inherit;
@include font-size(inherit);
line-height: inherit;
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none;
}
// Set the cursor for non-`` buttons
//
// Details at https://github.com/twbs/bootstrap/pull/30562
[role="button"] {
cursor: pointer;
}
select {
// Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990
word-wrap: normal;
// Undo the opacity change from Chrome
&:disabled {
opacity: 1;
}
}
// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
// See https://stackoverflow.com/a/54997118
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
display: none !important;
}
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
// 3. Opinionated: add "hand" cursor to non-disabled button elements.
button,
[type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
@if $enable-button-pointers {
&:not(:disabled) {
cursor: pointer; // 3
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
::-moz-focus-inner {
padding: 0;
border-style: none;
}
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea {
resize: vertical; // 1
}
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. ``s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
fieldset {
min-width: 0; // 1
padding: 0; // 2
margin: 0; // 2
border: 0; // 2
}
// 1. By using `float: left`, the legend will behave like a block element.
// This way the border of a fieldset wraps around the legend if present.
// 2. Fix wrapping bug.
// See https://github.com/twbs/bootstrap/issues/29712
legend {
float: left; // 1
width: 100%;
padding: 0;
margin-bottom: $legend-margin-bottom;
@include font-size($legend-font-size);
font-weight: $legend-font-weight;
line-height: inherit;
+ * {
clear: left; // 2
}
}
// Fix height of inputs with a type of datetime-local, date, month, week, or time
// See https://github.com/twbs/bootstrap/issues/18842
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}
::-webkit-inner-spin-button {
height: auto;
}
// 1. This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
// 2. Correct the outline style in Safari.
[type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// 1. A few input types should stay LTR
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
// 2. RTL only output
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
*/
// Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration {
-webkit-appearance: none;
}
// Remove padding around color pickers in webkit browsers
::-webkit-color-swatch-wrapper {
padding: 0;
}
// 1. Inherit font family and line height for file input buttons
// 2. Correct the inability to style clickable types in iOS and Safari.
::file-selector-button {
font: inherit; // 1
-webkit-appearance: button; // 2
}
// Correct element displays
output {
display: inline-block;
}
// Remove border from iframe
iframe {
border: 0;
}
// Summary
//
// 1. Add the correct display in all browsers
summary {
display: list-item; // 1
cursor: pointer;
}
// Progress
//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.
[hidden] {
display: none !important;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_root.scss
================================================
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
//
// Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $grays {
--#{$prefix}gray-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
// Fonts
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient};
// Root and body
// scss-docs-start root-body-variables
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
}
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};
--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
--#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
// Focus styles
// scss-docs-start root-focus-variables
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
// scss-docs-end root-focus-variables
// scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
// scss-docs-end root-form-validation-variables
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_spinners.scss
================================================
//
// Rotating border
//
.spinner-grow,
.spinner-border {
display: inline-block;
width: var(--#{$prefix}spinner-width);
height: var(--#{$prefix}spinner-height);
vertical-align: var(--#{$prefix}spinner-vertical-align);
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
}
// scss-docs-start spinner-border-keyframes
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
// scss-docs-end spinner-border-keyframes
.spinner-border {
// scss-docs-start spinner-border-css-vars
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;
// scss-docs-end spinner-border-css-vars
border: var(--#{$prefix}spinner-border-width) solid currentcolor;
border-right-color: transparent;
}
.spinner-border-sm {
// scss-docs-start spinner-border-sm-css-vars
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
// scss-docs-end spinner-border-sm-css-vars
}
//
// Growing circle
//
// scss-docs-start spinner-grow-keyframes
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}
// scss-docs-end spinner-grow-keyframes
.spinner-grow {
// scss-docs-start spinner-grow-css-vars
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;
// scss-docs-end spinner-grow-css-vars
background-color: currentcolor;
opacity: 0;
}
.spinner-grow-sm {
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
}
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_tables.scss
================================================
//
// Basic Bootstrap table
//
.table {
// Reset needed for nesting tables
--#{$prefix}table-color-type: initial;
--#{$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial;
// End of reset
--#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color};
--#{$prefix}table-striped-bg: #{$table-striped-bg};
--#{$prefix}table-active-color: #{$table-active-color};
--#{$prefix}table-active-bg: #{$table-active-bg};
--#{$prefix}table-hover-color: #{$table-hover-color};
--#{$prefix}table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color);
// Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
// We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}
> tbody {
vertical-align: inherit;
}
> thead {
vertical-align: bottom;
}
}
.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
}
//
// Change placement of captions with a class
//
.caption-top {
caption-side: top;
}
//
// Condensed table w/ half padding
//
.table-sm {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
}
// Border versions
//
// Add or remove borders all around the table and between all the columns.
//
// When borders are added on all sides of the cells, the corners can render odd when
// these borders do not have the same color or if they are semi-transparent.
// Therefore we add top and border bottoms to the `tr`s and left and right borders
// to the `td`s or `th`s
.table-bordered {
> :not(caption) > * {
border-width: $table-border-width 0;
// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
}
}
}
.table-borderless {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
border-bottom-width: 0;
}
> :not(:first-child) {
border-top-width: 0;
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
// For rows
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
// For columns
.table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
// Active table
//
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody > tr:hover > * {
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
}
}
// Table variants
//
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
@each $color, $value in $table-variants {
@include table-variant($color, $value);
}
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint) {
.table-responsive#{$infix} {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_toasts.scss
================================================
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};
// scss-docs-end toast-css-vars
width: var(--#{$prefix}toast-max-width);
max-width: 100%;
@include font-size(var(--#{$prefix}toast-font-size));
color: var(--#{$prefix}toast-color);
pointer-events: auto;
background-color: var(--#{$prefix}toast-bg);
background-clip: padding-box;
border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
box-shadow: var(--#{$prefix}toast-box-shadow);
@include border-radius(var(--#{$prefix}toast-border-radius));
&.showing {
opacity: 0;
}
&:not(.show) {
display: none;
}
}
.toast-container {
--#{$prefix}toast-zindex: #{$zindex-toast};
position: absolute;
z-index: var(--#{$prefix}toast-zindex);
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
margin-bottom: var(--#{$prefix}toast-spacing);
}
}
.toast-header {
display: flex;
align-items: center;
padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
color: var(--#{$prefix}toast-header-color);
background-color: var(--#{$prefix}toast-header-bg);
background-clip: padding-box;
border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
.btn-close {
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x);
}
}
.toast-body {
padding: var(--#{$prefix}toast-padding-x);
word-wrap: break-word;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_tooltip.scss
================================================
// Base class
.tooltip {
// scss-docs-start tooltip-css-vars
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars
z-index: var(--#{$prefix}tooltip-zindex);
display: block;
margin: var(--#{$prefix}tooltip-margin);
@include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@include font-size(var(--#{$prefix}tooltip-font-size));
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
&.show { opacity: var(--#{$prefix}tooltip-opacity); }
.tooltip-arrow {
display: block;
width: var(--#{$prefix}tooltip-arrow-width);
height: var(--#{$prefix}tooltip-arrow-height);
&::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
}
}
.bs-tooltip-top .tooltip-arrow {
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
&::before {
top: -1px;
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: var(--#{$prefix}tooltip-bg);
}
}
/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow {
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
right: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-right-color: var(--#{$prefix}tooltip-bg);
}
}
/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow {
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
&::before {
bottom: -1px;
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}
/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow {
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
left: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-left-color: var(--#{$prefix}tooltip-bg);
}
}
/* rtl:end:ignore */
.bs-tooltip-auto {
&[data-popper-placement^="top"] {
@extend .bs-tooltip-top;
}
&[data-popper-placement^="right"] {
@extend .bs-tooltip-end;
}
&[data-popper-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
&[data-popper-placement^="left"] {
@extend .bs-tooltip-start;
}
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: var(--#{$prefix}tooltip-max-width);
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
color: var(--#{$prefix}tooltip-color);
text-align: center;
background-color: var(--#{$prefix}tooltip-bg);
@include border-radius(var(--#{$prefix}tooltip-border-radius));
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_transitions.scss
================================================
.fade {
@include transition($transition-fade);
&:not(.show) {
opacity: 0;
}
}
// scss-docs-start collapse-classes
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
// scss-docs-end collapse-classes
================================================
FILE: assets/scss/soft-design-system/bootstrap/_type.scss
================================================
//
// Headings
//
.h1 {
@extend h1;
}
.h2 {
@extend h2;
}
.h3 {
@extend h3;
}
.h4 {
@extend h4;
}
.h5 {
@extend h5;
}
.h6 {
@extend h6;
}
.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
// Type display classes
@each $display, $font-size in $display-font-sizes {
.display-#{$display} {
@include font-size($font-size);
font-family: $display-font-family;
font-style: $display-font-style;
font-weight: $display-font-weight;
line-height: $display-line-height;
}
}
//
// Emphasis
//
.small {
@extend small;
}
.mark {
@extend mark;
}
//
// Lists
//
.list-unstyled {
@include list-unstyled();
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled();
}
.list-inline-item {
display: inline-block;
&:not(:last-child) {
margin-right: $list-inline-padding;
}
}
//
// Misc
//
// Builds on `abbr`
.initialism {
@include font-size($initialism-font-size);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size);
> :last-child {
margin-bottom: 0;
}
}
.blockquote-footer {
margin-top: -$blockquote-margin-y;
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
&::before {
content: "\2014\00A0"; // em dash, nbsp
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/_utilities.scss
================================================
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
(
// scss-docs-start utils-vertical-align
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-float
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),
// scss-docs-end utils-float
// Object Fit utilities
// scss-docs-start utils-object-fit
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),
// scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
),
// scss-docs-end utils-opacity
// scss-docs-start utils-overflow
"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
"shadow": (
property: box-shadow,
class: shadow,
values: (
null: var(--#{$prefix}box-shadow),
sm: var(--#{$prefix}box-shadow-sm),
lg: var(--#{$prefix}box-shadow-lg),
none: none,
)
),
// scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
"position": (
property: position,
values: static relative absolute fixed sticky
),
"top": (
property: top,
values: $position-values
),
"bottom": (
property: bottom,
values: $position-values
),
"start": (
property: left,
class: start,
values: $position-values
),
"end": (
property: right,
class: end,
values: $position-values
),
"translate-middle": (
property: transform,
class: translate-middle,
values: (
null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
)
),
// scss-docs-end utils-position
// scss-docs-start utils-borders
"border": (
property: border,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-top": (
property: border-top,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-end": (
property: border-right,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-start": (
property: border-left,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-color": (
property: border-color,
class: border,
local-vars: (
"border-opacity": 1
),
values: $utilities-border-colors
),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
"border-opacity": (
css-var: true,
class: border-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-width": (
property: max-width,
class: mw,
values: (100: 100%)
),
"viewport-width": (
property: width,
class: vw,
values: (100: 100vw)
),
"min-viewport-width": (
property: min-width,
class: min-vw,
values: (100: 100vw)
),
"height": (
property: height,
class: h,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-height": (
property: max-height,
class: mh,
values: (100: 100%)
),
"viewport-height": (
property: height,
class: vh,
values: (100: 100vh)
),
"min-viewport-height": (
property: min-height,
class: min-vh,
values: (100: 100vh)
),
// scss-docs-end utils-sizing
// Flex utilities
// scss-docs-start utils-flex
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),
// scss-docs-end utils-flex
// Margin utilities
// scss-docs-start utils-spacing
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),
// Gap utility
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"row-gap": (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers
),
"column-gap": (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers
),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
// scss-docs-end utils-text
// scss-docs-start utils-color
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
class: bg,
values: (gradient: var(--#{$prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
"rounded": (
property: border-radius,
class: rounded,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
"visibility": (
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
// scss-docs-end utils-visibility
// scss-docs-start utils-zindex
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)
// scss-docs-end utils-zindex
),
$utilities
);
================================================
FILE: assets/scss/soft-design-system/bootstrap/_variables-dark.scss
================================================
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
//
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,
") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,
") !default;
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300 !default;
$form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark
//
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,
") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,
") !default;
// scss-docs-end sass-dark-mode-vars
================================================
FILE: assets/scss/soft-design-system/bootstrap/_variables.scss
================================================
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// scss-docs-end gray-color-variables
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
// scss-docs-end colors-map
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;
$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;
$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;
$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;
$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;
$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;
$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;
$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;
$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;
$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
$blues: (
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"blue-500": $blue-500,
"blue-600": $blue-600,
"blue-700": $blue-700,
"blue-800": $blue-800,
"blue-900": $blue-900
) !default;
$indigos: (
"indigo-100": $indigo-100,
"indigo-200": $indigo-200,
"indigo-300": $indigo-300,
"indigo-400": $indigo-400,
"indigo-500": $indigo-500,
"indigo-600": $indigo-600,
"indigo-700": $indigo-700,
"indigo-800": $indigo-800,
"indigo-900": $indigo-900
) !default;
$purples: (
"purple-100": $purple-100,
"purple-200": $purple-200,
"purple-300": $purple-300,
"purple-400": $purple-400,
"purple-500": $purple-500,
"purple-600": $purple-600,
"purple-700": $purple-700,
"purple-800": $purple-800,
"purple-900": $purple-900
) !default;
$pinks: (
"pink-100": $pink-100,
"pink-200": $pink-200,
"pink-300": $pink-300,
"pink-400": $pink-400,
"pink-500": $pink-500,
"pink-600": $pink-600,
"pink-700": $pink-700,
"pink-800": $pink-800,
"pink-900": $pink-900
) !default;
$reds: (
"red-100": $red-100,
"red-200": $red-200,
"red-300": $red-300,
"red-400": $red-400,
"red-500": $red-500,
"red-600": $red-600,
"red-700": $red-700,
"red-800": $red-800,
"red-900": $red-900
) !default;
$oranges: (
"orange-100": $orange-100,
"orange-200": $orange-200,
"orange-300": $orange-300,
"orange-400": $orange-400,
"orange-500": $orange-500,
"orange-600": $orange-600,
"orange-700": $orange-700,
"orange-800": $orange-800,
"orange-900": $orange-900
) !default;
$yellows: (
"yellow-100": $yellow-100,
"yellow-200": $yellow-200,
"yellow-300": $yellow-300,
"yellow-400": $yellow-400,
"yellow-500": $yellow-500,
"yellow-600": $yellow-600,
"yellow-700": $yellow-700,
"yellow-800": $yellow-800,
"yellow-900": $yellow-900
) !default;
$greens: (
"green-100": $green-100,
"green-200": $green-200,
"green-300": $green-300,
"green-400": $green-400,
"green-500": $green-500,
"green-600": $green-600,
"green-700": $green-700,
"green-800": $green-800,
"green-900": $green-900
) !default;
$teals: (
"teal-100": $teal-100,
"teal-200": $teal-200,
"teal-300": $teal-300,
"teal-400": $teal-400,
"teal-500": $teal-500,
"teal-600": $teal-600,
"teal-700": $teal-700,
"teal-800": $teal-800,
"teal-900": $teal-900
) !default;
$cyans: (
"cyan-100": $cyan-100,
"cyan-200": $cyan-200,
"cyan-300": $cyan-300,
"cyan-400": $cyan-400,
"cyan-500": $cyan-500,
"cyan-600": $cyan-600,
"cyan-700": $cyan-700,
"cyan-800": $cyan-800,
"cyan-900": $cyan-900
) !default;
// fusv-enable
// scss-docs-start theme-color-variables
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
// scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
("<", "%3c"),
(">", "%3e"),
("#", "%23"),
("(", "%28"),
(")", "%29"),
) !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-container-classes: true !default;
$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
// Prefix for :root CSS variables
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
// Gradient
//
// The gradient which is added to components if `$enable-gradients` is `true`
// This gradient is also added to elements with `.bg-gradient`
// scss-docs-start variable-gradient
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
// scss-docs-end variable-gradient
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;
// scss-docs-end spacer-variables-maps
// Position
//
// Define the edge positioning anchors of the position utilities.
// scss-docs-start position-map
$position-values: (
0: 0,
50: 50%,
100: 100%
) !default;
// scss-docs-end position-map
// Body
//
// Settings for the `` element.
$body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-secondary-color: rgba($body-color, .75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, .5) !default;
$body-tertiary-bg: $gray-100 !default;
$body-emphasis-color: $black !default;
// Links
//
// Style anchor elements.
$link-color: $primary !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
// Icon links
// scss-docs-start icon-link-variables
$icon-link-gap: .375rem !default;
$icon-link-underline-offset: .25em !default;
$icon-link-icon-size: 1em !default;
$icon-link-icon-transition: .2s ease-in-out transform !default;
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
// scss-docs-end icon-link-variables
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
// scss-docs-start grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
// scss-docs-start container-max-widths
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
) !default;
// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;
// Container padding
$container-padding-x: $grid-gutter-width !default;
// Components
//
// Define common padding and border radius sizes and more.
// scss-docs-start border-variables
$border-width: 1px !default;
$border-widths: (
1: 1px,
2: 2px,
3: 3px,
4: 4px,
5: 5px
) !default;
$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
$border-radius: .375rem !default;
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-xxl: 2rem !default;
$border-radius-pill: 50rem !default;
// scss-docs-end border-radius-variables
// fusv-disable
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
// fusv-enable
// scss-docs-start box-shadow-variables
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
$component-active-bg: $primary !default;
// scss-docs-start focus-ring-variables
$focus-ring-width: .25rem !default;
$focus-ring-opacity: .25 !default;
$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
$focus-ring-blur: 0 !default;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables
// scss-docs-start caret-variables
$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
$caret-spacing: $caret-width * .85 !default;
// scss-docs-end caret-variables
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
) !default;
// scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$prefix}font-sans-serif) !default;
$font-family-code: var(--#{$prefix}font-monospace) !default;
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875 !default;
$font-size-lg: $font-size-base * 1.25 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$line-height-sm: 1.25 !default;
$line-height-lg: 2 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
// scss-docs-end font-variables
// scss-docs-start font-sizes
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
) !default;
// scss-docs-end font-sizes
// scss-docs-start headings-variables
$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
// scss-docs-end headings-variables
// scss-docs-start display-headings
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
) !default;
$display-font-family: null !default;
$display-font-style: null !default;
$display-font-weight: 300 !default;
$display-line-height: $headings-line-height !default;
// scss-docs-end display-headings
// scss-docs-start type-variables
$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;
$small-font-size: .875em !default;
$sub-sup-font-size: .75em !default;
// fusv-disable
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
// fusv-enable
$initialism-font-size: $small-font-size !default;
$blockquote-margin-y: $spacer !default;
$blockquote-font-size: $font-size-base * 1.25 !default;
$blockquote-footer-color: $gray-600 !default;
$blockquote-footer-font-size: $small-font-size !default;
$hr-margin-y: $spacer !default;
$hr-color: inherit !default;
// fusv-disable
$hr-bg-color: null !default; // Deprecated in v5.2.0
$hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-padding: .1875em !default;
$mark-color: $body-color !default;
$mark-bg: $yellow-100 !default;
// scss-docs-end type-variables
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
// scss-docs-start table-variables
$table-cell-padding-y: .5rem !default;
$table-cell-padding-x: .5rem !default;
$table-cell-padding-y-sm: .25rem !default;
$table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default;
$table-color: var(--#{$prefix}emphasis-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
$table-border-factor: .2 !default;
$table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color) !default;
$table-striped-order: odd !default;
$table-striped-columns-order: even !default;
$table-group-separator-color: currentcolor !default;
$table-caption-color: var(--#{$prefix}secondary-color) !default;
$table-bg-scale: -80% !default;
// scss-docs-end table-variables
// scss-docs-start table-loop
$table-variants: (
"primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
"info": shift-color($info, $table-bg-scale),
"warning": shift-color($warning, $table-bg-scale),
"danger": shift-color($danger, $table-bg-scale),
"light": $light,
"dark": $dark,
) !default;
// scss-docs-end table-loop
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
// scss-docs-start input-btn-variables
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-font-family: null !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: $focus-ring-width !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color: $focus-ring-color !default;
$input-btn-focus-blur: $focus-ring-blur !default;
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-font-size-sm: $font-size-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
$input-btn-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end input-btn-variables
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
// scss-docs-start btn-variables
$btn-color: var(--#{$prefix}body-color) !default;
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-font-size-sm: $input-btn-font-size-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$btn-hover-bg-shade-amount: 15% !default;
$btn-hover-bg-tint-amount: 15% !default;
$btn-hover-border-shade-amount: 20% !default;
$btn-hover-border-tint-amount: 10% !default;
$btn-active-bg-shade-amount: 20% !default;
$btn-active-bg-tint-amount: 20% !default;
$btn-active-border-shade-amount: 25% !default;
$btn-active-border-tint-amount: 10% !default;
// scss-docs-end btn-variables
// Forms
// scss-docs-start form-text-variables
$form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end form-text-variables
// scss-docs-start form-label-variables
$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
// scss-docs-end form-label-variables
// scss-docs-start form-input-variables
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: var(--#{$prefix}body-bg) !default;
$input-disabled-color: null !default;
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color: null !default;
$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;
// scss-docs-end form-input-variables
// scss-docs-start form-check-variables
$form-check-input-width: 1em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width + .5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,
") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,
") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,
") !default;
$form-check-input-disabled-opacity: .5 !default;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;
// scss-docs-end form-check-variables
// scss-docs-start form-switch-variables
$form-switch-color: rgba($black, .25) !default;
$form-switch-width: 2em !default;
$form-switch-padding-start: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,
") !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position .15s ease-in-out !default;
$form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,
") !default;
$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,
") !default;
$form-switch-checked-bg-position: right center !default;
// scss-docs-end form-switch-variables
// scss-docs-start input-group-variables
$input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
// scss-docs-start form-select-variables
$form-select-padding-y: $input-padding-y !default;
$form-select-padding-x: $input-padding-x !default;
$form-select-font-family: $input-font-family !default;
$form-select-font-size: $input-font-size !default;
$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
$form-select-font-weight: $input-font-weight !default;
$form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color: $gray-800 !default;
$form-select-indicator: url("data:image/svg+xml,
") !default;
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default;
$form-select-border-radius: $input-border-radius !default;
$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$form-select-focus-border-color: $input-focus-border-color !default;
$form-select-focus-width: $input-focus-width !default;
$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
$form-select-padding-y-sm: $input-padding-y-sm !default;
$form-select-padding-x-sm: $input-padding-x-sm !default;
$form-select-font-size-sm: $input-font-size-sm !default;
$form-select-border-radius-sm: $input-border-radius-sm !default;
$form-select-padding-y-lg: $input-padding-y-lg !default;
$form-select-padding-x-lg: $input-padding-x-lg !default;
$form-select-font-size-lg: $input-font-size-lg !default;
$form-select-border-radius-lg: $input-border-radius-lg !default;
$form-select-transition: $input-transition !default;
// scss-docs-end form-select-variables
// scss-docs-start form-range-variables
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$form-range-thumb-width: 1rem !default;
$form-range-thumb-height: $form-range-thumb-width !default;
$form-range-thumb-bg: $component-active-bg !default;
$form-range-thumb-border: 0 !default;
$form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default;
$form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
// scss-docs-end form-floating-variables
// Form validation
// scss-docs-start form-feedback-variables
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,
") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,
") !default;
// scss-docs-end form-feedback-variables
// scss-docs-start form-validation-colors
$form-valid-color: $form-feedback-valid-color !default;
$form-valid-border-color: $form-feedback-valid-color !default;
$form-invalid-color: $form-feedback-invalid-color !default;
$form-invalid-border-color: $form-feedback-invalid-color !default;
// scss-docs-end form-validation-colors
// scss-docs-start form-validation-states
$form-validation-states: (
"valid": (
"color": var(--#{$prefix}form-valid-color),
"icon": $form-feedback-icon-valid,
"tooltip-color": #fff,
"tooltip-bg-color": var(--#{$prefix}success),
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
"border-color": var(--#{$prefix}form-valid-border-color),
),
"invalid": (
"color": var(--#{$prefix}form-invalid-color),
"icon": $form-feedback-icon-invalid,
"tooltip-color": #fff,
"tooltip-bg-color": var(--#{$prefix}danger),
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
"border-color": var(--#{$prefix}form-invalid-border-color),
)
) !default;
// scss-docs-end form-validation-states
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
// scss-docs-start zindex-stack
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-offcanvas-backdrop: 1040 !default;
$zindex-offcanvas: 1045 !default;
$zindex-modal-backdrop: 1050 !default;
$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
$zindex-toast: 1090 !default;
// scss-docs-end zindex-stack
// scss-docs-start zindex-levels-map
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
) !default;
// scss-docs-end zindex-levels-map
// Navs
// scss-docs-start nav-variables
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-font-size: null !default;
$nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-underline-gap: 1rem !default;
$nav-underline-border-width: .125rem !default;
$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
// scss-docs-end nav-variables
// Navbar
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
$navbar-light-icon-color: rgba($body-color, .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,
") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
// scss-docs-start navbar-dark-variables
$navbar-dark-color: rgba($white, .55) !default;
$navbar-dark-hover-color: rgba($white, .75) !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-icon-color: $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,
") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-dark-brand-color: $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
// scss-docs-end navbar-dark-variables
// Dropdowns
//
// Dropdown menu container and contents.
// scss-docs-start dropdown-variables
$dropdown-min-width: 10rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: var(--#{$prefix}body-color) !default;
$dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
// fusv-enable
// scss-docs-end dropdown-variables
// scss-docs-start dropdown-dark-variables
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-color: $dropdown-dark-color !default;
$dropdown-dark-link-hover-color: $white !default;
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color: $gray-500 !default;
// scss-docs-end dropdown-dark-variables
// Pagination
// scss-docs-start pagination-variables
$pagination-padding-y: .375rem !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $component-active-bg !default;
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
// scss-docs-end pagination-variables
// Placeholders
// scss-docs-start placeholders
$placeholder-opacity-max: .5 !default;
$placeholder-opacity-min: .2 !default;
// scss-docs-end placeholders
// Cards
// scss-docs-start card-variables
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-title-color: null !default;
$card-subtitle-color: null !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
// Accordion
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: var(--#{$prefix}body-color) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
// fusv-disable
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
// fusv-enable
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text-emphasis !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,
") !default;
$accordion-button-active-icon: url("data:image/svg+xml,
") !default;
// scss-docs-end accordion-variables
// Tooltips
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: null !default; // TODO: remove this in v6
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
// fusv-disable
$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable
// scss-docs-end tooltip-variables
// Form tooltips must come after regular tooltips
// scss-docs-start tooltip-feedback-variables
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-end tooltip-feedback-variables
// Popovers
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: var(--#{$prefix}body-color) !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
$popover-arrow-width: 1rem !default;
$popover-arrow-height: .5rem !default;
// scss-docs-end popover-variables
// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
// fusv-enable
// Toasts
// scss-docs-start toast-variables
$toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
// Badges
// scss-docs-start badge-variables
$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !default;
$badge-color: $white !default;
$badge-padding-y: .35em !default;
$badge-padding-x: .65em !default;
$badge-border-radius: var(--#{$prefix}border-radius) !default;
// scss-docs-end badge-variables
// Modals
// scss-docs-start modal-variables
$modal-inner-padding: $spacer !default;
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-header-padding-y: $modal-inner-padding !default;
$modal-header-padding-x: $modal-inner-padding !default;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
$modal-footer-bg: null !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-sm: 300px !default;
$modal-md: 500px !default;
$modal-lg: 800px !default;
$modal-xl: 1140px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
// scss-docs-end modal-variables
// Alerts
//
// Define alert colors, border radius, and padding.
// scss-docs-start alert-variables
$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: var(--#{$prefix}border-radius) !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: var(--#{$prefix}border-width) !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
// fusv-disable
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
// fusv-enable
// Progress bars
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// scss-docs-end progress-variables
// List group
// scss-docs-start list-group-variables
$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: var(--#{$prefix}body-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-border-width: var(--#{$prefix}border-width) !default;
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
// fusv-disable
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
// fusv-enable
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end list-group-variables
// Image thumbnails
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
// scss-docs-end thumbnail-variables
// Figures
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end figure-variables
// Breadcrumbs
// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
// scss-docs-end breadcrumb-variables
// Carousel
// scss-docs-start carousel-variables
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-hover-opacity: .9 !default;
$carousel-control-transition: opacity .15s ease !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-opacity: .5 !default;
$carousel-indicator-active-bg: $white !default;
$carousel-indicator-active-opacity: 1 !default;
$carousel-indicator-transition: opacity .6s ease !default;
$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-caption-padding-y: 1.25rem !default;
$carousel-caption-spacer: 1.25rem !default;
$carousel-control-icon-width: 2rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,
") !default;
$carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// scss-docs-end carousel-variables
// scss-docs-start carousel-dark-variables
$carousel-dark-indicator-active-bg: $black !default;
$carousel-dark-caption-color: $black !default;
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
// scss-docs-end carousel-dark-variables
// Spinners
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-animation-speed: .75s !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
// scss-docs-end spinner-variables
// Close
// scss-docs-start close-variables
$btn-close-width: 1em !default;
$btn-close-height: $btn-close-width !default;
$btn-close-padding-x: .25em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $black !default;
$btn-close-bg: url("data:image/svg+xml,
") !default;
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
$btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default;
$btn-close-focus-opacity: 1 !default;
$btn-close-disabled-opacity: .25 !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
// scss-docs-end close-variables
// Offcanvas
// scss-docs-start offcanvas-variables
$offcanvas-padding-y: $modal-inner-padding !default;
$offcanvas-padding-x: $modal-inner-padding !default;
$offcanvas-horizontal-width: 400px !default;
$offcanvas-vertical-height: 30vh !default;
$offcanvas-transition-duration: .3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
$offcanvas-color: var(--#{$prefix}body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables
// Code
$code-font-size: $small-font-size !default;
$code-color: $pink !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: var(--#{$prefix}body-bg) !default;
$kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;
@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
================================================
FILE: assets/scss/soft-design-system/bootstrap/bootstrap-grid.scss
================================================
@import "mixins/banner";
@include bsBanner(Grid);
$include-column-box-sizing: true !default;
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins/breakpoints";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";
@import "vendor/rfs";
@import "containers";
@import "grid";
@import "utilities";
// Only use the utilities we need
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-get-multiple(
$utilities,
(
"display",
"order",
"flex",
"flex-direction",
"flex-grow",
"flex-shrink",
"flex-wrap",
"justify-content",
"align-items",
"align-content",
"align-self",
"margin",
"margin-x",
"margin-y",
"margin-top",
"margin-end",
"margin-bottom",
"margin-start",
"negative-margin",
"negative-margin-x",
"negative-margin-y",
"negative-margin-top",
"negative-margin-end",
"negative-margin-bottom",
"negative-margin-start",
"padding",
"padding-x",
"padding-y",
"padding-top",
"padding-end",
"padding-bottom",
"padding-start",
)
);
@import "utilities/api";
================================================
FILE: assets/scss/soft-design-system/bootstrap/bootstrap-reboot.scss
================================================
@import "mixins/banner";
@include bsBanner(Reboot);
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "root";
@import "reboot";
================================================
FILE: assets/scss/soft-design-system/bootstrap/bootstrap-utilities.scss
================================================
@import "mixins/banner";
@include bsBanner(Utilities);
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
================================================
FILE: assets/scss/soft-design-system/bootstrap/bootstrap.scss
================================================
@import "mixins/banner";
@include bsBanner("");
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_floating-labels.scss
================================================
.form-floating {
position: relative;
> .form-control,
> .form-control-plaintext,
> .form-select {
height: $form-floating-height;
min-height: $form-floating-height;
line-height: $form-floating-line-height;
}
> label {
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
transform-origin: 0 0;
@include transition($form-floating-transition);
}
> .form-control,
> .form-control-plaintext {
padding: $form-floating-padding-y $form-floating-padding-x;
&::placeholder {
color: transparent;
}
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
}
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
> .form-control:focus,
> .form-control:not(:placeholder-shown),
> .form-control-plaintext,
> .form-select {
~ label {
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform;
&::after {
position: absolute;
inset: $form-floating-padding-y ($form-floating-padding-x * .5);
z-index: -1;
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
}
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform;
}
}
> .form-control-plaintext {
~ label {
border-width: $input-border-width 0; // Required to properly position label text - as explained above
}
}
> :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
color: $form-floating-label-disabled-color;
&::after {
background-color: $input-disabled-bg;
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_form-check.scss
================================================
//
// Check/radio
//
.form-check {
display: block;
min-height: $form-check-min-height;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
margin-left: $form-check-padding-start * -1;
}
}
.form-check-reverse {
padding-right: $form-check-padding-start;
padding-left: 0;
text-align: right;
.form-check-input {
float: right;
margin-right: $form-check-padding-start * -1;
margin-left: 0;
}
}
.form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg};
flex-shrink: 0;
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: $form-check-input-border;
print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);
&[type="checkbox"] {
@include border-radius($form-check-input-border-radius);
}
&[type="radio"] {
// stylelint-disable-next-line property-disallowed-list
border-radius: $form-check-radio-border-radius;
}
&:active {
filter: $form-check-input-active-filter;
}
&:focus {
border-color: $form-check-input-focus-border;
outline: 0;
box-shadow: $form-check-input-focus-box-shadow;
}
&:checked {
background-color: $form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color;
&[type="checkbox"] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}
&[type="radio"] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
}
}
&[type="checkbox"]:indeterminate {
background-color: $form-check-input-indeterminate-bg-color;
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
}
}
&:disabled {
pointer-events: none;
filter: none;
opacity: $form-check-input-disabled-opacity;
}
// Use disabled attribute in addition of :disabled pseudo-class
// See: https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled {
~ .form-check-label {
cursor: default;
opacity: $form-check-label-disabled-opacity;
}
}
}
.form-check-label {
color: $form-check-label-color;
cursor: $form-check-label-cursor;
}
//
// Switch
//
.form-switch {
padding-left: $form-switch-padding-start;
.form-check-input {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius, 0);
@include transition($form-switch-transition);
&:focus {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
&:checked {
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
&.form-check-reverse {
padding-right: $form-switch-padding-start;
padding-left: 0;
.form-check-input {
margin-right: $form-switch-padding-start * -1;
margin-left: 0;
}
}
}
.form-check-inline {
display: inline-block;
margin-right: $form-check-inline-margin-end;
}
.btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
&[disabled],
&:disabled {
+ .btn {
pointer-events: none;
filter: none;
opacity: $form-check-btn-check-disabled-opacity;
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_form-control.scss
================================================
//
// General form controls (plus a few specific high-level interventions)
//
.form-control {
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
appearance: none; // Fix appearance for date inputs in Safari
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
// Note: This has no effect on
s in some browsers, due to the limited stylability of ``s in CSS.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
&[type="file"] {
overflow: hidden; // prevent pseudo element button overlap
&:not(:disabled):not([readonly]) {
cursor: pointer;
}
}
// Customize the `:focus` state to imitate native WebKit styles.
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
}
}
&::-webkit-date-and-time-value {
// On Android Chrome, form-control's "width: 100%" makes the input width too small
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
//
// On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
// Tested under iOS 16.2 / Safari 16.2
min-width: 85px; // Seems to be a good minimum safe width
// Add some height to date inputs on iOS
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
margin: 0;
}
// Prevent excessive date input height in Webkit
// https://github.com/twbs/bootstrap/issues/34433
&::-webkit-datetime-edit {
display: block;
padding: 0;
}
// Placeholder
&::placeholder {
color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled {
color: $input-disabled-color;
background-color: $input-disabled-bg;
border-color: $input-disabled-border-color;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
// File input buttons theming
&::file-selector-button {
padding: $input-padding-y $input-padding-x;
margin: (-$input-padding-y) (-$input-padding-x);
margin-inline-end: $input-padding-x;
color: $form-file-button-color;
@include gradient-bg($form-file-button-bg);
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: $input-border-width;
border-radius: 0; // stylelint-disable-line property-disallowed-list
@include transition($btn-transition);
}
&:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: $form-file-button-hover-bg;
}
}
// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-plaintext {
display: block;
width: 100%;
padding: $input-padding-y 0;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-line-height;
color: $input-plaintext-color;
background-color: transparent;
border: solid transparent;
border-width: $input-border-width 0;
&:focus {
outline: 0;
}
&.form-control-sm,
&.form-control-lg {
padding-right: 0;
padding-left: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
min-height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
&::file-selector-button {
padding: $input-padding-y-sm $input-padding-x-sm;
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
margin-inline-end: $input-padding-x-sm;
}
}
.form-control-lg {
min-height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
&::file-selector-button {
padding: $input-padding-y-lg $input-padding-x-lg;
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
margin-inline-end: $input-padding-x-lg;
}
}
// Make sure textareas don't shrink too much when resized
// https://github.com/twbs/bootstrap/pull/29124
// stylelint-disable selector-no-qualifying-type
textarea {
&.form-control {
min-height: $input-height;
}
&.form-control-sm {
min-height: $input-height-sm;
}
&.form-control-lg {
min-height: $input-height-lg;
}
}
// stylelint-enable selector-no-qualifying-type
.form-control-color {
width: $form-color-width;
height: $input-height;
padding: $input-padding-y;
&:not(:disabled):not([readonly]) {
cursor: pointer;
}
&::-moz-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
}
&::-webkit-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
}
&.form-control-sm { height: $input-height-sm; }
&.form-control-lg { height: $input-height-lg; }
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_form-range.scss
================================================
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
.form-range {
width: 100%;
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
appearance: none;
background-color: transparent;
&:focus {
outline: 0;
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
border: 0;
}
&::-webkit-slider-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
appearance: none;
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition);
&:active {
@include gradient-bg($form-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
width: $form-range-track-width;
height: $form-range-track-height;
color: transparent; // Why?
cursor: $form-range-track-cursor;
background-color: $form-range-track-bg;
border-color: transparent;
@include border-radius($form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow);
}
&::-moz-range-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
appearance: none;
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition);
&:active {
@include gradient-bg($form-range-thumb-active-bg);
}
}
&::-moz-range-track {
width: $form-range-track-width;
height: $form-range-track-height;
color: transparent;
cursor: $form-range-track-cursor;
background-color: $form-range-track-bg;
border-color: transparent; // Firefox specific?
@include border-radius($form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow);
}
&:disabled {
pointer-events: none;
&::-webkit-slider-thumb {
background-color: $form-range-thumb-disabled-bg;
}
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg;
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_form-select.scss
================================================
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
font-family: $form-select-font-family;
@include font-size($form-select-font-size);
font-weight: $form-select-font-weight;
line-height: $form-select-line-height;
color: $form-select-color;
appearance: none;
background-color: $form-select-bg;
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
border: $form-select-border-width solid $form-select-border-color;
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);
@include transition($form-select-transition);
&:focus {
border-color: $form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
}
&[multiple],
&[size]:not([size="1"]) {
padding-right: $form-select-padding-x;
background-image: none;
}
&:disabled {
color: $form-select-disabled-color;
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $form-select-color;
}
}
.form-select-sm {
padding-top: $form-select-padding-y-sm;
padding-bottom: $form-select-padding-y-sm;
padding-left: $form-select-padding-x-sm;
@include font-size($form-select-font-size-sm);
@include border-radius($form-select-border-radius-sm);
}
.form-select-lg {
padding-top: $form-select-padding-y-lg;
padding-bottom: $form-select-padding-y-lg;
padding-left: $form-select-padding-x-lg;
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_form-text.scss
================================================
//
// Form text
//
.form-text {
margin-top: $form-text-margin-top;
@include font-size($form-text-font-size);
font-style: $form-text-font-style;
font-weight: $form-text-font-weight;
color: $form-text-color;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_input-group.scss
================================================
//
// Base styles
//
.input-group {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
align-items: stretch;
width: 100%;
> .form-control,
> .form-select,
> .form-floating {
position: relative; // For focus state's z-index
flex: 1 1 auto;
width: 1%;
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
}
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .form-select:focus,
> .form-floating:focus-within {
z-index: 5;
}
// Ensure buttons are always above inputs for more visually pleasing borders.
// This isn't needed for `.input-group-text` since it shares the same border-color
// as our inputs.
.btn {
position: relative;
z-index: 2;
&:focus {
z-index: 5;
}
}
}
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.
.input-group-text {
display: flex;
align-items: center;
padding: $input-group-addon-padding-y $input-group-addon-padding-x;
@include font-size($input-font-size); // Match inputs
font-weight: $input-group-addon-font-weight;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
}
// Sizing
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
}
.input-group-lg > .form-select,
.input-group-sm > .form-select {
padding-right: $form-select-padding-x + $form-select-indicator-padding;
}
// Rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
> .dropdown-toggle:nth-last-child(n + 3),
> .form-floating:not(:last-child) > .form-control,
> .form-floating:not(:last-child) > .form-select {
@include border-end-radius(0);
}
}
&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
> .dropdown-toggle:nth-last-child(n + 4),
> .form-floating:nth-last-child(n + 3) > .form-control,
> .form-floating:nth-last-child(n + 3) > .form-select {
@include border-end-radius(0);
}
}
$validation-messages: "";
@each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0);
}
> .form-floating:not(:first-child) > .form-control,
> .form-floating:not(:first-child) > .form-select {
@include border-start-radius(0);
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_labels.scss
================================================
//
// Labels
//
.form-label {
margin-bottom: $form-label-margin-bottom;
@include font-size($form-label-font-size);
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
color: $form-label-color;
}
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `` default
@include font-size(inherit); // Override the `` default
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
line-height: $input-line-height;
color: $form-label-color;
}
.col-form-label-lg {
padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg);
}
.col-form-label-sm {
padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm);
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/forms/_validation.scss
================================================
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
// scss-docs-end form-validation-states-loop
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_clearfix.scss
================================================
.clearfix {
@include clearfix();
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_color-bg.scss
================================================
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.text-bg-#{$color} {
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_colored-links.scss
================================================
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
}
}
}
}
// One-off special link helper as a bridge until v6
.link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_focus-ring.scss
================================================
.focus-ring:focus {
outline: 0;
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_icon-link.scss
================================================
.icon-link {
display: inline-flex;
gap: $icon-link-gap;
align-items: center;
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
text-underline-offset: $icon-link-underline-offset;
backface-visibility: hidden;
> .bi {
flex-shrink: 0;
width: $icon-link-icon-size;
height: $icon-link-icon-size;
fill: currentcolor;
@include transition($icon-link-icon-transition);
}
}
.icon-link-hover {
&:hover,
&:focus-visible {
> .bi {
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_position.scss
================================================
// Shorthand
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-fixed;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-fixed;
}
// Responsive sticky top and bottom
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.sticky#{$infix}-top {
position: sticky;
top: 0;
z-index: $zindex-sticky;
}
.sticky#{$infix}-bottom {
position: sticky;
bottom: 0;
z-index: $zindex-sticky;
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_ratio.scss
================================================
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {
position: relative;
width: 100%;
&::before {
display: block;
padding-top: var(--#{$prefix}aspect-ratio);
content: "";
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@each $key, $ratio in $aspect-ratios {
.ratio-#{$key} {
--#{$prefix}aspect-ratio: #{$ratio};
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_stacks.scss
================================================
// scss-docs-start stacks
.hstack {
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
}
.vstack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-self: stretch;
}
// scss-docs-end stacks
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_stretched-link.scss
================================================
//
// Stretched link
//
.stretched-link {
&::#{$stretched-link-pseudo-element} {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $stretched-link-z-index;
content: "";
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_text-truncation.scss
================================================
//
// Text truncation
//
.text-truncate {
@include text-truncate();
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_visually-hidden.scss
================================================
//
// Visually hidden
//
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
@include visually-hidden();
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/helpers/_vr.scss
================================================
.vr {
display: inline-block;
align-self: stretch;
width: $vr-border-width;
min-height: 1em;
background-color: currentcolor;
opacity: $hr-opacity;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_alert.scss
================================================
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
.alert-link {
color: var(--#{$prefix}alert-link-color);
}
}
// scss-docs-end alert-variant-mixin
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_backdrop.scss
================================================
// Shared between modals and offcanvases
@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
position: fixed;
top: 0;
left: 0;
z-index: $zindex;
width: 100vw;
height: 100vh;
background-color: $backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: $backdrop-opacity; }
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_banner.scss
================================================
@mixin bsBanner($file) {
/*!
* Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_border-radius.scss
================================================
// stylelint-disable property-disallowed-list
// Single side border-radius
// Helper function to replace negative values with 0
@function valid-radius($radius) {
$return: ();
@each $value in $radius {
@if type-of($value) == number {
$return: append($return, max($value, 0));
} @else {
$return: append($return, $value);
}
}
@return $return;
}
// scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: valid-radius($radius);
}
@else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
@mixin border-top-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-radius($radius: $border-radius) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-start-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-top-start-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
}
}
@mixin border-top-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-start-radius($radius: $border-radius) {
@if $enable-rounded {
border-bottom-left-radius: valid-radius($radius);
}
}
// scss-docs-end border-radius-mixins
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_box-shadow.scss
================================================
@mixin box-shadow($shadow...) {
@if $enable-shadows {
$result: ();
@each $value in $shadow {
@if $value != null {
$result: append($result, $value, "comma");
}
@if $value == none and length($shadow) > 1 {
@warn "The keyword 'none' must be used as a single argument.";
}
}
@if (length($result) > 0) {
box-shadow: $result;
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_breakpoints.scss
================================================
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width.
// The maximum value is reduced by 0.02px to work around the limitations of
// `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($lower, $breakpoints) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($upper, $breakpoints) {
@content;
}
}
}
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($name, $breakpoints) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($next, $breakpoints) {
@content;
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_buttons.scss
================================================
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_caret.scss
================================================
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
border-top: $width solid;
border-right: $width solid transparent;
border-bottom: 0;
border-left: $width solid transparent;
}
@mixin caret-up($width: $caret-width) {
border-top: 0;
border-right: $width solid transparent;
border-bottom: $width solid;
border-left: $width solid transparent;
}
@mixin caret-end($width: $caret-width) {
border-top: $width solid transparent;
border-right: 0;
border-bottom: $width solid transparent;
border-left: $width solid;
}
@mixin caret-start($width: $caret-width) {
border-top: $width solid transparent;
border-right: $width solid;
border-bottom: $width solid transparent;
}
@mixin caret(
$direction: down,
$width: $caret-width,
$spacing: $caret-spacing,
$vertical-align: $caret-vertical-align
) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $spacing;
vertical-align: $vertical-align;
content: "";
@if $direction == down {
@include caret-down($width);
} @else if $direction == up {
@include caret-up($width);
} @else if $direction == end {
@include caret-end($width);
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $spacing;
vertical-align: $vertical-align;
content: "";
@include caret-start($width);
}
}
&:empty::after {
margin-left: 0;
}
}
}
// scss-docs-end caret-mixins
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_clearfix.scss
================================================
// scss-docs-start clearfix
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
// scss-docs-end clearfix
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_color-mode.scss
================================================
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == "media-query" {
@if $root == true {
@media (prefers-color-scheme: $mode) {
:root {
@content;
}
}
} @else {
@media (prefers-color-scheme: $mode) {
@content;
}
}
} @else {
[data-bs-theme="#{$mode}"] {
@content;
}
}
}
// scss-docs-end color-mode-mixin
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_color-scheme.scss
================================================
// scss-docs-start mixin-color-scheme
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
// scss-docs-end mixin-color-scheme
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_container.scss
================================================
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-right: auto;
margin-left: auto;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_deprecate.scss
================================================
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.
// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
@if ($enable-deprecation-messages != false and $ignore-warning != true) {
@warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_forms.scss
================================================
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $border-color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}
// scss-docs-end form-validation-mixins
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_gradients.scss
================================================
// Gradients
// scss-docs-start gradient-bg-mixin
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
}
// scss-docs-end gradient-bg-mixin
// scss-docs-start gradient-mixins
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
// scss-docs-end gradient-mixins
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_grid.scss
================================================
// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready() {
// Add box sizing if only the grid is loaded
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we set the width
// later on to override this initial width.
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$prefix}gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@if $size {
flex: 0 0 auto;
width: percentage(divide($size, $columns));
} @else {
flex: 1 1 0;
max-width: 100%;
}
}
@mixin make-col-auto() {
flex: 0 0 auto;
width: auto;
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// number of columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
width: percentage(divide(1, $count));
}
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
}
.row-cols#{$infix}-auto > * {
@include make-col-auto();
}
@if $grid-row-columns > 0 {
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
}
.col#{$infix}-auto {
@include make-col-auto();
}
@if $columns > 0 {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@include make-col($i, $columns);
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns);
}
}
}
}
// Gutters
//
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--#{$prefix}gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--#{$prefix}gutter-y: #{$value};
}
}
}
}
}
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@if $columns > 0 {
@for $i from 1 through $columns {
.g-col#{$infix}-#{$i} {
grid-column: auto / span $i;
}
}
// Start with `1` because `0` is an invalid value.
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
@for $i from 1 through ($columns - 1) {
.g-start#{$infix}-#{$i} {
grid-column-start: $i;
}
}
}
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_image.scss
================================================
// Image Mixins
// - Responsive image
// - Retina image
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin img-fluid {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
// when setting a width and height attribute on the img element.
height: auto;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_list-group.scss
================================================
@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
// List Groups
// scss-docs-start list-group-mixin
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
// scss-docs-end list-group-mixin
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_lists.scss
================================================
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
padding-left: 0;
list-style: none;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_pagination.scss
================================================
// Pagination
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_reset-text.scss
================================================
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
font-style: normal;
font-weight: $font-weight-normal;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_resize.scss
================================================
// Resize anything
@mixin resizable($direction) {
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
resize: $direction; // Options: horizontal, vertical, both
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_table-variants.scss
================================================
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
$table-border-color: mix($color, $background, percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_text-truncate.scss
================================================
// Text truncate
// Requires inline-block or block for proper styling
@mixin text-truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_transition.scss
================================================
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
@if length($transition) == 0 {
$transition: $transition-base;
}
@if length($transition) > 1 {
@each $value in $transition {
@if $value == null or $value == none {
@warn "The keyword 'none' or 'null' must be used as a single argument.";
}
}
}
@if $enable-transitions {
@if nth($transition, 1) != null {
transition: $transition;
}
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_utilities.scss
================================================
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
$values: map-get($utility, values);
// If the values are a list or string, convert it into a map
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
$values: zip($values, $values);
}
@each $key, $value in $values {
$properties: map-get($utility, property);
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
@if type-of($properties) == "string" {
$properties: append((), $properties);
}
// Use custom class if present
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
@if map-get($utility, rfs) {
// Inside the media query
@if $is-rfs-media-query {
$val: rfs-value($value);
// Do not render anything if fluid and non fluid values are the same
$value: if($val == rfs-fluid-value($value), null, $val);
}
@else {
$value: rfs-fluid-value($value);
}
}
$is-css-var: map-get($utility, css-var);
$is-local-vars: map-get($utility, local-vars);
$is-rtl: map-get($utility, rtl);
@if $value != null {
@if $is-rtl == false {
/* rtl:begin:remove */
}
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
--#{$prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
}
}
@if $is-rtl == false {
/* rtl:end:remove */
}
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/mixins/_visually-hidden.scss
================================================
// stylelint-disable declaration-no-important
// Hide content visually while keeping it accessible to assistive technologies
//
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
@mixin visually-hidden() {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
// Fix for positioned table caption that could become anonymous cells
&:not(caption) {
position: absolute !important;
}
}
// Use to only display content when it's focused, or one of its child elements is focused
// (i.e. when focus is within the element/container that the class was applied to)
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@mixin visually-hidden-focusable() {
&:not(:focus):not(:focus-within) {
@include visually-hidden();
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/jasmine.js
================================================
/* eslint-disable camelcase */
'use strict'
const path = require('node:path')
module.exports = {
spec_dir: 'scss',
// Make Jasmine look for `.test.scss` files
spec_files: ['**/*.{test,spec}.scss'],
// Compile them into JS scripts running `sass-true`
requires: [path.join(__dirname, 'sass-true/register')],
// Ensure we use `require` so that the require.extensions works
// as `import` completely bypasses it
jsLoader: 'require'
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss
================================================
// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
@import "../../functions";
@import "../../variables";
// Voluntarily not importing _variables-dark.scss
@import "../../maps";
@import "../../mixins";
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/mixins/_color-modes.test.scss
================================================
// stylelint-disable selector-attribute-quotes
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
@include describe("global $color-mode-type: data") {
@include it("generates data attribute selectors for dark mode") {
@include assert() {
@include output() {
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@include color-mode(dark, true) {
--custom-color: #{mix($indigo, $blue, 50%)};
}
}
@include expect() {
[data-bs-theme=dark] .element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
[data-bs-theme=dark] {
--custom-color: #3a3ff8;
}
}
}
}
}
@include describe("global $color-mode-type: media-query") {
@include it("generates media queries for dark mode") {
$color-mode-type: media-query !global;
@include assert() {
@include output() {
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@include color-mode(dark, true) {
--custom-color: #{mix($indigo, $blue, 50%)};
}
}
@include expect() {
@media (prefers-color-scheme: dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@media (prefers-color-scheme: dark) {
:root {
--custom-color: #3a3ff8;
}
}
}
}
$color-mode-type: data !global;
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss
================================================
$color-mode-type: media-query;
@import "../../bootstrap";
@include describe("global $color-mode-type: media-query") {
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/mixins/_utilities.test.scss
================================================
$prefix: bs-;
$enable-important-utilities: false;
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
@import "../../mixins/utilities";
@mixin test-generate-utility($params...) {
@include assert() {
@include output() {
@include generate-utility($params...);
}
@include expect() {
@content;
}
}
}
@include describe(generate-utility) {
@include it("generates a utility class for each value") {
@include test-generate-utility(
(
property: "padding",
values: (small: .5rem, large: 2rem)
)
) {
.padding-small {
padding: .5rem;
}
.padding-large {
padding: 2rem;
}
}
}
@include describe("global $enable-important-utilities: true") {
@include it("sets !important") {
$enable-important-utilities: true !global;
@include test-generate-utility(
(
property: "padding",
values: (small: .5rem, large: 2rem)
)
) {
.padding-small {
padding: .5rem !important;
}
.padding-large {
padding: 2rem !important;
}
}
$enable-important-utilities: false !global;
}
}
@include describe("$utility") {
@include describe("values") {
@include it("supports null keys") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
) {
.padding {
padding: 1rem;
}
.padding-small {
padding: .5rem;
}
.padding-large {
padding: 2rem;
}
}
}
@include it("ignores null values") {
@include test-generate-utility(
(
property: "padding",
values: (small: null, large: 2rem)
)
) {
.padding-large {
padding: 2rem;
}
}
}
@include it("supports lists") {
@include test-generate-utility(
(
property: "padding",
values: 1rem 2rem
)
) {
.padding-1rem {
padding: 1rem;
}
.padding-2rem {
padding: 2rem;
}
}
}
@include it("supports single values") {
@include test-generate-utility(
(
property: padding,
values: 1rem
)
) {
.padding-1rem {
padding: 1rem;
}
}
}
}
@include describe("class & property") {
@include it("adds each property to the declaration") {
@include test-generate-utility(
(
class: padding-x,
property: padding-inline-start padding-inline-end,
values: 1rem
)
) {
.padding-x-1rem {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
}
@include it("uses the first property as class name") {
@include test-generate-utility(
(
property: padding-inline-start padding-inline-end,
values: 1rem
)
) {
.padding-inline-start-1rem {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
}
@include it("supports a null class to create classes straight from the values") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
)
) {
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
}
}
}
@include describe("state") {
@include it("Generates selectors for each states") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
padding: 1rem;
}
.padding-1rem-hover:hover {
padding: 1rem;
}
.padding-1rem-focus:focus {
padding: 1rem;
}
}
}
}
@include describe("css-var"){
@include it("sets a CSS variable instead of the property") {
@include test-generate-utility(
(
property: padding,
css-variable-name: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
@include it("defaults to class") {
@include test-generate-utility(
(
property: padding,
class: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
}
@include describe("local-vars") {
@include it("generates the listed variables") {
@include test-generate-utility(
(
property: color,
class: desaturated-color,
local-vars: (
color-opacity: 1,
color-saturation: .25
),
values: (
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
)
)
) {
.desaturated-color-blue {
--bs-color-opacity: 1;
// Sass compilation will put a leading zero so we want to keep that one
// stylelint-disable-next-line @stylistic/number-leading-zero
--bs-color-saturation: 0.25;
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
}
}
}
}
@include describe("css-var & state") {
@include it("Generates a rule with for each state with a CSS variable") {
@include test-generate-utility(
(
property: padding,
css-var: true,
css-variable-name: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-1rem-hover:hover {
--bs-padding: 1rem;
}
.padding-1rem-focus:focus {
--bs-padding: 1rem;
}
}
}
}
@include describe("rtl") {
@include it("sets up RTLCSS for removal when false") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rtl: false
)
) {
/* rtl:begin:remove */
.padding-1rem {
padding: 1rem;
}
/* rtl:end:remove */
}
}
}
@include describe("rfs") {
@include it("sets the fluid value when not inside media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
)
) {
.padding-1rem {
padding: rfs-fluid-value(1rem);
}
}
}
@include it("sets the value when inside the media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
),
$is-rfs-media-query: true
) {
.padding-1rem {
padding: rfs-value(1rem);
}
}
}
}
}
@include describe("$infix") {
@include it("inserts the given infix") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
$infix: -sm
) {
.padding-sm {
padding: 1rem;
}
.padding-sm-small {
padding: .5rem;
}
.padding-sm-large {
padding: 2rem;
}
}
}
@include it("strips leading - if class is null") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
-sm
) {
.sm-visible {
visibility: visible;
}
.sm-invisible {
visibility: hidden;
}
}
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/sass-true/register.js
================================================
'use strict'
const path = require('node:path')
const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/')
require.extensions['.scss'] = (module, filename) => {
const normalizedFilename = filename.replace(/\\/g, '/')
return module._compile(`
const runner = require('${runnerPath}')
runner('${normalizedFilename}', { describe, it })
`, filename)
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/sass-true/runner.js
================================================
'use strict'
const fs = require('node:fs')
const path = require('node:path')
const {
runSass
} = require('sass-true')
module.exports = (filename, {
describe,
it
}) => {
const data = fs.readFileSync(filename, 'utf8')
const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
const sassString = TRUE_SETUP + data
runSass({
describe,
it,
sourceType: 'string'
},
sassString, {
loadPaths: [path.dirname(filename)]
}
)
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/tests/utilities/_api.test.scss
================================================
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
$utilities: ();
@include describe("utilities/api") {
@include it("generates utilities for each breakpoints") {
$utilities: (
margin: (
property: margin,
values: auto
),
padding: (
property: padding,
responsive: true,
values: 1rem
),
font-size: (
property: font-size,
values: (large: 1.25rem),
print: true
)
) !global;
$grid-breakpoints: (
xs: 0,
sm: 333px,
md: 666px
) !global;
@include assert() {
@include output() {
@import "../../utilities/api";
}
@include expect() {
// margin is not set to responsive
.margin-auto {
margin: auto !important;
}
// padding is, though
.padding-1rem {
padding: 1rem !important;
}
.font-size-large {
font-size: 1.25rem !important;
}
@media (min-width: 333px) {
.padding-sm-1rem {
padding: 1rem !important;
}
}
@media (min-width: 666px) {
.padding-md-1rem {
padding: 1rem !important;
}
}
@media print {
.font-size-print-large {
font-size: 1.25rem !important;
}
}
}
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/utilities/_api.scss
================================================
// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
}
}
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
}
}
}
}
}
// Print utilities
@media print {
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if type-of($utility) == "map" and map-get($utility, print) == true {
@include generate-utility($utility, "-print");
}
}
}
================================================
FILE: assets/scss/soft-design-system/bootstrap/vendor/_rfs.scss
================================================
// stylelint-disable scss/dimension-no-non-numeric-values
// SCSS RFS mixin
//
// Automated responsive values for font sizes, paddings, margins and much more
//
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
// Configuration
// Base value
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;
@if $rfs-unit != rem and $rfs-unit != px {
@error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
}
// Breakpoint at where values start decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;
@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
@error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
}
// Resize values based on screen height and width
$rfs-two-dimensional: false !default;
// Factor of decrease
$rfs-factor: 10 !default;
@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
}
// Mode. Possibilities: "min-media-query", "max-media-query"
$rfs-mode: min-media-query !default;
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
$rfs-class: false !default;
// 1 rem = $rfs-rem-value px
$rfs-rem-value: 16 !default;
// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
$rfs-safari-iframe-resize-bug-fix: false !default;
// Disable RFS by setting $enable-rfs to false
$enable-rfs: true !default;
// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
$rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
$rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
$rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
// Calculate the media query value
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
// Internal mixin used to determine which media query needs to be used
@mixin _rfs-media-query {
@if $rfs-two-dimensional {
@if $rfs-mode == max-media-query {
@media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
@content;
}
}
@else {
@media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
@content;
}
}
}
@else {
@media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
@content;
}
}
}
// Internal mixin that adds disable classes to the selector if needed.
@mixin _rfs-rule {
@if $rfs-class == disable and $rfs-mode == max-media-query {
// Adding an extra class increases specificity, which prevents the media query to override the property
&,
.disable-rfs &,
&.disable-rfs {
@content;
}
}
@else if $rfs-class == enable and $rfs-mode == min-media-query {
.enable-rfs &,
&.enable-rfs {
@content;
}
} @else {
@content;
}
}
// Internal mixin that adds enable classes to the selector if needed.
@mixin _rfs-media-query-rule {
@if $rfs-class == enable {
@if $rfs-mode == min-media-query {
@content;
}
@include _rfs-media-query () {
.enable-rfs &,
&.enable-rfs {
@content;
}
}
}
@else {
@if $rfs-class == disable and $rfs-mode == min-media-query {
.disable-rfs &,
&.disable-rfs {
@content;
}
}
@include _rfs-media-query () {
@content;
}
}
}
// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$val: "";
// Loop over each value and calculate value
@each $value in $values {
@if $value == 0 {
$val: $val + " 0";
}
@else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
@if $unit == px {
// Convert to rem if needed
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
}
@else if $unit == rem {
// Convert to px if needed
$val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
} @else {
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
$val: $val + " " + $value;
}
}
}
// Remove first space
@return unquote(str-slice($val, 2));
}
// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$val: "";
// Loop over each value and calculate value
@each $value in $values {
@if $value == 0 {
$val: $val + " 0";
} @else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@if not $unit or $unit != px and $unit != rem {
$val: $val + " " + $value;
} @else {
// Remove unit from $value for calculations
$value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
// Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
$value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
// Base value formatting
$min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
// Use negative value if needed
$min-width: if($value < 0, -$min-width, $min-width);
// Use `vmin` if two-dimensional is enabled
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
$variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
}
}
}
}
// Remove first space
@return unquote(str-slice($val, 2));
}
// RFS mixin
@mixin rfs($values, $property: font-size) {
@if $values != null {
$val: rfs-value($values);
$fluid-val: rfs-fluid-value($values);
// Do not print the media query if responsive & non-responsive values are the same
@if $val == $fluid-val {
#{$property}: $val;
}
@else {
@include _rfs-rule () {
#{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
// Include safari iframe resize fix if needed
min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
}
@include _rfs-media-query-rule () {
#{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
}
}
}
}
// Shorthand helper mixins
@mixin font-size($value) {
@include rfs($value);
}
@mixin padding($value) {
@include rfs($value, padding);
}
@mixin padding-top($value) {
@include rfs($value, padding-top);
}
@mixin padding-right($value) {
@include rfs($value, padding-right);
}
@mixin padding-bottom($value) {
@include rfs($value, padding-bottom);
}
@mixin padding-left($value) {
@include rfs($value, padding-left);
}
@mixin margin($value) {
@include rfs($value, margin);
}
@mixin margin-top($value) {
@include rfs($value, margin-top);
}
@mixin margin-right($value) {
@include rfs($value, margin-right);
}
@mixin margin-bottom($value) {
@include rfs($value, margin-bottom);
}
@mixin margin-left($value) {
@include rfs($value, margin-left);
}
================================================
FILE: assets/scss/soft-design-system/cards/card-background.scss
================================================
.card {
&.card-background {
align-items: $card-bg-align-items;
.full-background {
background-position: $card-full-bg-bg-position;
background-size: $card-full-bg-bg-size;
margin-bottom: $card-full-bg-mb;
width: $card-full-bg-width;
height: $card-full-bg-height;
position: $card-full-bg-position;
border-radius: $card-border-radius;
}
.card-body {
color: $white;
position: $card-bg-body-position;
z-index: $card-bg-body-z-index;
.content-center,
.content-left {
min-height: $card-bg-content-min-height;
max-width: $card-bg-content-max-width;
padding-top: $card-bg-content-pt;
padding-bottom: $card-bg-content-pb;
}
.content-center {
text-align: center;
}
&.body-left {
width: $card-bg-body-left-width;
}
.author {
.name {
span,
.stats {
color: $white;
}
}
}
}
&:after {
position: $card-bg-filter-position;
top: $card-bg-filter-top;
bottom: $card-bg-filter-bottom;
left: $card-bg-filter-left;
height: $card-bg-filter-height;
width: $card-bg-filter-width;
z-index: $card-bg-filter-z-index;
display: $card-bg-filter-display;
content: $card-bg-filter-content;
background: $card-bg-filter-bg;
border-radius: $card-border-radius;
}
@each $name, $val in $theme-gradient-colors {
&.card-background-mask-#{$name} {
&:before {
background: $card-bg-filter-mask-bg;
}
&:after {
@include gradient-directional(nth($val, 1) 0%, nth($val, -1) 100%, $deg: 310deg);
opacity: .85;
}
}
}
.card-category {
font-size: $font-size-sm;
font-weight: $font-weight-bold;
}
.card-description {
margin-top: $card-bg-description-margin;
margin-bottom: $card-bg-description-margin;
}
}
}
================================================
FILE: assets/scss/soft-design-system/custom/_styles.scss
================================================
================================================
FILE: assets/scss/soft-design-system/custom/_variables.scss
================================================
================================================
FILE: assets/scss/soft-design-system/forms/_form-check.scss
================================================
.form-check:not(.form-switch) .form-check-input {
&[type="checkbox"],
&[type="radio"] {
border: 1px solid darken($gray-200, 10%);
margin-top: $form-text-margin-top;
position: relative;
&:checked {
border: 0;
}
}
&[type="checkbox"] {
&:after {
transition: opacity $form-check-transition-time ease-in-out;
font-family: "FontAwesome";
content: "\f00c";
width: 100%;
height: 100%;
color: $form-check-input-checked-color;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: $font-size-sm - .205;
opacity: 0;
}
&:checked:after {
opacity: 1;
}
}
&[type="radio"] {
transition: border 0s;
&:after {
transition: opacity $form-check-transition-time ease-in-out;
content: "";
position: absolute;
width: $form-check-radio-after-width;
height: $form-check-radio-after-width;
border-radius: 50%;
background-color: $white;
opacity: 0;
}
&:checked {
padding: 6px;
}
&:checked:after {
opacity: 1;
}
}
}
.form-check-label,
.form-check-input[type="checkbox"] {
cursor: pointer;
}
.form-check-label{
font-size:$font-size-sm;
font-weight: $font-weight-normal;
}
.form-check-input{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
================================================
FILE: assets/scss/soft-design-system/forms/_form-select.scss
================================================
.form-select {
transition: $input-transition;
}
================================================
FILE: assets/scss/soft-design-system/forms/_form-switch.scss
================================================
.form-switch{
.form-check-input{
border: 1px solid $gray-200;
position: relative;
background-color: rgba($dark-gradient-state, .1);
height: $form-check-input-width + .02;
&:after {
transition: transform $form-check-transition-time ease-in-out, background-color $form-check-transition-time ease-in-out;
content: "";
width: $form-switch-check-after-width;
height: $form-switch-check-after-width;
border-radius: 50%;
position: absolute;
background-color: $white;
transform: translateX($form-switch-translate-x-start);
box-shadow: $form-switch-round-box-shadow;
top: 1px;
}
&:checked:after {
transform: translateX($form-switch-translate-x-end);
}
&:checked {
border-color: rgba($dark-gradient-state, .95);
background-color: rgba($dark-gradient-state, .95);
}
}
}
================================================
FILE: assets/scss/soft-design-system/forms/_forms.scss
================================================
@import 'input-group';
@import 'form-check';
@import 'form-switch';
@import 'form-select';
@import 'labels';
@import 'inputs';
================================================
FILE: assets/scss/soft-design-system/forms/_input-group.scss
================================================
.input-group {
@include border-radius($input-border-radius, 0);
&,
.input-group-text {
transition: $input-transition;
}
& > :not(:first-child):not(.dropdown-menu) {
margin-left: 0;
}
.form-control {
&:focus {
border-left: $input-border-width solid $input-focus-border-color !important;
border-right: $input-border-width solid $input-focus-border-color !important;
}
&:not(:first-child) {
border-left: 0;
padding-left: 0;
}
&:not(:last-child) {
border-right: 0;
padding-right: 0;
}
& + .input-group-text {
position: absolute;
border-left: 0;
border-right: $input-border-width solid $input-border-color;
}
}
.input-group-text {
border-right: 0;
+.form-control {
border-left: none !important;
}
}
}
.form-group {
margin-bottom: 1rem;
}
.input-group-text {
border-right: 0;
padding-left: 10px;
padding-right: 10px;
}
.form-control {
border-radius: $input-border-radius;
border-top-right-radius: $input-border-radius !important;
border-bottom-right-radius: $input-border-radius !important;
border-left-width: 1px;
}
.focused {
box-shadow: $input-focus-box-shadow;
transition: $input-transition;
.form-control {
&:focus {
box-shadow: none;
}
+ .input-group-text {
border-color: $input-focus-border-color;
border-right: $input-border-width solid $input-focus-border-color !important;
}
}
.input-group-text {
border-color: $input-focus-border-color;
}
}
================================================
FILE: assets/scss/soft-design-system/forms/_inputs.scss
================================================
.form-control{
&.is-invalid{
&:focus{
box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, .6);
}
}
&.is-valid{
&:focus{
box-shadow: 0 0 0 2px rgba($form-feedback-valid-color, .65);
}
}
}
================================================
FILE: assets/scss/soft-design-system/forms/_labels.scss
================================================
//
// Labels
//
label,
.form-label {
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
margin-bottom: $form-label-margin-bottom;
color: $form-label-color;
margin-left: $form-label-margin-left;
}
================================================
FILE: assets/scss/soft-design-system/mixins/_badge.scss
================================================
@mixin badge-variant($bg) {
color: saturate(darken($bg, 10%), 10);
background-color: lighten($bg, 32%);
&[href] {
@include hover-focus {
color: color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 12%);
}
}
}
================================================
FILE: assets/scss/soft-design-system/mixins/_colored-shadows.scss
================================================
@mixin shadow-big-color($color){
// new box shadow optimized for Tablets and Phones
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
0 7px 10px -5px rgba($color, 0.4)
}
================================================
FILE: assets/scss/soft-design-system/mixins/_container.scss
================================================
@mixin make-container($gutter: $container-padding-x) {
padding-right: calc(var(--#{$prefix}gutter-x) * 1); // overwrite the Bootstrap padding right
padding-left: calc(var(--#{$prefix}gutter-x) * 1); // overwrite the Bootstrap padding left
}
================================================
FILE: assets/scss/soft-design-system/mixins/_hover.scss
================================================
@mixin hover() {
&:hover { @content; }
}
@mixin hover-focus() {
&:hover,
&:focus {
@content;
}
}
@mixin plain-hover-focus() {
&,
&:hover,
&:focus {
@content;
}
}
@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
@content;
}
}
================================================
FILE: assets/scss/soft-design-system/mixins/_social-buttons.scss
================================================
// for social buttons
@mixin social-buttons-color ($color, $state-color) {
background-color: $color;
color: $white;
&:focus,
&:hover {
background-color: $state-color;
color: $white;
}
&:active,
&:focus,
&:active:focus {
box-shadow: none;
}
&.btn-simple {
color: $state-color;
background-color: transparent;
background-image: none !important;
box-shadow: none;
border: none;
&:hover,
&:focus,
&:hover:focus,
&:active,
&:hover:focus:active {
color: $state-color;
background: transparent !important;
box-shadow: none !important;
}
}
&.btn-neutral {
color: $color;
background-color: $white;
&:hover,
&:focus,
&:active {
color: $state-color;
}
}
}
================================================
FILE: assets/scss/soft-design-system/mixins/mixins.scss
================================================
@import "badge";
@import "container";
@import "hover";
@import "colored-shadows";
@import "social-buttons";
================================================
FILE: assets/scss/soft-design-system/plugins/free/_flatpickr.scss
================================================
.flatpickr-calendar {
background: transparent;
opacity: 0;
display: none;
text-align: center;
visibility: hidden;
padding: 0;
-webkit-animation: none;
animation: none;
direction: ltr;
border: 0;
font-size: 14px;
line-height: 24px;
border-radius: 5px;
position: absolute;
width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: #fff;
-webkit-box-shadow: $box-shadow-lg;
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
opacity: 1;
max-height: 640px;
visibility: visible;
}
.flatpickr-calendar.open {
display: inline-block;
z-index: 99999;
}
.flatpickr-calendar.animate.open {
-webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px;
}
.flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
z-index: 999;
display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
height: 40px;
border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
position: absolute;
display: block;
pointer-events: none;
border: solid transparent;
content: '';
height: 0;
width: 0;
left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
left: auto;
right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
left: 50%;
right: 50%;
}
.flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px;
}
.flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
border-bottom-color: #fff;
}
.flatpickr-calendar.arrowTop:after {
border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
border-top-color: #fff;
}
.flatpickr-calendar:focus {
outline: 0;
}
.flatpickr-wrapper {
position: relative;
display: inline-block;
}
.flatpickr-months {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-months .flatpickr-month {
background: transparent;
color: rgba(0,0,0,0.9);
fill: rgba(0,0,0,0.9);
height: 34px;
line-height: 1;
text-align: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
padding: 10px;
z-index: 3;
color: rgba(0,0,0,0.9);
fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
/*rtl:begin:ignore*/
/*
*/
left: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
/*rtl:begin:ignore*/
/*
*/
right: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width: 14px;
height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
-webkit-transition: fill 0.1s;
transition: fill 0.1s;
fill: inherit;
}
.numInputWrapper {
position: relative;
height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
display: inline-block;
}
.numInputWrapper input {
width: 100%;
}
.numInputWrapper input::-ms-clear {
display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.numInputWrapper span {
position: absolute;
right: 0;
width: 14px;
padding: 0 4px 0 2px;
height: 50%;
line-height: 50%;
opacity: 0;
cursor: pointer;
border: 1px solid rgba(57,57,57,0.15);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.numInputWrapper span:hover {
background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
display: block;
content: "";
position: absolute;
}
.numInputWrapper span.arrowUp {
top: 0;
border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(57,57,57,0.6);
top: 26%;
}
.numInputWrapper span.arrowDown {
top: 50%;
}
.numInputWrapper span.arrowDown:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(57,57,57,0.6);
top: 40%;
}
.numInputWrapper span svg {
width: inherit;
height: auto;
}
.numInputWrapper span svg path {
fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
opacity: 1;
}
.flatpickr-current-month {
font-size: 135%;
line-height: inherit;
font-weight: 300;
color: inherit;
position: absolute;
width: 75%;
left: 12.5%;
padding: 7.48px 0 0 0;
line-height: 1;
height: 34px;
display: inline-block;
text-align: center;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
font-family: inherit;
font-weight: 700;
color: inherit;
display: inline-block;
margin-left: 0.5ch;
padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
width: 6ch;
width: 7ch\0;
display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
cursor: text;
padding: 0 0 0 0.5ch;
margin: 0;
display: inline-block;
font-size: inherit;
font-family: inherit;
font-weight: 300;
line-height: inherit;
height: auto;
border: 0;
border-radius: 0;
vertical-align: initial;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(0,0,0,0.5);
background: transparent;
pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: menulist;
background: transparent;
border: none;
border-radius: 0;
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
font-weight: 300;
height: auto;
line-height: inherit;
margin: -1px 0 0 0;
outline: none;
padding: 0 0 0 0.5ch;
position: relative;
vertical-align: initial;
-webkit-box-sizing: border-box;
-webkit-appearance: menulist;
-moz-appearance: menulist;
width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
background-color: transparent;
outline: none;
padding: 0;
}
.flatpickr-weekdays {
background: transparent;
text-align: center;
overflow: hidden;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
span.flatpickr-weekday {
cursor: default;
font-size: 90%;
background: transparent;
color: rgba(0,0,0,0.54);
line-height: 1;
margin: 0;
text-align: center;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
padding: 1px 0 0 0;
}
.flatpickr-days {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 307.875px;
}
.flatpickr-days:focus {
outline: 0;
}
.dayContainer {
padding: 0;
outline: 0;
text-align: left;
width: 307.875px;
min-width: 307.875px;
max-width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
.dayContainer + .dayContainer {
-webkit-box-shadow: -1px 0 0 #e6e6e6;
box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #393939;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
-webkit-flex-basis: 14.2857143%;
-ms-flex-preferred-size: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 39px;
height: 39px;
line-height: 39px;
margin: 0;
display: inline-block;
position: relative;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
cursor: pointer;
outline: 0;
background: #e6e6e6;
border-color: #e6e6e6;
}
.flatpickr-day.today {
border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
border-color: #959ea9;
background: #959ea9;
color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: #569ff7;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-webkit-box-shadow: -10px 0 0 #569ff7;
box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
border-radius: 50px;
}
.flatpickr-day.inRange {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
color: rgba(57,57,57,0.3);
background: transparent;
border-color: transparent;
cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
cursor: not-allowed;
color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
visibility: hidden;
}
.rangeMode .flatpickr-day {
margin-top: 1px;
}
.flatpickr-weekwrapper {
float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
padding: 0 12px;
-webkit-box-shadow: 1px 0 0 #e6e6e6;
box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
float: none;
width: 100%;
line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
display: block;
width: 100%;
max-width: none;
color: rgba(57,57,57,0.3);
background: transparent;
cursor: default;
border: none;
}
.flatpickr-innerContainer {
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.flatpickr-rContainer {
display: inline-block;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flatpickr-time {
text-align: center;
outline: 0;
display: block;
height: 0;
line-height: 40px;
max-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-time:after {
content: "";
display: table;
clear: both;
}
.flatpickr-time .numInputWrapper {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40%;
height: 40px;
float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
width: 49%;
}
.flatpickr-time input {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
border-radius: 0;
text-align: center;
margin: 0;
padding: 0;
height: inherit;
line-height: inherit;
color: #393939;
font-size: 14px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
font-weight: 400;
}
.flatpickr-time input:focus {
outline: 0;
border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
height: inherit;
float: left;
line-height: inherit;
color: #393939;
font-weight: bold;
width: 2%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
outline: 0;
width: 18%;
cursor: pointer;
text-align: center;
font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
background: #eee;
}
.flatpickr-input[readonly] {
cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
//////////// Creative Tim Changes
.datepicker.flatpickr-input{
background-color: $white;
}
.flatpickr-calendar {
&.open {
margin-left: -38px;
margin-top: 4px;
}
&.arrowBottom {
margin-top: -20px;
}
.flatpickr-innerContainer {
margin-top: 15px !important;
}
.numInputWrapper {
span {
border: none;
border-bottom: 1px solid rgba(57, 57, 57, 0.15);
}
&:hover {
.arrowUp,
.arrowDown {
margin-top: 3px;
}
}
}
.flatpickr-day {
&.today,
&.selected,
&.startRange,
&.endRange {
background: $primary !important;
color: $white;
border: none;
}
&.inRange {
background: rgba(94, 114, 228, 0.28);
border: none;
-webkit-box-shadow: -5px 0 0 #D7DCF8, 5px 0 0 #D7DCF8;
box-shadow: -5px 0 0 #D7DCF8, 5px 0 0 #D7DCF8;
}
&:not(.selected) {
&:hover,
&:focus {
background: rgba(94, 114, 228, 0.28);
border: none;
}
}
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
background: rgba(94, 114, 228, 0.28);
}
}
.flatpickr {
&.form-control {
background: $white;
}
}
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)){
box-shadow: -10px 0 0 $primary;
}
////////////
================================================
FILE: assets/scss/soft-design-system/plugins/free/_nouislider.scss
================================================
/*! nouislider - 14.6.3 - 11/19/2020 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
}
.noUi-base,
.noUi-connects {
width: 100%;
height: 6px;
position: relative;
z-index: 1;
top: -1px;
}
/* Wrapper for all connect elements.
*/
.noUi-connects {
z-index: 0;
overflow: hidden;
}
.noUi-connect,
.noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat;
}
.noUi-connect {
height: 100%;
width: 100%;
border-radius: 0.25rem;
}
.noUi-origin {
height: 10%;
width: 10%;
}
/* Offset direction
*/
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
left: 0;
right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.noUi-vertical .noUi-origin {
width: 0;
}
.noUi-horizontal .noUi-origin {
height: 0;
}
.noUi-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}
.noUi-touch-area {
height: 100%;
width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s;
transition: transform 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 3px;
}
.noUi-horizontal .noUi-handle {
border-radius: 50%;
background-color: $white;
box-shadow: 0 1px 13px 0 rgba(0,0,0,.2);
height: 15px;
width: 15px;
cursor: pointer;
margin-top: -6px;
outline: none;
right: -10px;
}
.noUi-vertical {
width: 3px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
right: -6px;
top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
left: -17px;
right: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.noUi-target {
background: $light;
border-radius: .25rem;
}
.noUi-connects {
border-radius: 3px;
}
.noUi-connect {
background-image: linear-gradient(310deg, #7928CA 0%, #FF0080 100%);
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: $white;
cursor: default;
box-shadow: inset 0 0 1px $white, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
webkit-transition: .3s ease 0s;
-moz-transition: .3s ease 0s;
-ms-transition: .3s ease 0s;
-o-transform: .3s ease 0s;
transition: .3s ease 0s;
}
.noUi-active {
box-shadow: inset 0 0 1px $white, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
transform: scale3d(1.5,1.5,1);
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: $white;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
left: auto;
bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
top: auto;
right: 28px;
}
================================================
FILE: assets/scss/soft-design-system/plugins/free/_perfect-scrollbar.scss
================================================
/*
* Container style
*/
.ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
}
/*
* Scrollbar rail styles
*/
.ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px;
/* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px;
/* there must be 'right' or 'left' for ps__rail-y */
right: 0;
/* please don't change 'position' */
position: absolute;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
display: block;
background-color: transparent;
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
opacity: 0.6;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: #eee;
opacity: 0.9;
}
/*
* Scrollbar thumb styles
*/
.ps__thumb-x {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
/* there must be 'bottom' for ps__thumb-x */
bottom: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__thumb-y {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
/* there must be 'right' for ps__thumb-y */
right: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
background-color: #999;
height: 11px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999;
width: 11px;
}
/* MS supports */
@supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
}
================================================
FILE: assets/scss/soft-design-system/plugins/free/_prism.scss
================================================
/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
overflow: auto;
border-radius: .75rem;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: $gray-100;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
================================================
FILE: assets/scss/soft-design-system/plugins/free/plugins.scss
================================================
@import "flatpickr";
@import "nouislider";
@import "prism";
@import "perfect-scrollbar";
================================================
FILE: assets/scss/soft-design-system/theme.scss
================================================
/*!
=========================================================
* Soft UI Design System 3 - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-design-system
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (site.license)
* Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// {{ site.product.name }} components
// Variables
@import "variables/navbar-vertical";
@import "variables/social-buttons";
@import "variables/breadcrumb";
// Mixin
@import "mixins/mixins";
// Core Components - extra styling
@import "alert";
@import "avatars";
@import "badge";
@import "buttons";
@import "breadcrumbs";
@import "cards";
@import "dropdown";
@import "dropup";
@import "header";
@import "fixed-plugin";
@import "forms/forms";
@import "footer";
@import "gradients";
@import "info-areas";
@import "misc";
@import "navbar";
@import "navbar-vertical";
@import "nav";
@import "pagination";
@import "popovers";
@import "progress";
@import "rtl";
@import "social-buttons";
@import "tables";
@import "timeline";
@import "tilt";
@import "tooltips";
@import "typography";
// Plugins
@import "plugins/free/plugins";
================================================
FILE: assets/scss/soft-design-system/variables/_animations.scss
================================================
// Waves Animation & Styling
$waves-position: relative !default;
$waves-width: 100% !default;
$waves-height: 16vh !default;
$waves-min-height: 100px !default;
$waves-max-height: 150px !default;
$waves-margin-bottom: -7px !default;
$waves-height-sm: 50px !default;
$waves-min-height-sm: $waves-height-sm !default;
$waves-rotate: rotate(180deg) !default;
$waves-mobile-height: 40px !default;
$moving-waves-keyframe-0: translate3d(-90px,0,0) !default;
$moving-waves-keyframe-100: translate3d(85px,0,0) !default;
$moving-waves-animation: move-forever 40s cubic-bezier(.55,.5,.45,.5) infinite !default;
$moving-waves-child-1-delay: -2s !default;
$moving-waves-child-1-duration: 11s !default;
$moving-waves-child-2-delay: -4s !default;
$moving-waves-child-2-duration: 13s !default;
$moving-waves-child-3-delay: -3s !default;
$moving-waves-child-3-duration: 15s !default;
$moving-waves-child-4-delay: -4s !default;
$moving-waves-child-4-duration: 20s !default;
$moving-waves-child-5-delay: -4s !default;
$moving-waves-child-5-duration: 25s !default;
$moving-waves-child-6-delay: -3s !default;
$moving-waves-child-6-duration: 30s !default;
// Fade In
$fade-in-animation-name: fadeInBottom !default;
$fade-in-animation-top-name: fadeInTop !default;
$fade-in-bottom-transform: translateY(100%) !default;
$fade-in-top-transform: translateY(-100%) !default;
$fade-in-1-animation-duration: 1.5s !default;
$fade-in-2-animation-duration: 1.75s !default;
$fade-in-3-animation-duration: 2s !default;
$fade-in-4-animation-duration: 2.25s !default;
$fade-in-5-animation-duration: 2.5s !default;
$floating-man-width: 350px !default;
================================================
FILE: assets/scss/soft-design-system/variables/_avatars.scss
================================================
// Avatar
$avatar-height: 48px !default;
$avatar-width: 48px !default;
$avatar-xs-height: 24px !default;
$avatar-xs-width: 24px !default;
$avatar-sm-height: 36px !default;
$avatar-sm-width: 36px !default;
$avatar-lg-height: 58px !default;
$avatar-lg-width: 58px !default;
$avatar-xl-height: 74px !default;
$avatar-xl-width: 74px !default;
$avatar-xxl-height: 110px !default;
$avatar-xxl-width: 110px !default;
$avatar-font-size: 1rem !default;
$avatar-content-margin: .75rem !default;
// Avatar Group
$avatar-group-border: 2px !default;
$avatar-group-zindex: 2 !default;
$avatar-group-zindex-hover: 3 !default;
$avatar-group-double: -1rem !default;
================================================
FILE: assets/scss/soft-design-system/variables/_badge.scss
================================================
// Badge
$badge-sm-padding: .45em .775em !default;
$badge-sm-font-size: .65em !default;
$badge-md-padding: .65em 1em !default;
$badge-lg-padding: .85em 1.375em !default;
$badge-inline-margin-right: .625rem !default;
$badge-inline-span-top: 2px !default;
$badge-btn-margin: .5rem !default;
// Badge Circle
$badge-circle-border-radius: 50% !default;
$badge-circle-width: 1.25rem !default;
$badge-circle-height: 1.25rem !default;
$badge-circle-font-size: .75rem !default;
$badge-circle-font-weight: 600 !default;
$badge-circle-md-width: 1.5rem !default;
$badge-circle-md-height: 1.5rem !default;
$badge-circle-lg-width: 2rem !default;
$badge-circle-lg-height: 2rem !default;
//Badge Dot
$badge-dot-icon-width: .375rem !default;
$badge-dot-icon-height: .375rem !default;
$badge-dot-icon-radius: 50% !default;
$badge-dot-icon-margin-right: .375rem !default;
$badge-dot-md-icon-width: .5rem !default;
$badge-dot-md-icon-height: .5rem !default;
$badge-dot-lg-icon-width: .625rem !default;
$badge-dot-lg-icon-height: .625rem !default;
//Badge Floating
$badge-floating-top: -50% !default;
$badge-floating-border: 3px !default;
$badge-floating-transform: translate(147%, 50%) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_breadcrumb.scss
================================================
$breadcrumb-dark-bg: $dark !default;
$breadcrumb-dark-color: $gray-100 !default;
$breadcrumb-dark-hover-color: $white !default;
$breadcrumb-dark-active-color: $gray-300 !default;
$breadcrumb-dark-divider-color: $gray-500 !default;
================================================
FILE: assets/scss/soft-design-system/variables/_cards-extend.scss
================================================
// Card Profile
$card-profile-body-text-align: center !default;
$card-profile-body-padding: 1.25rem 2rem !default;
$card-profile-avatar-margin: 0 auto !default;
$card-profile-img-mt: 32px !default;
$card-profile-img-radius: 50% !default;
$card-profile-img-width: 130px !default;
$card-profile-btn-mt: 24px !default;
$card-profile-p-line-height: 1.778 !default;
// Card Pricing
$card-pricing-body-padding: 2.25rem !default;
$card-pricing-line-height: 1.111 !default;
$card-pricing-title-mb: $card-bg-description-margin !default;
$card-pricing-td-line-height: 1.429 !default;
$card-pricing-icon-height: 4rem !default;
$card-pricing-icon-width: $card-pricing-icon-height !default;
$card-pricing-icon-position: absolute !default;
$card-pricing-icon-top: -22px !default;
$card-pricing-icon-font-size: 1.25rem !default;
$card-pricing-icon-lg-font-size: 1.75rem !default;
$card-pricing-i-padding: 18px !default;
$card-pricing-badge-padding: 5px !default;
$card-pricing-badge-font-size: 6px !default;
$card-pricing-badge-position: relative !default;
$card-pricing-badge-top: -2px !default;
$card-pricing-border-color: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
$card-pricing-border-color-dark: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
================================================
FILE: assets/scss/soft-design-system/variables/_cards.scss
================================================
$card-box-shadow: 0 20px 27px 0 rgba(0,0,0,0.05) !default;
$card-background-blur: rgba(255, 255, 255, 0.8) !default;
$card-header-padding: 1.5rem !default;
$card-body-padding: $card-header-padding !default;
$card-plain-bg-color: transparent !default;
$card-plain-box-shadow: none !default;
$card-footer-padding: $card-body-padding !default;
$card-title-font-weight: $font-weight-bold !default;
$card-title-line-height: 1.2 !default;
$card-author-display: flex !default;
$card-author-name-line-height: 1.571 !default;
$card-author-name-color: #3A416F !default;
$card-author-stats-color: #5D6494 !default;
$card-avatar-width: 30px !default;
$card-avatar-height: $card-avatar-width !default;
$card-avatar-overflow: hidden !default;
$card-avatar-radius: 50% !default;
$card-avatar-mr: 5px !default;
$card-stats-name-mt: -4px !default;
$card-name-ml: .25rem !default;
$card-badge-text-transform: uppercase !default;
$card-badge-bg-color: #FAFAFF !default;
// Card Background
$card-bg-align-items: center !default;
$card-bg-body-position: relative !default;
$card-bg-body-z-index: 2 !default;
$card-bg-content-min-height: 330px !default;
$card-bg-content-max-width: 450px !default;
$card-bg-content-pt: 60px !default;
$card-bg-content-pb: $card-bg-content-pt !default;
$card-bg-body-left-width: 90% !default;
$card-bg-description-margin: 24px !default;
$card-bg-filter-position: absolute !default;
$card-bg-filter-top: 0 !default;
$card-bg-filter-bottom: $card-bg-filter-top !default;
$card-bg-filter-left: $card-bg-filter-top !default;
$card-bg-filter-height: 100% !default;
$card-bg-filter-width: $card-bg-filter-height !default;
$card-bg-filter-z-index: 1 !default;
$card-bg-filter-display: block !default;
$card-bg-filter-content: "" !default;
$card-bg-filter-bg: rgba(0,0,0,.4) !default;
$card-bg-filter-mask-bg: rgba(0,0,0,.2) !default;
$card-bg-filter-radius: 1rem !default;
$card-full-bg-bg-position: 50% !default;
$card-full-bg-bg-size: cover !default;
$card-full-bg-mb: 30px !default;
$card-full-bg-width: 100% !default;
$card-full-bg-height: $card-full-bg-width !default;
$card-full-bg-position: absolute !default;
$card-full-bg-radius: $card-bg-filter-radius !default;
================================================
FILE: assets/scss/soft-design-system/variables/_choices.scss
================================================
$choices-box-shadow: $dropdown-box-shadow !default;
$choices-border-radius: .5rem !default;
$choices-animation: .3s cubic-bezier(.23,1,.32,1) !default;
$choices-transition: $dropdown-transition !default;
$choices-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 37px, 0px) !important !default;
$choices-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px) !important !default;
$choices-padding-y: 1rem !default;
$choices-padding-x: .5rem !default;
================================================
FILE: assets/scss/soft-design-system/variables/_dark-version.scss
================================================
$dark-version-body-color: rgba(255, 255, 255, .8) !default;
$dark-version-bg-color: $gray-900 !default;
$dark-version-sidenav-bg-color: $gray-800 !default;
$dark-version-card-bg-color: $gray-800 !default;
$dark-version-card-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .20), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
$dark-version-input-bg-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, .6) 1px, rgba(209, 209, 209, 0) 0) !default;
$dark-version-border-color: rgba(255, 255, 255, .4) !default;
$dark-version-table-color: rgba(255, 255, 255, .6) !default;
$dark-version-caret-sidebar-color: rgba(206, 212, 218, .7) !default;
$dark-nav-link-active-shadow: 0 0 2rem 0 rgba(0, 0, 0, .15) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_dropdowns.scss
================================================
$dropdown-subitem-position: 101% !default;
$dropdown-transition: visibility .25s,opacity .25s,transform .25s !default;
$dropdown-transform-origin: 50% 0 !default;
$dropdown-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 37px, 0px) !important !default;
$dropdown-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 37px,5px) !important !default;
$dropdown-multilevel-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 0px, 0px) !important !default;
$dropdown-multilevel-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 0px,5px) !important !default;
$dropup-transform-origin: bottom !default;
$dropup-transform: perspective(999px) rotateX(12deg) translateZ(0) translate3d(0px, 0px, 0px) !important !default;
$dropup-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(1px,0px,5px) !important !default;
$dropdown-transform-responsive-show: $dropdown-multilevel-transform-show !default;
$dropdown-icon-margin-right: .75rem !default;
$dropdown-toggle-arrow-transform: rotate(180deg) !default;
$dropdown-toggle-arrow-transition: .3s ease !default;
$dropdown-button-after-margin-top: 3px !default;
$dropdown-animation-arrow-left-position: 28px !default;
$dropup-animation-arrow-bottom-position: 22px !default;
$dropdown-animation-arrow-font-size: 22px !default;
$dropup-animation-arrow-transition: bottom .35s ease !default;
$dropdown-animation-arrow-transition: top .35s ease !default;
$dropup-mb: .5rem !default;
$dropdown-mt: 8px !default;
$dropdown-hover-after-bottom-pos: -24px !default;
$dropdown-hover-after-bottom-pos: -24px !default;
$dropdown-hover-arrow-active-top: -20px !default;
$dropdown-subitem-position-right: -197px !default;
$dropdown-subitem-left-hover: -8px !default;
$dropdown-subitem-arrow-rotate: rotate(-90deg) !default;
$dropdown-md-min-width: 15rem !default;
$dropdown-lg-min-width: 23rem !default;
$dropdown-lg-width-responsive: 19rem !default;
$dropdown-xl-min-width: 40rem !default;
$dropdown-subitem-position: 101% !default;
// Extend
$dropdown-subitem-position-right: -197px !default;
$dropdown-subitem-left-hover: -8px !default;
$dropdown-subitem-arrow-rotate: rotate(-90deg) !default;
$dropdown-md-min-width: 15rem !default;
$dropdown-lg-min-width: 23rem !default;
$dropdown-lg-width-responsive: 19rem !default;
$dropdown-xl-min-width: 40rem !default;
================================================
FILE: assets/scss/soft-design-system/variables/_fixed-plugin.scss
================================================
$fixed-plugin-bottom: 30px !default;
$fixed-plugin-right: $fixed-plugin-bottom !default;
$fixed-plugin-radius: 50% !default;
$fixed-plugin-box-shadow: $navbar-box-shadow !default;
$fixed-plugin-button-z-index: 990 !default;
$fixed-plugin-card-z-index: 1020 !default;
$fixed-plugin-card-width: 360px !default;
================================================
FILE: assets/scss/soft-design-system/variables/_form-switch.scss
================================================
$slider-dim: 15px !default;
$slider-position: 2px !default;
$moving-circle: translateX(21px) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_full-calendar.scss
================================================
$fc-event-title-padding-y: .2rem !default;
$fc-event-title-padding-x: .3rem !default;
$fc-daygrid-event-border-radius: .35rem !default;
$fc-theme-standard-dark-border-color: rgba($secondary, .3) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_header.scss
================================================
$page-header-padding: 0 !default;
$page-header-position: relative !default;
$page-header-overflow: hidden !default;
$page-header-display: flex !default;
$page-header-align-items: center !default;
$page-header-bg-size: cover !default;
$page-header-bg-position: 50% !default;
$mask-position: absolute !default;
$mask-bg-size: cover !default;
$mask-bg-position: center center !default;
$mask-top: 0 !default;
$mask-left: $mask-top !default;
$mask-width: 100% !default;
$mask-height: $mask-width !default;
$mask-opacity: .8 !default;
$page-header-conteiner-index: 1 !default;
$header-oblique-img-width: 60% !default;
$header-oblique-img-right: -10rem !default;
$header-oblique-transform: skewX(-10deg) !default;
$header-oblique-overflow: hidden !default;
$header-oblique-img-transform: skewX(10deg) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_info-areas.scss
================================================
$icon-shape-bg-image: linear-gradient(310deg,#7928CA,#FF0080) !default;
$icon-shape-bg-position: center !default;
$icon-striped-bg-md: 85px !default;
$icon-striped-bg-lg: 111px !default;
$icon-striped-bg-xl: 80px !default;
$icon-striped-icon-mt: 25% !default;
$icon-striped-icon-ml: -24% !default;
$icon-shape-icon-opacity: .8 !default;
$info-icon-top: 11px !default;
$info-icon-top-xxs: -4px !default;
$info-icon-top-xs: -4px !default;
$info-icon-top-sm: 2px !default;
$info-icon-top-md: 22% !default;
$info-icon-top-lg: 31% !default;
$info-icon-top-xl: 37% !default;
$info-icon-position: relative !default;
$icon-xxs-width: 20px !default;
$icon-xxs-height: $icon-xxs-width !default;
$icon-xs-width: 24px !default;
$icon-xs-height: $icon-xs-width !default;
$icon-sm-width: 32px !default;
$icon-sm-height: $icon-sm-width !default;
$icon-md-width: 48px !default;
$icon-md-height: $icon-md-width !default;
$icon-lg-width: 64px !default;
$icon-lg-height: $icon-lg-width !default;
$icon-xl-width: 100px !default;
$icon-xl-height: $icon-xl-width !default;
================================================
FILE: assets/scss/soft-design-system/variables/_misc-extend.scss
================================================
// Text Border
$text-border-bg-color: rgba($secondary,.5) !default;
$text-border-bg-color-before: linear-gradient(90deg,transparent,rgba(117,117,117,.4),rgba(117,117,117,.4)) !default;
$text-border-bg-color-after: linear-gradient(90deg,rgba(117,117,117,.4),rgba(117,117,117,.4),transparent) !default;
$text-border-display: inline-block !default;
$text-border-width: 30% !default;
$text-border-height: 1px !default;
$text-border-position: relative !default;
$text-border-vertical-align: middle !default;
$text-border-before-right: .5em !default;
$text-border-before-ml: -50% !default;
$text-border-after-left: $text-border-before-right !default;
$text-border-after-mr: $text-border-before-ml !default;
// Header Shapes
$shape-1-width: 55% !default;
$shape-1-left: 15% !default;
$shape-2-width: 35% !default;
$shape-2-left: 20% !default;
$shape-3-width: 50% !default;
$shape-3-left: -28rem !default;
$shape-img-1-right: 7% !default;
$shape-img-1-width: 36% !default;
$shape-img-1-margin-top: 12% !default;
$shape-img-2-left: 24% !default;
$shape-img-2-width: 27% !default;
$shape-img-2-margin-top: 10% !default;
// Comming Soon page
$coming-rotate-transform: rotate(20deg) !default;
// Tilt Animation
$tilt-transform-style: preserve-3d !default;
$tilt-transform-up-transform: translateZ(50px) scale(0.7) !default;
$tilt-transform-up-transition: all 0.5s !default;
// Round Slider
$round-slider-m-width: 200px !default;
$round-slider-scale-m-width: 300px !default;
$round-slider-transition: all .5s ease-out 0s !default;
================================================
FILE: assets/scss/soft-design-system/variables/_misc.scss
================================================
// Horizontal Faded Line
$hr-bg: transparent !default;
$hr-transform: rotate(90deg) !default;
$hr-bg-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !default;
$hr-bg-dark-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default;
// Gradient Animation
$gradient-animation-background: linear-gradient(-45deg, $info-gradient, $danger, $warning, $primary-gradient, $dark) !default;
$gradient-animation-bg-size: 400% 400% !default;
// Device Wrapper
$device-wrapper-radius: 3.5rem !default;
$device-wrapper-box-shadow: 0 12px 15px rgba(140, 152, 164, 0.1) !default;
$device-wrapper-animation: gradient 10s ease infinite !default;
// Nav pills
$nav-pills-link-border-radius: 0.5rem !default;
$nav-pills-link-box-shadow: 0px 1px 5px 1px #ddd !default;
$nav-pills-link-active-padding: 7px 15px !default;
$nav-pills-link-active-margin: 1px !default;
$nav-pills-link-active-animation: .2s ease !default;
// Table Progress
$table-progress-width: 120px !default;
$table-progress-height: 3px !default;
$table-progress-margin: 0 !default;
// Tooltip Arrow
$tooltip-arrow-left: 1px !default;
$tooltip-arrow-right: $tooltip-arrow-left !default;
// Footer Link hover animation
$footer-link-animation: opacity .3 ease !default;
// Blur background
$blur-light-background: rgba(255, 255, 255, 0.4) !default;
$blur-dark-background: rgba(0, 0, 0, 0.3) !default;
// HR w/ opacity
$hr-bg-color: transparent !default;
$hr-width: 1px !default;
$hr-margin: .75rem 0 !default;
$hr-horizontal-bg-image-light: linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)) !default;
$hr-horizontal-bg-image-gray-light: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) !default;
$hr-horizontal-bg-image-dark: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default;
$hr-vertical-bg-image-light: linear-gradient(to bottom, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)) !default;
$hr-vertical-bg-image-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_navbar-vertical.scss
================================================
$navbar-light-bg: #FBFBFB !default;
$navbar-light-hover-bg: darken($gray-100, 5%) !default;
$navbar-light-active-bg: darken($gray-100, 5%) !default;
$navbar-light-border-color: rgba($black, .05) !default;
$navbar-light-color: rgba($black, .6) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-toggler-border-color: transparent !default;
// Vertical navbar
$sidenav-header-width: 4.875rem !default;
$sidenav-card-opacity: .65 !default;
$navbar-vertical-box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15) !default;
$navbar-vertical-border-color: rgba($black, .05) !default;
$navbar-vertical-width: 3.875rem !default;
$navbar-vertical-open-width: 15.625rem !default;
$navbar-vertical-padding-x: 1rem !default;
$navbar-vertical-nav-link-padding-x: 1rem !default;
$navbar-vertical-nav-link-padding-y: .5rem !default;
$navbar-vertical-sidenav-normal-ml: 4.01rem !default;
$navbar-vertical-m: 1rem !default;
$navbar-vertical-inner: calc(100vh - 360px) !default;
$navbar-icon-min-width: 1.8rem !default;
$navbar-icon-margin-left: 0.15rem !default;
$navbar-breadcrumb-padding-y: $nav-link-padding-y !default;
$navbar-breadcrumb-padding-x: 0 !default;
$navbar-light-border-color: $border-color !default;
$navbar-dark-bg: transparent !default;
$navbar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$navbar-dark-active-bg: rgba(255, 255, 255, .1) !default;
$navbar-dark-border-color: rgba(255, 255, 255, .1) !default;
$navbar-dark-color: rgba($white, .95) !default;
$navbar-dark-hover-color: rgba($white, .65) !default;
$navbar-dark-active-color: rgba($white, .65) !default;
$navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-border-color: transparent !default;
$navbar-padding-y: 0.5rem !default;
$navbar-padding-x: 0.5rem !default;
$navbar-nav-link-padding-x: 1rem !default;
$navbar-nav-link-padding-y: 1rem !default;
$navbar-nav-link-font-size: .875rem !default;
$navbar-nav-link-font-weight: 500 !default;
$navbar-nav-link-text-transform: normal !default;
$navbar-nav-link-letter-spacing: 0 !default;
$navbar-nav-link-border-radius: $border-radius-sm !default;
$font-size-xs: ($font-size-base * .75);
$transition-base-time: .25s;
$transition-cubic-bezier: all $transition-base-time cubic-bezier(.68, -0.55, .265, 1.55) !default;
// Navbar collapse
$navbar-vertical-collapse-dot-size: 5px !default;
$navbar-vertical-collapse-dot-size-active: 8px !default;
$navbar-vertical-collapse-margin-left: 1.35rem !default;
$navbar-vertical-collapse-left: -18px !default;
$navbar-vertical-collapse-top: 50% !default;
$navbar-vertical-collapse-translate: translate(0,-50%) !default;
$navbar-vertical-hidden-width: 6rem !default;
// RTL Page
$rtl-sidebar-bullet-right: -1.125rem !default;
$rtl-sidebar-hover-padding-right: 2.5rem !default;
================================================
FILE: assets/scss/soft-design-system/variables/_navbar.scss
================================================
// Navbar toggler icon on responsive styling
$navbar-toggler-bar-display: block !default;
$navbar-toggler-bar-position: relative !default;
$navbar-toggler-bar-width: 22px !default;
$navbar-toggler-bar-height: 1px !default;
$navbar-toggler-bar-radius: 1px !default;
$navbar-toggler-bar-transition: all 0.2s !default;
$navbar-toggler-bar-margin-top: 7px !default;
$navbar-toggler-bar-1-transform: rotate(45deg) !default;
$navbar-toggler-bar-1-transform-origin: 10% 10% !default;
$navbar-toggler-bar-1-margin-top: 4px !default;
$navbar-toggler-bar-2-opacity: 0 !default;
$navbar-toggler-bar-3-transform: rotate(-45deg) !default;
$navbar-toggler-bar-3-transform-origin: 10% 90% !default;
$navbar-toggler-bar-3-margin-top: 3px !default;
================================================
FILE: assets/scss/soft-design-system/variables/_pagination.scss
================================================
// Pagination
$pagination-active-box-shadow: $btn-hover-box-shadow !default;
$page-link-display: flex !default;
$page-link-align-items: center !default;
$page-link-justify-content: $page-link-align-items !default;
$page-link-margin: 0 3px !default;
$page-link-radius: 50% !default;
$page-link-width: 36px !default;
$page-link-height: $page-link-width !default;
$page-link-width-lg: 46px !default;
$page-link-height-lg: $page-link-width-lg !default;
$page-link-line-height-lg: $page-link-width-lg !default;
$page-link-width-sm: 30px !default;
$page-link-height-sm: $page-link-width-sm !default;
$page-link-line-height-sm: $page-link-width-sm !default;
================================================
FILE: assets/scss/soft-design-system/variables/_rtl.scss
================================================
$timeline-step-transform-rtl: translateX(50%) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_social-buttons.scss
================================================
// Social Buttons
$facebook: #3b5998 !default;
$facebook-states: darken($facebook, 5%) !default;
$twitter: #55acee !default;
$twitter-states: darken($twitter, 5%) !default;
$instagram: #125688 !default;
$instagram-states: darken($instagram, 6%) !default;
$linkedin: #0077B5 !default;
$linkedin-states: darken($linkedin, 5%) !default;
$pinterest: #cc2127 !default;
$pinterest-states: darken($pinterest, 6%) !default;
$youtube: #e52d27 !default;
$youtube-states: darken($youtube, 6%) !default;
$dribbble: #ea4c89 !default;
$dribbble-states: darken($dribbble, 6%) !default;
$github: #24292E !default;
$github-states: darken($github, 6%) !default;
$reddit: #ff4500 !default;
$reddit-states: darken($reddit, 6%) !default;
$tumblr: #35465c !default;
$tumblr-states: darken($tumblr, 6%) !default;
$behance: #1769ff !default;
$behance-states: darken($behance, 6%) !default;
$vimeo: #1AB7EA !default;
$vimeo-states: darken($vimeo, 6%) !default;
$slack: #3aaf85 !default;
$slack-states: darken($slack, 6%) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_table.scss
================================================
$table-head-spacer-y: .75rem !default;
$table-head-spacer-x: 1rem !default;
$table-head-font-size: .65rem !default;
$table-head-font-weight: $font-weight-bold !default;
$table-head-text-transform: uppercase !default;
$table-head-letter-spacing: 1px !default;
$table-head-bg: $gray-100 !default;
$table-head-color: $gray-600 !default;
$table-action-color: $gray-500 !default;
$table-body-font-size: .8125rem !default;
$table-dark-bg: theme-color("default") !default;
$table-dark-accent-bg: rgba($white, .05) !default;
$table-dark-hover-bg: rgba($white, .075) !default;
$table-dark-head-bg: lighten($dark, 4%) !default;
$table-dark-head-color: lighten($dark, 35%) !default;
$table-dark-action-color: lighten($dark, 35%) !default;
================================================
FILE: assets/scss/soft-design-system/variables/_timeline.scss
================================================
// Timeline
$timeline-axis-width: 2px !default;
$timeline-axis-color: $border-color !default;
$timeline-left: 1rem !default;
$timeline-step-bg: $white !default;
$timeline-step-width: 26px !default;
$timeline-step-height: $timeline-step-width !default;
$timeline-step-radius: 50% !default;
$timeline-step-transform: translateX(-50%) !default;
$timeline-step-line-height: 1.4 !default;
$timeline-step-border-width: 2px !default;
$timeline-step-border-color: $timeline-axis-color !default;
$timeline-content-margin-left: 45px !default;
$timeline-content-padding-top: .35rem !default;
$timeline-content-top: -6px !default;
================================================
FILE: assets/scss/soft-design-system/variables/_utilities-extend.scss
================================================
// Colores Shadow on cards
$colored-shadow-top: 3.5% !default;
$colored-shadow-blur: 12px !default;
$colored-shadow-scale: .94 !default;
$colored-shadow-scale-avatar: .87 !default;
// Card Projects
$card-project-transition: .4s cubic-bezier(.215,.61,.355,1) !default;
$card-project-avatar-transform: scale(.8) translateY(-45px) !default;
$card-project-hover-transform: translateY(-2px) !default;
// Transform Perspective effect
$transform-perspective: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg) !default;
$transform-perspective-inverse: scale(1) perspective(1040px) rotateY(11deg) rotateX(-2deg) rotate(-2deg) !default;
// Z index
$z-index2: 2 !default;
// Width in PX
$width-32-px: 32px !default;
$width-48-px: 48px !default;
$width-64-px: 64px !default;
================================================
FILE: assets/scss/soft-design-system/variables/_utilities.scss
================================================
// on hover transition variables
$move-transition: .2s ease-out !default;
$move-overflow: hidden !default;
$move-transform: perspective(999px) rotateX(0deg) translate3d(0,0,0) !default;
$move-transform-origin: 50% 0 !default;
$move-backface-visibility: hidden !default;
$move-will-change: transform,box-shadow !default;
$move-hover-transform: perspective(999px) rotateX(7deg) translate3d(0px,-4px,5px) !default;
// Sections Height Utilities
$section-height-25-min-height: 25vh !default;
$section-height-35-min-height: 35vh !default;
$section-height-45-min-height: 45vh !default;
$section-height-50-min-height: 50vh !default;
$section-height-55-min-height: 55vh !default;
$section-height-65-min-height: 65vh !default;
$section-height-70-min-height: 70vh !default;
$section-height-75-min-height: 75vh !default;
$section-height-80-min-height: 80vh !default;
$section-height-85-min-height: 85vh !default;
$section-height-90-min-height: 90vh !default;
$section-height-95-min-height: 95vh !default;
$section-height-100-min-height: 100vh !default;
// extra padding utilities variables - CT
$padding-6: 4rem !default;
$padding-7: 6rem !default;
$padding-8: 8rem !default;
$padding-9: 10rem !default;
$padding-10: 12rem !default;
$padding-11: 14rem !default;
$padding-12: 16rem !default;
// extra margins utilities variables - CT
$margin-6: 4rem !default;
$margin-7: 6rem !default;
$margin-8: 8rem !default;
$margin-9: 10rem !default;
$margin-10: 12rem !default;
$margin-11: 14rem !default;
$margin-12: 16rem !default;
// extra width values variables - CT
$width-0: 0% !default;
$width-1: 1% !default;
$width-2: 2% !default;
$width-3: 3% !default;
$width-4: 4% !default;
$width-5: 5% !default;
$width-6: 6% !default;
$width-7: 7% !default;
$width-8: 8% !default;
$width-9: 9% !default;
$width-10: 10% !default;
$width-15: 15% !default;
$width-20: 20% !default;
$width-25: 25% !default;
$width-30: 30% !default;
$width-35: 35% !default;
$width-40: 40% !default;
$width-45: 45% !default;
$width-50: 50% !default;
$width-55: 55% !default;
$width-60: 60% !default;
$width-65: 65% !default;
$width-70: 70% !default;
$width-75: 75% !default;
$width-80: 80% !default;
$width-85: 85% !default;
$width-90: 90% !default;
$width-95: 95% !default;
$width-100: 100% !default;
// extra max width values variables - CT
$max-width-100: 100px !default;
$max-width-200: 200px !default;
$max-width-300: 300px !default;
$max-width-400: 400px !default;
$max-width-500: 500px !default;
// extra height values variables - CT
$height-100: 100px !default;
$height-150: 150px !default;
$height-200: 200px !default;
$height-300: 300px !default;
$height-400: 400px !default;
$height-500: 500px !default;
$height-600: 600px !default;
// extra min height values variables - CT
$min-height-100: 100px !default;
$min-height-150: 150px !default;
$min-height-160: 160px !default;
$min-height-200: 200px !default;
$min-height-250: 250px !default;
$min-height-300: 300px !default;
$min-height-400: 400px !default;
$min-height-500: 500px !default;
$min-height-600: 600px !default;
// extra min height values variables - CT
$max-height-100: 100px !default;
$max-height-150: 150px !default;
$max-height-160: 160px !default;
$max-height-200: 200px !default;
$max-height-250: 250px !default;
$max-height-300: 300px !default;
$max-height-400: 400px !default;
$max-height-500: 500px !default;
$max-height-600: 600px !default;
// extra min height vh values variables - CT
$max-height-vh-10: 10vh !default;
$max-height-vh-20: 20vh !default;
$max-height-vh-30: 30vh !default;
$max-height-vh-40: 40vh !default;
$max-height-vh-50: 50vh !default;
$max-height-vh-60: 60vh !default;
$max-height-vh-70: 70vh !default;
$max-height-vh-80: 80vh !default;
$max-height-vh-90: 90vh !default;
$max-height-vh-100: 100vh !default;
// Extra Padding values Map
$paddings: (
"6": $padding-6,
"7": $padding-7,
"8": $padding-8,
"9": $padding-9,
"10": $padding-10,
"11": $padding-11,
"12": $padding-12
) !default;
// Extra Margins values Map
$margins: (
"6": $margin-6,
"7": $margin-7,
"8": $margin-8,
"9": $margin-9,
"10": $margin-10,
"11": $margin-11,
"12": $margin-12
) !default;
$width: (
"0": $width-0,
"1": $width-1,
"2": $width-2,
"3": $width-3,
"4": $width-4,
"5": $width-5,
"6": $width-6,
"7": $width-7,
"8": $width-8,
"9": $width-9,
"10": $width-10,
"15": $width-15,
"20": $width-20,
"25": $width-25,
"30": $width-30,
"35": $width-35,
"40": $width-40,
"45": $width-45,
"50": $width-50,
"55": $width-55,
"60": $width-60,
"65": $width-65,
"70": $width-70,
"75": $width-75,
"80": $width-80,
"85": $width-85,
"90": $width-90,
"95": $width-95,
"100": $width-100,
"auto": auto
) !default;
// blur effect variables
$blur-border-radius-rounded: 40px !default;
$blur-box-shadow: inset 0px 0px 2px #fefefed1 !default;
$blur-backdrop-filter: saturate(200%) blur(30px) !default;
$blur-backdrop-filter-less: saturate(20%) blur(30px) !default;
$shadow-blur-box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, .9), 0 20px 27px 0 rgba(0, 0, 0, .05) !default;
// sidebar variables
$sidebar-width: 80px !default;
$sidebar-transition: 1s ease !default;
================================================
FILE: assets/scss/soft-design-system/variables/_virtual-reality.scss
================================================
$animation-name: fadeInBottom !default;
$animation-mode: both !default;
$animation-duration: 1.5s !default;
$transform-scale: scale(0.6) !default;
$position-left: 18% !default;
================================================
FILE: assets/scss/soft-design-system.scss
================================================
// =========================================================
// * Soft UI Design System 3 - v1.1.0
// =========================================================
//
// * Product Page: https://www.creative-tim.com/product/soft-ui-design-system
// * Copyright 2024 Creative Tim (https://www.creative-tim.com)
//
// Coded by www.creative-tim.com
//
// =========================================================
//
// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
// Bootstrap Functions
@import "soft-design-system/bootstrap/functions";
// Custom Variables
@import "soft-design-system/custom/variables";
// Theme Variables
@import "soft-design-system/variables";
// Bootstrap Core
@import "soft-design-system/bootstrap/bootstrap";
// Theme Core
@import "soft-design-system/theme";
// Custom Variables
@import "soft-design-system/custom/styles";
================================================
FILE: docs/documentation.html
================================================
Components Documentation - Soft UI Design 3 System by Creative Tim
================================================
FILE: genezio.yaml
================================================
name: soft-ui-design-system
region: us-east-1
frontend:
# Specifies the path of your code.
path: .
# Specifies the folder where the build is located.
# This is the folder that will be deployed.
publish: .
# Scripts will run in the specified `path` folder.
scripts:
# The command to build your frontend project. This is custom to your project.
# It must to populate the specified `publish` folder with a `index.html` file.
deploy:
- npm install --legacy-peer-deps
yamlVersion: 2
================================================
FILE: gulpfile.mjs
================================================
import gulp from 'gulp';
import open from 'gulp-open';
// Task to open the browser
gulp.task('open-app', function(){
gulp.src('index.html')
.pipe(open());
});
================================================
FILE: index.html
================================================
Soft UI Design 3 System by Creative Tim
0 +Coded Elements
From buttons, to inputs, navbars, alerts or cards, you are covered
0 +
Design Blocks
Mix the sections, change the colors and unleash your creativity
0
Pages
Save 3-4 weeks of work when you use our pre-made pages for your website
Full Documentation
Built by developers for developers. Check the foundation and you will find everything inside our documentation.
Bootstrap 5 Ready
The world’s most popular front-end open source toolkit, featuring Sass variables and mixins.
Save Time & Money
Creating your design from scratch with dedicated designers can be very expensive. Start with our Design System.
Fully Responsive
Regardless of the screen size, the website content will naturally fit the given resolution.
Huge collection of sections
Infinite combinations
We have created multiple options for you to put together and customise into pixel perfect pages.
Elements
70+ carefully crafted small elements that come with multiple colors and shapes. These are only a few of them.
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-3 mt-3" >
<div class= "col-12 mx-auto" >
<button type= "button" class= "btn btn-primary w-auto me-1 mb-0" > Primary</button>
<button type= "button" class= "btn btn-secondary w-auto me-1 mb-0" > Secondary</button>
<button type= "button" class= "btn btn-info w-auto me-1 mb-0" > Info</button>
<button type= "button" class= "btn btn-success w-auto me-1 mb-0" > Success</button>
<button type= "button" class= "btn btn-warning w-auto me-1 mb-0" > Warning</button>
<button type= "button" class= "btn btn-danger w-auto me-1 mb-0" > Danger</button>
<button type= "button" class= "btn btn-light w-auto me-1 mb-0" > Light</button>
<button type= "button" class= "btn btn-dark w-auto me-1 mb-0" > Dark</button>
<button type= "button" class= "btn btn-white w-auto me-1 mb-0" > White</button>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-3 mt-3" >
<div class= "col-12 mx-auto" >
<button type= "button" class= "btn bg-gradient-primary w-auto me-1 mb-0" > Primary</button>
<button type= "button" class= "btn bg-gradient-secondary w-auto me-1 mb-0" > Secondary</button>
<button type= "button" class= "btn bg-gradient-info w-auto me-1 mb-0" > Info</button>
<button type= "button" class= "btn bg-gradient-success w-auto me-1 mb-0" > Success</button>
<button type= "button" class= "btn bg-gradient-warning w-auto me-1 mb-0" > Warning</button>
<button type= "button" class= "btn bg-gradient-danger w-auto me-1 mb-0" > Danger</button>
<button type= "button" class= "btn bg-gradient-light w-auto me-1 mb-0" > Light</button>
<button type= "button" class= "btn bg-gradient-dark w-auto me-1 mb-0" > Dark</button>
<button type= "button" class= "btn bg-gradient-white w-auto me-1 mb-0" > White</button>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-3 mt-3" >
<div class= "col-12 mx-auto" >
<button type= "button" class= "btn btn-outline-primary mb-0" > Primary</button>
<button type= "button" class= "btn btn-outline-secondary mb-0" > Secondary</button>
<button type= "button" class= "btn btn-outline-info mb-0" > Info</button>
<button type= "button" class= "btn btn-outline-success mb-0" > Success</button>
<button type= "button" class= "btn btn-outline-warning mb-0" > Warning</button>
<button type= "button" class= "btn btn-outline-danger mb-0" > Danger</button>
<button type= "button" class= "btn btn-outline-light mb-0" > Light</button>
<button type= "button" class= "btn btn-outline-dark mb-0" > Dark</button>
<button type= "button" class= "btn btn-outline-white mb-0" > White</button>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-2 mt-3" >
<div class= "col-12 mx-auto" >
<button type= "button" class= "btn btn-primary btn-sm me-2" > Small</button>
<button type= "button" class= "btn btn-primary w-auto me-2" > Default</button>
<button type= "button" class= "btn btn-primary btn-lg" > Large</button>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-2 mt-3" >
<div class= "col-12 mx-auto" >
<button class= "btn btn-primary btn-icon btn-sm" type= "button" >
<div class= "d-flex align-items-center" >
<i class= "ni ni-laptop me-2" aria-hidden= "true" ></i>
Small
</div>
</button>
<button class= "btn btn-primary btn-icon" type= "button" >
<div class= "d-flex align-items-center" >
<i class= "ni ni-laptop me-2" aria-hidden= "true" ></i>
Default
</div>
</button>
<button class= "btn btn-primary btn-icon btn-lg" type= "button" >
<div class= "d-flex align-items-center" >
<i class= "ni ni-laptop me-2" aria-hidden= "true" ></i>
Large
</div>
</button>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-2 mt-3" >
<div class= "col-3 mx-auto text-start" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "flexCheckDefault" >
<label class= "form-check-label" for= "flexCheckDefault" >
Default checkbox
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "flexCheckChecked" checked >
<label class= "form-check-label" for= "flexCheckChecked" >
Checked checkbox
</label>
</div>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-2 mt-3" >
<div class= "col-3 mx-auto text-start" >
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "flexRadioDefault" id= "flexRadioDefault1" >
<label class= "form-check-label" for= "flexRadioDefault1" >
Default radio
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "flexRadioDefault" id= "flexRadioDefault2" checked >
<label class= "form-check-label" for= "flexRadioDefault2" >
Default checked radio
</label>
</div>
</div>
</div>
</div>
<div class= "container py-3 mt-3" >
<div class= "row" >
<div class= "col-4 mx-auto" >
<div class= "form-check form-switch ps-0" >
<input class= "form-check-input ms-auto mt-1" type= "checkbox" id= "flexSwitchCheckDefault" >
<label class= "form-check-label ms-2" for= "flexSwitchCheckDefault" > Remember me</label>
</div>
</div>
</div>
</div>
<div class= "container overflow-hidden" >
<div class= "row text-center py-3 mt-3" >
<div class= "col-12" >
<span class= "badge bg-primary" > Primary</span>
<span class= "badge bg-gradient-secondary" > Secondary</span>
<span class= "badge bg-gradient-success" > Success</span>
<span class= "badge bg-gradient-danger" > Danger</span>
<span class= "badge bg-gradient-warning" > Warning</span>
<span class= "badge bg-gradient-info" > Info</span>
<span class= "badge bg-gradient-light text-dark" > Light</span>
<span class= "badge bg-gradient-dark" > Dark</span>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-3 mt-3" >
<div class= "col-12" >
<div class= "avatar-group" >
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "./assets/img/team-1.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Romina Hadid" >
<img alt= "Image placeholder" src= "./assets/img/team-2.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Alexander Smith" >
<img alt= "Image placeholder" src= "./assets/img/team-3.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Jessica Doe" >
<img alt= "Image placeholder" src= "./assets/img/team-4.jpg" >
</a>
</div>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row text-center py-3 mt-3" >
<div class= "col-12" >
<a href= "javascript:;" class= "avatar avatar-xs rounded-circle" >
<img alt= "Image placeholder" src= "./assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-sm rounded-circle" >
<img alt= "Image placeholder" src= "./assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar rounded-circle" >
<img alt= "Image placeholder" src= "./assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" >
<img alt= "Image placeholder" src= "./assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-xl rounded-circle" >
<img alt= "Image placeholder" src= "./assets/img/team-4.jpg" >
</a>
</div>
</div>
</div>
<div class= "container py-2 mt-2 overflow-hidden" >
<div class= "row" >
<div class= "col-8 mx-auto" >
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item active" aria-current= "page" > Home</li>
</ol>
</nav>
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item" ><a href= "javascript:;" > Home</a></li>
<li class= "breadcrumb-item active" aria-current= "page" > Portfolio</li>
</ol>
</nav>
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item" ><a href= "javascript:;" > Home</a></li>
<li class= "breadcrumb-item" ><a href= "javascript:;" > Portfolio</a></li>
<li class= "breadcrumb-item active" aria-current= "page" > Articles</li>
</ol>
</nav>
</div>
</div>
</div>
<div class= "container-fluid px-0 overflow-hidden" >
<div class= "row py-3 mt-4" >
<div class= "col-8 mx-auto" >
<div class= "progress mb-3" >
<div class= "progress-bar bg-primary" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-secondary" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-success" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-info" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-warning" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-danger" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-dark" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
</div>
</div>
</div>
Typography
6+ elements that you need for text manipulation and insertion
<div class= "container-fluid text-sans-serif" >
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 1</small>
</div>
<div class= "col-sm-9" >
<h1 class= "mb-0" > H1 Soft Design System</h1>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 2</small>
</div>
<div class= "col-sm-9" >
<h2 class= "mb-0" > H2 Soft Design System</h2>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 3</small>
</div>
<div class= "col-sm-9" >
<h3 class= "mb-0" > H3 Soft Design System</h3>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 4</small>
</div>
<div class= "col-sm-9" >
<h4 class= "mb-0" > H4 Soft Design System</h4>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 5</small>
</div>
<div class= "col-sm-9" >
<h5 class= "mb-0" > H5 Soft Design System</h5>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 6</small>
</div>
<div class= "col-sm-9" >
<h6 class= "mb-0" > H6 Soft Design System</h6>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Paragraph</small>
</div>
<div class= "col-sm-9" >
<p class= "mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Lead text</small>
</div>
<div class= "col-sm-9" >
<p class= "lead mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Small</small>
</div>
<div class= "col-sm-9" >
<p class= "text-sm mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "row py-3 align-items-center" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Tiny</small>
</div>
<div class= "col-sm-9" >
<p class= "text-xs mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
</div>
Attention Catchers
4+ Fully coded components that popup from different places of the screen
<div class= "container" >
<div class= "row py-3" >
<div class= "alert alert-primary text-white font-weight-bold" role= "alert" >
A simple primary alert—check it out!
</div>
<div class= "alert alert-secondary text-white font-weight-bold" role= "alert" >
A simple secondary alert—check it out!
</div>
<div class= "alert alert-success text-white font-weight-bold" role= "alert" >
A simple success alert—check it out!
</div>
<div class= "alert alert-danger text-white font-weight-bold" role= "alert" >
A simple danger alert—check it out!
</div>
<div class= "alert alert-warning text-white font-weight-bold" role= "alert" >
A simple warning alert—check it out!
</div>
<div class= "alert alert-info text-white font-weight-bold" role= "alert" >
A simple info alert—check it out!
</div>
<div class= "alert alert-light text-white font-weight-bold" role= "alert" >
A simple light alert—check it out!
</div>
<div class= "alert alert-dark text-white font-weight-bold" role= "alert" >
A simple dark alert—check it out!
</div>
</div>
</div>
<div class= "container" >
<div class= "row py-7 mt-2 text-center" >
<div>
<button type= "button" class= "btn bg-gradient-secondary mb-0" data-bs-container= "body" data-bs-toggle= "popover" data-bs-placement= "top" data-bs-content= "That’s the main thing people are controlled by! Thoughts- their perception of themselves!" >
Popover on top
</button>
<button type= "button" class= "btn bg-gradient-secondary mb-0" data-bs-container= "body" data-bs-toggle= "popover" data-bs-placement= "right" data-bs-content= "We’re not always in the position that we want to be at." >
Popover on right
</button>
<button type= "button" class= "btn bg-gradient-secondary mb-0" data-bs-container= "body" title= "Popover with title" data-bs-toggle= "popover" data-bs-placement= "bottom" data-bs-content= "A lot of people don’t appreciate the moment until it’s passed." >
Popover on bottom
</button>
<button type= "button" class= "btn bg-gradient-secondary mb-0" data-bs-container= "body" data-bs-toggle= "popover" data-bs-placement= "left" data-bs-content= "It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it." >
Popover on left
</button>
</div>
</div>
</div>
<!-- initialization script -->
<script>
var popoverTriggerList = []. slice . call ( document . querySelectorAll ( ' [data-bs-toggle="popover"] ' ))
var popoverList = popoverTriggerList . map ( function ( popoverTriggerEl ) {
return new bootstrap . Popover ( popoverTriggerEl )
})
</script>
<div class= "container py-7" >
<div class= "row mt-3" >
<div class= "col-sm-4 col-6 mx-auto" >
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-bs-toggle= "modal" data-bs-target= "#exampleModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModal" tabindex= "-1" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > Your modal title</h5>
<button type= "button" class= "btn-close" data-bs-dismiss= "modal" aria-label= "Close" ></button>
</div>
<div class= "modal-body" >
Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
<br><br>
It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
</div>
<div class= "modal-footer justify-content-between" >
<button type= "button" class= "btn bg-gradient-dark" data-bs-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Datepicker -->
<div class= "row py-3" >
<div class= "col-md-6 mx-auto" >
<div class= "row" >
<div class= "col-lg-6 mx-auto col-md-8 col-sm-5" >
<div class= "input-group" >
<span class= "input-group-text" ><i class= "fas fa-calendar" ></i></span>
<input class= "form-control datepicker" placeholder= "Please select date" type= "text" >
</div>
</div>
</div>
</div>
</div>
<!-- initialization script -->
<script>
if ( document . querySelector ( " .datepicker " )) {
flatpickr ( " .datepicker " , {});
}
</script>
Navigation
6+ components that will help go through the pages
<!-- Navbar Light -->
<nav class= "navbar navbar-expand-lg navbar-light bg-white py-3" >
<div class= "container" >
<a class= "navbar-brand" href= "https://demos.creative-tim.com/soft-ui-design-system/presentation.html" rel= "tooltip" title= "Designed and Coded by Creative Tim" data-placement= "bottom" target= "_blank" >
Soft UI Design 3 System
</a>
<button class= "navbar-toggler shadow-none ms-2" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navigation" aria-controls= "navigation" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon mt-2" >
<span class= "navbar-toggler-bar bar1" ></span>
<span class= "navbar-toggler-bar bar2" ></span>
<span class= "navbar-toggler-bar bar3" ></span>
</span>
</button>
<div class= "collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id= "navigation" >
<ul class= "navbar-nav navbar-nav-hover w-100" >
<li class= "nav-item dropdown dropdown-hover mx-2 ms-lg-5" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuPages1" data-bs-toggle= "dropdown" aria-expanded= "false" >
Pages
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<div class= "dropdown-menu dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuPages1" >
<div class= "d-none d-lg-block" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
<div class= "d-lg-none" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
</div>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuBlocks" data-bs-toggle= "dropdown" aria-expanded= "false" >
Blocks
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuBlocks" >
<div class= "d-none d-lg-block" >
<li class= "nav-item dropdown dropdown-hover dropdown-subitem" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "./presentation.html" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
<span class= "text-sm" > See all 109 sections</span>
</div>
<img src= "./assets/img/down-arrow.svg" alt= "down-arrow" class= "arrow" />
</div>
</div>
</a>
<div class= "dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby= "pageSections" >
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Logo Areas
</a>
</div>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12" >
<div class= "d-flex mb-2" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
</div>
</div>
</div>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Applications
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuDocs" data-bs-toggle= "dropdown" aria-expanded= "false" >
Docs
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby= "dropdownMenuDocs" >
<div class= "d-none d-lg-block" >
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "document" transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "box-3d-50" transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > For those who want flexibility, use our utility classes</span>
</div>
</div>
</a>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12 g-0" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0" >
<a href= "https://www.creative-tim.com/product/soft-ui-design-system-pro" class= "btn btn-sm btn-dark btn-round mb-0 me-1 mt-2 mt-md-0" > Upgrade to Pro</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- Navbar Dark -->
<nav class= "navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3" >
<div class= "container" >
<a class= "navbar-brand text-white" href= "https://demos.creative-tim.com/soft-ui-design-system/presentation.html" rel= "tooltip" title= "Designed and Coded by Creative Tim" data-placement= "bottom" target= "_blank" >
Soft UI Design 3 System
</a>
<button class= "navbar-toggler shadow-none ms-2" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navigation" aria-controls= "navigation" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon mt-2" >
<span class= "navbar-toggler-bar bar1" ></span>
<span class= "navbar-toggler-bar bar2" ></span>
<span class= "navbar-toggler-bar bar3" ></span>
</span>
</button>
<div class= "collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id= "navigation" >
<ul class= "navbar-nav navbar-nav-hover mx-auto" >
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuPages0" data-bs-toggle= "dropdown" aria-expanded= "false" >
Pages
<img src= "./assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<div class= "dropdown-menu dropdown-menu-animation dropdown-xl p-3 border-radius-xl mt-0 mt-lg-3" aria-labelledby= "dropdownMenuPages0" >
<div class= "d-none d-lg-block" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
<div class= "d-lg-none" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
</div>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuBlocks" data-bs-toggle= "dropdown" aria-expanded= "false" >
Blocks
<img src= "./assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuBlocks" >
<div class= "d-none d-lg-block" >
<li class= "nav-item dropdown dropdown-hover dropdown-subitem" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "./presentation.html" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
<span class= "text-sm" > See all 109 sections</span>
</div>
<img src= "./assets/img/down-arrow.svg" alt= "down-arrow" class= "arrow" />
</div>
</div>
</a>
<div class= "dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby= "pageSections" >
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Logo Areas
</a>
</div>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12" >
<div class= "d-flex mb-2" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
</div>
</div>
</div>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Applications
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuDocs" data-bs-toggle= "dropdown" aria-expanded= "false" >
Docs
<img src= "./assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby= "dropdownMenuDocs" >
<div class= "d-none d-lg-block" >
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "document" transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "box-3d-50" transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > For those who want flexibility, use our utility classes</span>
</div>
</div>
</a>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12 g-0" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0" >
<a href= "https://www.creative-tim.com/product/soft-ui-design-system-pro" class= "btn btn-sm btn-dark btn-round mb-0 me-1 mt-2 mt-md-0" > Upgrade to Pro</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- Navbar -->
<div class= "container position-sticky z-index-sticky top-0" ><div class= "row" ><div class= "col-12" >
<nav class= "navbar navbar-expand-lg blur blur-rounded top-0 z-index-fixed shadow position-absolute my-3 py-2 start-0 end-0 mx-4" >
<div class= "container-fluid" >
<a class= "navbar-brand font-weight-bolder ms-sm-3" href= "https://demos.creative-tim.com/soft-ui-design-system/presentation.html" rel= "tooltip" title= "Designed and Coded by Creative Tim" data-placement= "bottom" target= "_blank" >
Soft UI Design 3 System
</a>
<button class= "navbar-toggler shadow-none ms-2" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navigation" aria-controls= "navigation" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon mt-2" >
<span class= "navbar-toggler-bar bar1" ></span>
<span class= "navbar-toggler-bar bar2" ></span>
<span class= "navbar-toggler-bar bar3" ></span>
</span>
</button>
<div class= "collapse navbar-collapse pt-3 pb-2 py-lg-0" id= "navigation" >
<ul class= "navbar-nav navbar-nav-hover ms-lg-12 ps-lg-5 w-100" >
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuPages" data-bs-toggle= "dropdown" aria-expanded= "false" >
Pages
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<div class= "dropdown-menu dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuPages" >
<div class= "d-none d-lg-block" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
<div class= "d-lg-none" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
</div>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuBlocks" data-bs-toggle= "dropdown" aria-expanded= "false" >
Blocks
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuBlocks" >
<div class= "d-none d-lg-block" >
<li class= "nav-item dropdown dropdown-hover dropdown-subitem" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "./presentation.html" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
<span class= "text-sm" > See all 109 sections</span>
</div>
<img src= "./assets/img/down-arrow.svg" alt= "down-arrow" class= "arrow" />
</div>
</div>
</a>
<div class= "dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby= "pageSections" >
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Logo Areas
</a>
</div>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12" >
<div class= "d-flex mb-2" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
</div>
</div>
</div>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Applications
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuDocs" data-bs-toggle= "dropdown" aria-expanded= "false" >
Docs
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby= "dropdownMenuDocs" >
<div class= "d-none d-lg-block" >
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "document" transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "box-3d-50" transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > For those who want flexibility, use our utility classes</span>
</div>
</div>
</a>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12 g-0" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item ms-lg-auto my-auto ms-3 ms-lg-0" >
<a href= "https://www.creative-tim.com/product/soft-ui-design-system-pro" class= "btn btn-sm bg-primary btn-round mb-0 me-1 mt-2 mt-md-0" > Upgrade to Pro</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
</div></div></div>
<!-- Navbar Transparent -->
<nav
class= "navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent" >
<div class= "container" >
<a class= "navbar-brand text-white " href= "https://demos.creative-tim.com/soft-ui-design-system/presentation.html" rel= "tooltip" title= "Designed and Coded by Creative Tim" data-placement= "bottom" target= "_blank" >
Soft UI Design 3 System
</a>
<button class= "navbar-toggler shadow-none ms-2" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navigation" aria-controls= "navigation" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon mt-2" >
<span class= "navbar-toggler-bar bar1" ></span>
<span class= "navbar-toggler-bar bar2" ></span>
<span class= "navbar-toggler-bar bar3" ></span>
</span>
</button>
<div class= "collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id= "navigation" >
<ul class= "navbar-nav navbar-nav-hover w-100" >
<li class= "nav-item dropdown dropdown-hover mx-2 ms-lg-6" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuPages2" data-bs-toggle= "dropdown" aria-expanded= "false" >
Pages
<img src= "./assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1 d-lg-block d-none" >
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1 d-lg-none d-block" >
</a>
<div class= "dropdown-menu dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuPages2" >
<div class= "d-none d-lg-block" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
<div class= "d-lg-none" >
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
About Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Contact Us
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Author
</a>
<a href= "javascript:;" class= "dropdown-item border-radius-md" >
Sign In
</a>
</div>
</div>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuBlocks" data-bs-toggle= "dropdown" aria-expanded= "false" >
Blocks
<img src= "./assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1 d-lg-block d-none" >
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1 d-lg-none d-block" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby= "dropdownMenuBlocks" >
<div class= "d-none d-lg-block" >
<li class= "nav-item dropdown dropdown-hover dropdown-subitem" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "./presentation.html" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
<span class= "text-sm" > See all 109 sections</span>
</div>
<img src= "./assets/img/down-arrow.svg" alt= "down-arrow" class= "arrow" />
</div>
</div>
</a>
<div class= "dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby= "pageSections" >
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Logo Areas
</a>
</div>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12" >
<div class= "d-flex mb-2" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<i class= "ni ni-single-copy-04 text-gradient text-primary" ></i>
</div>
<div class= "w-100 d-flex align-items-center justify-content-between" >
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Page Sections</h6>
</div>
</div>
</div>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Page Headers
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Features
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Pricing
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
FAQ
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Blog Posts
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Testimonials
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Teams
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Stats
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Call to Actions
</a>
<a class= "dropdown-item ps-3 border-radius-md mb-1" href= "javascript:;" >
Applications
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id= "dropdownMenuDocs" data-bs-toggle= "dropdown" aria-expanded= "false" >
Docs
<img src= "./assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1 d-lg-block d-none" >
<img src= "./assets/img/down-arrow-dark.svg" alt= "down-arrow" class= "arrow ms-1 d-lg-none d-block" >
</a>
<ul class= "dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby= "dropdownMenuDocs" >
<div class= "d-none d-lg-block" >
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "document" transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g id= "box-3d-50" transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
</li>
<li class= "nav-item " >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > For those who want flexibility, use our utility classes</span>
</div>
</div>
</a>
</li>
</div>
<div class= "row d-lg-none" >
<div class= "col-md-12 g-0" >
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> spaceship</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1720.000000, -592.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(4.000000, 301.000000)" >
<path class= "color-background" d= "M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z" ></path>
<path class= "color-background" d= "M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z" ></path>
<path class= "color-background" d= "M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity= "0.598539807" ></path>
<path class= "color-background" d= "M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity= "0.598539807" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Getting Started</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> document</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -591.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 300.000000)" >
<path class= "color-background" d= "M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity= "0.603585379" ></path>
<path class= "color-background" d= "M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Foundation</h6>
<span class= "text-sm" > See our colors, icons and typography</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 42 42" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> box-3d-50</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2319.000000, -291.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(603.000000, 0.000000)" >
<path class= "color-background" d= "M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z" ></path>
<path class= "color-background" d= "M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity= "0.7" ></path>
<path class= "color-background" d= "M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity= "0.7" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Components</h6>
<span class= "text-sm" > Explore our collection of fully designed components</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 44" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> switches</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-1870.000000, -440.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(154.000000, 149.000000)" >
<path class= "color-background" d= "M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity= "0.6" ></path>
<path class= "color-background" d= "M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Plugins</h6>
<span class= "text-sm" > Check how you can integrate our plugins</span>
</div>
</div>
</a>
<a class= "dropdown-item py-2 ps-3 border-radius-md" href= "javascript:;" >
<div class= "d-flex" >
<div class= "icon h-10 me-3 d-flex mt-1" >
<svg class= "text-secondary" width= "16px" height= "16px" viewBox= "0 0 40 40" version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" >
<title> settings</title>
<g stroke= "none" stroke-width= "1" fill= "none" fill-rule= "evenodd" >
<g transform= "translate(-2020.000000, -442.000000)" fill= "#FFFFFF" fill-rule= "nonzero" >
<g transform= "translate(1716.000000, 291.000000)" >
<g transform= "translate(304.000000, 151.000000)" >
<polygon class= "color-background" opacity= "0.596981957" points= "18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667" ></polygon>
<path class= "color-background" d= "M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity= "0.596981957" ></path>
<path class= "color-background" d= "M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z" ></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<h6 class= "dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" > Utility Classes</h6>
<span class= "text-sm" > All about overview, quick start, license and contents</span>
</div>
</div>
</a>
</div>
</div>
</ul>
</li>
<li class= "nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0" >
<a href= "https://www.creative-tim.com/product/soft-ui-design-system-pro" class= "btn btn-sm btn-dark btn-round mb-0 me-1 mt-2 mt-md-0" > Upgrade to Pro</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class= "row text-center py-3 mt-3" >
<div class= "col-4 mx-auto" >
<div class= "nav-wrapper position-relative end-0" >
<ul class= "nav nav-pills nav-fill p-1" role= "tablist" >
<li class= "nav-item" >
<a class= "nav-link mb-0 px-0 py-1 active" data-bs-toggle= "tab" href= "#profile-tabs-simple" role= "tab" aria-controls= "profile" aria-selected= "true" >
My Profile
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link mb-0 px-0 py-1" data-bs-toggle= "tab" href= "#dashboard-tabs-simple" role= "tab" aria-controls= "dashboard" aria-selected= "false" >
Dashboard
</a>
</li>
</ul>
</div>
</div>
</div>
Input Areas
6+ elements that you need for text manipulation and insertion
Design Blocks
A selection of page sections that fit perfectly in any combination
<!-- -------- START Features w/ icons and text on left & gradient title and text on right -------- -->
<div class= "container" >
<div class= "row py-4" >
<div class= "col-lg-6" >
<h3 class= "text-gradient text-primary mb-0 mt-2" > Read More About Us</h3>
<h3> The most important</h3>
<p> Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
<a href= "javascript:;" class= "text-primary icon-move-right" > More about us
<i class= "fas fa-arrow-right text-sm ms-1" ></i>
</a>
</div>
<div class= "col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0" >
<div class= "p-3 info-horizontal" >
<div class= "icon icon-shape rounded-circle bg-primary shadow text-center" >
<i class= "fas fa-ship opacity-10" ></i>
</div>
<div class= "description ps-3" >
<p class= "mb-0" > It becomes harder for us to give others a hand. <br> We get our heart broken by people we love.</p>
</div>
</div>
<div class= "p-3 info-horizontal" >
<div class= "icon icon-shape rounded-circle bg-primary shadow text-center" >
<i class= "fas fa-handshake opacity-10" ></i>
</div>
<div class= "description ps-3" >
<p class= "mb-0" > As we live, our hearts turn colder. <br> Cause pain is what we go through as we become older.</p>
</div>
</div>
<div class= "p-3 info-horizontal" >
<div class= "icon icon-shape rounded-circle bg-primary shadow text-center" >
<i class= "fas fa-hourglass opacity-10" ></i>
</div>
<div class= "description ps-3" >
<p class= "mb-0" > When we lose family over time. <br> What else could rust the heart more over time? Blackgold.</p>
</div>
</div>
</div>
</div>
</div>
<!-- -------- END Features w/ icons and text on left & gradient title and text on right -------- -->
Boost creativity
With our coded pages
The easiest way to get started is to use one of our
Presentation Pages for Company, Sign In Page, Author and Contact
These is just a small selection of the multiple possibitilies you have. Focus on the business, not on the design.
Getting Started
Check the possible ways of working with our product and the necessary files for building your own project.
Let's start
Plugins
Get inspiration and have an overview about the plugins that we used to create the Soft UI Design System.
Read more
Utility Classes
Soft UI Design System is giving you a lot of pre-made elements. For those who want flexibility, we included many utility classes.
Read more
Trusted by over
2,600,000 web developers
Many Fortune 500 companies, startups, universities and governmental institutions love Creative Tim's products.
"This is an excellent product, the documentation is excellent and helped me get things done more efficiently."
Shailesh Kushwaha
"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!"
Samuel Kamuli
"Great product. Helped me cut the time to set up a site. I used the components within instead of starting from scratch. I highly recommend for developers who want to spend more time on the backend!."
Do you love this awesome
Design System for Bootstrap 5?
Cause if you do, it can be yours for FREE. Hit the button below to navigate to Creative Tim where you can find the Design System in HTML. Start a new project or give an old Bootstrap project a new look!
Download HTML
Available on these technologies
You liked it and
Want more?
Most complex and innovative Design System Made by Creative Tim . Check our latest Premium Bootstrap 5 UI Kit.
Designed for those who like bold elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Soft UI Design System is ready to help you create stunning websites and webapps.
Special Thanks
We are more than happy to use the great images made by Danny inside Soft UI Design System. They come with a high level of quality and bright colors, fitting perfect with our product's colors.
Check Danny's work
Thank you for your support!
We deliver the best web products
================================================
FILE: package.json
================================================
{
"name": "soft-ui-design-system",
"version": "1.0.9",
"description": "Freebie Design System for Bootstrap 5",
"main": "index.html",
"type": "module",
"directories": {
"example": "root"
},
"scripts": {
"open-app": "gulp open-app",
"start": "npm run open-app",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "gulp-watch"
},
"repository": {
"type": "git",
"url": "git+https://github.com/creativetimofficial/soft-ui-design-system.git"
},
"keywords": [
"soft ui design system",
"bootstrap 5",
"design system",
"creative tim",
"html kit",
"html css kit",
"web kit",
"freebie",
"free bootstrap kit",
"css3 kit",
"bootstrap design system",
"frontend",
"responsive bootstrap kit"
],
"author": "Creative Tim (https://www.creative-tim.com/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/creativetimofficial/soft-ui-design-system/issues"
},
"devDependencies": {
"gulp": "5.0.0",
"gulp-open": "3.0.1",
"sass": "1.80.2"
},
"homepage": "http://creative-tim.com/product/soft-ui-design-system"
}
================================================
FILE: pages/about-us.html
================================================
Soft UI Design 3 System by Creative Tim
Fully integrated
We get insulted by others, lose trust for those We get back freezes
Payments functionality
We get insulted by others, lose trust for those We get back freezes
Prebuilt components
We get insulted by others, lose trust for those We get back freezes
Improved platform
We get insulted by others, lose trust for those We get back freezes
Get insights on Search
Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.
The Executive Team
There’s nothing I really wanted to do in life that I wasn’t able to get good at. That’s my skill.
Emma Roberts
UI Designer
Artist is a term applied to a person who engages in an activity deemed to be an art.
William Pearce
Boss
Artist is a term applied to a person who engages in an activity deemed to be an art.
Ivana Flow
Athlete
Artist is a term applied to a person who engages in an activity deemed to be an art.
Sophia Garcia
JS Developer
Artist is a term applied to a person who engages in an activity deemed to be an art.
0
Projects
Of “high-performing” level are led by a certified project manager
0 +Hours
That meets quality standards required by our users
0 /7Support
Actively engage team members that finishes on time
Be the first to see the news
Your company may not be in the software business,
but eventually, a software company will be in your business.
================================================
FILE: pages/author.html
================================================
Soft UI Design 3 System by Creative Tim
323
Posts
3.5k
Followers
260
Following
Decisions: If you can’t decide, the answer is no.
If two equally difficult paths, choose the one more
painful in the short term (pain avoidance is creating
an illusion of equality). Choose the path that leaves
you more equanimous. More about me
Check my latest blogposts
Finding temporary housing for your dog should be as easy as
renting an Airbnb. That’s the idea behind Rover ...
Read More
If you’ve ever wanted to train a machine learning model
and integrate it with IFTTT, you now can with ...
Read More
Venture investment in U.S. startups rose sequentially in
the second quarter of 2017, boosted by large, ate-stage financings
Read More
Contact Information
Fill up the form and our Team will get back to you within 24 hours.
Dyonisie Wolf Bucharest, RO 010458
================================================
FILE: pages/contact-us.html
================================================
Soft UI Design 3 System by Creative Tim
Soft UI Design 3 System by Creative Tim
Soft UI Design 3 System by Creative Tim
0 +Coded Elements
From buttons, to inputs, navbars, alerts or cards, you are covered
0 +
Design Blocks
Mix the sections, change the colors and unleash your creativity
0
Pages
Save 3-4 weeks of work when you use our pre-made pages for your website
Full Documentation
Built by developers for developers. Check the foundation and you will find everything inside our documentation.
Bootstrap 5 Ready
The world’s most popular front-end open source toolkit, featuring Sass variables and mixins.
Save Time & Money
Creating your design from scratch with dedicated designers can be very expensive. Start with our Design System.
Fully Responsive
Regardless of the screen size, the website content will naturally fit the given resolution.
Huge collection of sections
Infinite combinations
We have created multiple options for you to put together and customise into pixel perfect pages.
Design Blocks
A selection of 45 page sections that fit perfectly in any combination
Navigation
30+ components that will help go through the pages
Input Areas
50+ elements that you need for text manipulation and insertion
Attention Catchers
20+ Fully coded components that popup from different places of the screen
Elements
80+ carefully crafted small elements that come with multiple colors and shapes
Boost creativity
With our coded pages
The easiest way to get started is to use one of our
Presentation Pages for Company, Sign In Page, Author and Contact
These is just a small selection of the multiple possibitilies you have. Focus on the business, not on the design.
Getting Started
Check the possible ways of working with our product and the necessary files for building your own project.
Let's start
Plugins
Get inspiration and have an overview about the plugins that we used to create the Soft UI Design System.
Read more
Utility Classes
Soft UI Design System is giving you a lot of pre-made elements. For those who want flexibility, we included many utility classes.
Read more
Trusted by over
2,600,000 web developers
Many Fortune 500 companies, startups, universities and governmental institutions love Creative Tim's products.
"This is an excellent product, the documentation is excellent and helped me get things done more efficiently."
Shailesh Kushwaha
"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!"
Samuel Kamuli
"Great product. Helped me cut the time to set up a site. I used the components within instead of starting from scratch. I highly recommend for developers who want to spend more time on the backend!."
Do you love this awesome
Design System for Bootstrap 5?
Cause if you do, it can be yours for FREE. Hit the button below to navigate to Creative Tim where you can find the Design System in HTML. Start a new project or give an old Bootstrap project a new look!
Download HTML
Available on these technologies
You liked it and
Want more?
Most complex and innovative Design System Made by Creative Tim . Check our latest Premium Bootstrap 5 UI Kit.
Designed for those who like bold elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Soft UI Design System is ready to help you create stunning websites and webapps.
Special Thanks
We are more than happy to use the great images made by Danny inside Soft UI Design System. They come with a high level of quality and bright colors, fitting perfect with our product's colors.
Check Danny's work
Thank you for your support!
We deliver the best web products
================================================
FILE: sections/attention-catchers/alerts.html
================================================
Soft UI Design 3 System by Creative Tim
<div class= "container py-5" >
<div class= "row" >
<div class= "alert alert-primary text-white font-weight-bold" role= "alert" >
A simple primary alert—check it out!
</div>
<div class= "alert alert-secondary text-white font-weight-bold" role= "alert" >
A simple secondary alert—check it out!
</div>
<div class= "alert alert-success text-white font-weight-bold" role= "alert" >
A simple success alert—check it out!
</div>
<div class= "alert alert-danger text-white font-weight-bold" role= "alert" >
A simple danger alert—check it out!
</div>
<div class= "alert alert-warning text-white font-weight-bold" role= "alert" >
A simple warning alert—check it out!
</div>
<div class= "alert alert-info text-white font-weight-bold" role= "alert" >
A simple info alert—check it out!
</div>
<div class= "alert alert-light text-white font-weight-bold" role= "alert" >
A simple light alert—check it out!
</div>
<div class= "alert alert-dark text-white font-weight-bold" role= "alert" >
A simple dark alert—check it out!
</div>
</div>
</div>
================================================
FILE: sections/attention-catchers/modals.html
================================================
Soft UI Design 3 System by Creative Tim
<div class= "container py-7" >
<div class= "row mt-5" >
<div class= "col-sm-3 col-6 mx-auto" >
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-bs-toggle= "modal" data-bs-target= "#exampleModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModal" tabindex= "-1" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > Your modal title</h5>
<button type= "button" class= "btn-close" data-bs-dismiss= "modal" aria-label= "Close" ></button>
</div>
<div class= "modal-body" >
Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
<br><br>
It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
</div>
<div class= "modal-footer justify-content-between" >
<button type= "button" class= "btn bg-gradient-dark" data-bs-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
================================================
FILE: sections/attention-catchers/tooltips-popovers.html
================================================
Soft UI Design 3 System by Creative Tim
<div class= "container" >
<div class= "row py-7 text-center" >
<div>
<button type= "button" class= "btn bg-gradient-secondary" data-bs-container= "body" data-bs-toggle= "popover" data-bs-placement= "top" data-bs-content= "That’s the main thing people are controlled by! Thoughts- their perception of themselves!" >
Popover on top
</button>
<button type= "button" class= "btn bg-gradient-secondary" data-bs-container= "body" data-bs-toggle= "popover" data-bs-placement= "right" data-bs-content= "We’re not always in the position that we want to be at." >
Popover on right
</button>
<button type= "button" class= "btn bg-gradient-secondary" data-bs-container= "body" title= "Popover with title" data-bs-toggle= "popover" data-bs-placement= "bottom" data-bs-content= "A lot of people don’t appreciate the moment until it’s passed." >
Popover on bottom
</button>
<button type= "button" class= "btn bg-gradient-secondary" data-bs-container= "body" data-bs-toggle= "popover" data-bs-placement= "left" data-bs-content= "It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it." >
Popover on left
</button>
</div>
</div>
</div>
<!-- initialization script -->
<script>
var popoverTriggerList = []. slice . call ( document . querySelectorAll ( ' [data-bs-toggle="popover"] ' ))
var popoverList = popoverTriggerList . map ( function ( popoverTriggerEl ) {
return new bootstrap . Popover ( popoverTriggerEl )
})
</script>
================================================
FILE: sections/elements/avatars.html
================================================
Soft UI Design 3 System by Creative Tim
<div class= "container py-6" >
<div class= "row mt-5 text-center" >
<div class= "col-12" >
<div class= "avatar-group" >
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "../../assets/img/team-1.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Romina Hadid" >
<img alt= "Image placeholder" src= "../../assets/img/team-2.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Alexander Smith" >
<img alt= "Image placeholder" src= "../../assets/img/team-3.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Jessica Doe" >
<img alt= "Image placeholder" src= "../../assets/img/team-4.jpg" >
</a>
</div>
</div>
</div>
</div>
<!-- initialization script for tooltips -->
<script>
var tooltipTriggerList = []. slice . call ( document . querySelectorAll ( ' [data-bs-toggle="tooltip"] ' ))
var tooltipList = tooltipTriggerList . map ( function ( tooltipTriggerEl ) {
return new bootstrap . Tooltip ( tooltipTriggerEl )
})
</script>
<div class= "container py-6" >
<div class= "row mt-5 text-center" >
<div class= "col-12" >
<a href= "javascript:;" class= "avatar avatar-xs rounded-circle" >
<img alt= "Image placeholder" src= "../../assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-sm rounded-circle" >
<img alt= "Image placeholder" src= "../../assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar rounded-circle" >
<img alt= "Image placeholder" src= "../../assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-lg rounded-circle" >
<img alt= "Image placeholder" src= "../../assets/img/team-4.jpg" >
</a>
<a href= "javascript:;" class= "avatar avatar-xl rounded-circle" >
<img alt= "Image placeholder" src= "../../assets/img/team-4.jpg" >
</a>
</div>
</div>
</div>
================================================
FILE: sections/elements/badges.html
================================================
Soft UI Design 3 System by Creative Tim
<section class= "py-7 mt-3" >
<div class= "container" >
<div class= "row justify-space-between text-center py-2" >
<div class= "col-12" >
<span class= "badge bg-primary" > Primary</span>
<span class= "badge bg-gradient-secondary" > Secondary</span>
<span class= "badge bg-gradient-success" > Success</span>
<span class= "badge bg-gradient-danger" > Danger</span>
<span class= "badge bg-gradient-warning" > Warning</span>
<span class= "badge bg-gradient-info" > Info</span>
<span class= "badge bg-gradient-light text-dark" > Light</span>
<span class= "badge bg-gradient-dark" > Dark</span>
</div>
</div>
</div>
</section>
<section class= "py-7 mt-3" >
<div class= "container" >
<div class= "row justify-space-between text-center py-2" >
<div class= "col-12" >
<span class= "badge badge-primary" > Primary</span>
<span class= "badge badge-secondary" > Secondary</span>
<span class= "badge badge-success" > Success</span>
<span class= "badge badge-danger" > Danger</span>
<span class= "badge badge-warning" > Warning</span>
<span class= "badge badge-info" > Info</span>
<span class= "badge badge-light text-dark" > Light</span>
<span class= "badge badge-dark" > Dark</span>
</div>
</div>
</div>
</section>
<section class= "py-7 mt-3" >
<div class= "container" >
<div class= "row justify-space-between text-center py-2" >
<div class= "col-12" >
<span class= "badge rounded-pill badge-primary" > Primary</span>
<span class= "badge rounded-pill badge-secondary" > Secondary</span>
<span class= "badge rounded-pill badge-success" > Success</span>
<span class= "badge rounded-pill badge-danger" > Danger</span>
<span class= "badge rounded-pill badge-warning" > Warning</span>
<span class= "badge rounded-pill badge-info" > Info</span>
<span class= "badge rounded-pill badge-light text-dark" > Light</span>
<span class= "badge rounded-pill badge-dark" > Dark</span>
</div>
</div>
</div>
</section>
================================================
FILE: sections/elements/breadcrumbs.html
================================================
Soft UI Design 3 System by Creative Tim
<div class= "container py-6 mt-2" >
<div class= "row" >
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item active" aria-current= "page" > Home</li>
</ol>
</nav>
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item" ><a href= "#" > Home</a></li>
<li class= "breadcrumb-item active" aria-current= "page" > Library</li>
</ol>
</nav>
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item" ><a href= "#" > Home</a></li>
<li class= "breadcrumb-item" ><a href= "#" > Library</a></li>
<li class= "breadcrumb-item active" aria-current= "page" > Data</li>
</ol>
</nav>
</div>
</div>
================================================
FILE: sections/elements/buttons.html
================================================
Soft UI Design 3 System by Creative Tim
================================================
FILE: sections/elements/dropdowns.html
================================================
Soft UI Design 3 System by Creative Tim
<!-- Start dropdowns & dropups -->
<div class= "container py-7" >
<div class= "row" >
<div class= "row" >
<div class= "col-lg-4 ms-lg-auto col-md-6 col-sm-3 d-flex justify-content-center" >
<div class= "dropdown" >
<button class= "btn btn-primary dropdown-toggle" type= "button" id= "dropdownMenuButton" data-bs-toggle= "dropdown" aria-expanded= "false" >
Dropdown button
</button>
<ul class= "dropdown-menu px-2 py-3" aria-labelledby= "dropdownMenuButton" >
<li><a class= "dropdown-item border-radius-md" href= "javascript:;" > Action</a></li>
<li><a class= "dropdown-item border-radius-md" href= "javascript:;" > Another action</a></li>
<li><a class= "dropdown-item border-radius-md" href= "javascript:;" > Something else here</a></li>
</ul>
</div>
</div>
<div class= "col-lg-4 me-lg-auto col-md-6 col-sm-3 d-flex justify-content-center" >
<div class= "btn-group dropup mt-7" >
<button type= "button" class= "btn btn-primary dropdown-toggle" data-bs-toggle= "dropdown" aria-expanded= "false" >
Dropup
</button>
<ul class= "dropdown-menu px-2 py-3" aria-labelledby= "dropdownMenuButton" >
<li><a class= "dropdown-item border-radius-md" href= "javascript:;" > Action</a></li>
<li><a class= "dropdown-item border-radius-md" href= "javascript:;" > Another action</a></li>
<li><a class= "dropdown-item border-radius-md" href= "javascript:;" > Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end dropdowns & dropups -->
================================================
FILE: sections/elements/progress-bars.html
================================================
Soft UI Design 3 System by Creative Tim
<section class= "py-6 mt-4" >
<div class= "container" >
<div class= "row justify-space-between py-2" >
<div class= "col-lg-6 mx-auto" >
<div class= "progress mb-3" >
<div class= "progress-bar bg-primary" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-secondary" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-success" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-info" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-warning" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-danger" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress mb-3" >
<div class= "progress-bar bg-dark" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
</div>
</div>
</div>
</section>
================================================
FILE: sections/elements/toggles.html
================================================
Soft UI Design 3 System by Creative Tim
<div class= "container py-6 mt-3" >
<div class= "row" >
<div class= "col-4 mx-auto" >
<div class= "form-check form-switch ps-6" >
<input class= "form-check-input ms-auto mt-1" type= "checkbox" id= "flexSwitchCheckDefault" >
<label class= "form-check-label ms-2" for= "flexSwitchCheckDefault" > Remember me</label>
</div>
</div>
</div>
</div>
<div class= "container py-6 mt-3" >
<div class= "d-flex justify-content-center align-items-center" >
<div>
<div class= "form-check form-switch mb-0" >
<input class= "form-check-input" type= "checkbox" id= "flexSwitchCheckDefault" >
</div>
</div>
<div class= "ms-4" >
<span class= "text-dark font-weight-bold d-block text-sm" > Remember me</span>
<span class= "text-xs d-block" > Be sure that you will always be logged in.</span>
</div>
</div>
</div>
================================================
FILE: sections/elements/typography.html
================================================
Soft UI Design 3 System by Creative Tim
Typography - Font Family Serif
<div style= "position:relative;padding-top:4rem" >
<div class= "text-sans-serif container" >
<h2 class= "h2 mb-5" >
<span> Typography - Font Family Serif</span>
</h2>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 1</small>
</div>
<div class= "col-sm-9" >
<h1 class= "mb-0" > H1 Soft Design System</h1>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 2</small>
</div>
<div class= "col-sm-9" >
<h2 class= "mb-0" > H2 Soft Design System</h2>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 3</small>
</div>
<div class= "col-sm-9" >
<h3 class= "mb-0" > H3 Soft Design System</h3>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 4</small>
</div>
<div class= "col-sm-9" >
<h4 class= "mb-0" > H4 Soft Design System</h4>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 5</small>
</div>
<div class= "col-sm-9" >
<h5 class= "mb-0" > H5 Soft Design System</h5>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 6</small>
</div>
<div class= "col-sm-9" >
<h6 class= "mb-0" > H6 Soft Design System</h6>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Lead text</small>
</div>
<div class= "col-sm-9" >
<p class= "lead mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Paragraph</small>
</div>
<div class= "col-sm-9" >
<p class= "mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Small</small>
</div>
<div class= "col-sm-9" >
<p class= "text-sm mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Tiny</small>
</div>
<div class= "col-sm-9" >
<p class= "text-xs mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
</div>
</div>
Typography - Font Family Monospace
<div style= "position:relative;padding-top:4rem" >
<div class= "text-monospace container " >
<h2 class= "h2 mb-5" >
<span> Typography - Font Family Monospace</span>
</h2>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 1</small>
</div>
<div class= "col-sm-9" >
<h1 class= "mb-0" > H1 Soft Design System</h1>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 2</small>
</div>
<div class= "col-sm-9" >
<h2 class= "mb-0" > H2 Soft Design System</h2>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 3</small>
</div>
<div class= "col-sm-9" >
<h3 class= "mb-0" > H3 Soft Design System</h3>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 4</small>
</div>
<div class= "col-sm-9" >
<h4 class= "mb-0" > H4 Soft Design System</h4>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 5</small>
</div>
<div class= "col-sm-9" >
<h5 class= "mb-0" > H5 Soft Design System</h5>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Heading 6</small>
</div>
<div class= "col-sm-9" >
<h6 class= "mb-0" > H6 Soft Design System</h6>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Lead text</small>
</div>
<div class= "col-sm-9" >
<p class= "lead mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Paragraph</small>
</div>
<div class= "col-sm-9" >
<p class= "mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Small</small>
</div>
<div class= "col-sm-9" >
<p class= "text-sm mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
<div class= "py-3 align-items-center row" >
<div class= "col-sm-3" >
<small class= "text-uppercase font-weight-bold" > Tiny</small>
</div>
<div class= "col-sm-9" >
<p class= "text-xs mb-0" >
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that' s a responsibility that I
have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
</div>
</div>
</div>
================================================
FILE: sections/input-areas/forms.html
================================================
Soft UI Design 3 System by Creative Tim
================================================
FILE: sections/input-areas/inputs.html
================================================
Soft UI Design 3 System by Creative Tim
Input with icon and label
================================================
FILE: sections/navigation/nav-tabs.html
================================================
Soft UI Design 3 System by Creative Tim
<section class= "py-7" >
<div class= "container" >
<div class= "row" >
<div class= "col-lg-4 mx-auto" >
<div class= "nav-wrapper position-relative end-0" >
<ul class= "nav nav-pills nav-fill p-1" role= "tablist" >
<li class= "nav-item" >
<a class= "nav-link mb-0 px-0 py-1 active" data-bs-toggle= "tab" href= "#profile-tabs-simple" role= "tab" aria-controls= "profile" aria-selected= "true" >
My Profile
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link mb-0 px-0 py-1" data-bs-toggle= "tab" href= "#dashboard-tabs-simple" role= "tab" aria-controls= "dashboard" aria-selected= "false" >
Dashboard
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
================================================
FILE: sections/navigation/navbars.html
================================================
Soft UI Design 3 System by Creative Tim
<!-- Navbar Dark -->
<nav
class= "navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3" >
<div class= "container" >
<a class= "navbar-brand text-white" href= "https://demos.creative-tim.com/soft-ui-design-system/presentation.html" rel= "tooltip" title= "Designed and Coded by Creative Tim" data-placement= "bottom" target= "_blank" >
Soft UI Design 3 System
</a>
<a href= "https://www.creative-tim.com/product/soft-ui-design-system-pro#pricingCard" class= "btn btn-sm btn-dark btn-round mb-0 ms-auto d-lg-none d-block" > Buy Now</a>
<button class= "navbar-toggler shadow-none ms-2" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navigation" aria-controls= "navigation" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon mt-2" >
<span class= "navbar-toggler-bar bar1" ></span>
<span class= "navbar-toggler-bar bar2" ></span>
<span class= "navbar-toggler-bar bar3" ></span>
</span>
</button>
<div class= "collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id= "navigation" >
<ul class= "navbar-nav navbar-nav-hover mx-auto" >
<li class= "nav-item mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role= "button" >
Pages
<img src= "../../assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
</li>
<li class= "nav-item mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role= "button" >
Account
<img src= "../../assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
</li>
<li class= "nav-item mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role= "button" >
Blocks
<img src= "../../assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
</li>
<li class= "nav-item dropdown dropdown-hover mx-2" >
<a class= "nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role= "button" >
Docs
<img src= "../../assets/img/down-arrow-white.svg" alt= "down-arrow" class= "arrow ms-1" >
</a>
</li>
</ul>
<ul class= "navbar-nav d-lg-block d-none" >
<li class= "nav-item" >
<a href= "https://www.creative-tim.com/product/soft-ui-design-system-pro#pricingCard" class= "btn btn-sm btn-dark btn-round mb-0 me-1" role= "button" > Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
================================================
FILE: sections/navigation/pagination.html
================================================
Soft UI Design 3 System by Creative Tim
================================================
FILE: sections/page-sections/features.html
================================================
Soft UI Design 3 System by Creative Tim
<!-- -------- START Features w/ icons and text on left & gradient title and text on right -------- -->
<section class= "py-9" >
<div class= "container" >
<div class= "row" >
<div class= "col-lg-6" >
<h3 class= "text-gradient text-primary mb-0 mt-2" > Read More About Us</h3>
<h3> The most important</h3>
<p> Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
<a href= "javascript:;" class= "text-primary icon-move-right" > More about us
<i class= "fas fa-arrow-right text-sm ms-1" ></i>
</a>
</div>
<div class= "col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0" >
<div class= "p-3 info-horizontal" >
<div class= "icon icon-shape rounded-circle bg-primary shadow text-center" >
<i class= "fas fa-ship opacity-10" ></i>
</div>
<div class= "description ps-3" >
<p class= "mb-0" > It becomes harder for us to give others a hand. <br> We get our heart broken by people we love.</p>
</div>
</div>
<div class= "p-3 info-horizontal" >
<div class= "icon icon-shape rounded-circle bg-primary shadow text-center" >
<i class= "fas fa-handshake opacity-10" ></i>
</div>
<div class= "description ps-3" >
<p class= "mb-0" > As we live, our hearts turn colder. <br> Cause pain is what we go through as we become older.</p>
</div>
</div>
<div class= "p-3 info-horizontal" >
<div class= "icon icon-shape rounded-circle bg-primary shadow text-center" >
<i class= "fas fa-hourglass opacity-10" ></i>
</div>
<div class= "description ps-3" >
<p class= "mb-0" > When we lose family over time. <br> What else could rust the heart more over time? Blackgold.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ icons and text on left & gradient title and text on right -------- -->
================================================
FILE: sections/page-sections/hero-sections.html
================================================
Soft UI Design 3 System by Creative Tim
](https://www.creative-tim.com/product/soft-ui-design-system?ref=readme-suds)
| HTML |
| --- |
| [](http://demos.creative-tim.com/soft-ui-design-system/presentation.html?ref=readme-suds)
## Demo
- [Sign in page](https://demos.creative-tim.com/soft-ui-design-system/pages/sign-in.html?ref=readme-suds)
- [About us page](https://demos.creative-tim.com/soft-ui-design-system/pages/about-us.html?ref=readme-suds)
- [Contact us page](https://demos.creative-tim.com/soft-ui-design-system/pages/contact-us.html?ref=readme-suds)
- [Author page](https://demos.creative-tim.com/soft-ui-design-system/pages/author.html?ref=readme-suds)
- [Page headers](https://demos.creative-tim.com/soft-ui-design-system/sections/page-sections/hero-sections.html?ref=readme-suds)
[View More](https://demos.creative-tim.com/soft-ui-design-system/presentation.html?ref=readme-suds).
## Quick start
Quick start options:
- Download from [Creative Tim](https://www.creative-tim.com/product/soft-ui-design-system?ref=readme-suds).
## Terminal Commands
1. Download and Install NodeJs from [NodeJs Official Page](https://nodejs.org/en/download/).
2. Navigate to the root / directory and run npm install to install our local dependencies.
## Documentation
The documentation for the Soft UI Design System is hosted at our [website](https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-design-system?ref=readme-suds).
### What's included
Within the download you'll find the following directories and files:
```
soft-ui-design-system
├── assets
│ ├── css/
│ ├── fonts/
│ ├── img/
│ ├── js
│ │ ├── core
│ │ ├── plugins
│ │ └── soft-design-system.min.js
│ └── scss
│ ├── soft-design-system/
│ └── soft-design-system.scss
├── docs
│ ├── documentation.html
├── pages/
├── sections/
├── CHANGELOG.md
├── gulpfile.js
├── package.json
├── presentation.html
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
## Resources
- [Live Preview](https://demos.creative-tim.com/soft-ui-design-system/presentation.html?ref=readme-suds)
- [Download Page](https://www.creative-tim.com/product/soft-ui-design-system?ref=readme-suds)
- Documentation is [here](https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-design-system?ref=readme-suds)
- [License Agreement](https://www.creative-tim.com/license?ref=readme-suds)
- [Support](https://www.creative-tim.com/contact-us?ref=readme-suds)
- Issues: [Github Issues Page](https://github.com/creativetimofficial/soft-ui-design-system/issues)
- [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Soft UI Design System. Here are some advices for our users that want to report an issue:
1. Make sure that you are using the latest version of the Soft UI Design System. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/soft-ui-design-system?ref=readme-suds).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
## Technical Support or Questions
If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-suds) instead of opening an issue.
## Licensing
- Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-suds)
- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-suds)
## Useful Links
- [More products](https://www.creative-tim.com/templates?ref=readme-suds) from Creative Tim
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-suds) from Creative Tim
- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-suds) (earn money)
##### Social Media
Twitter: