mirror of
https://github.com/tabler/tabler.git
synced 2026-07-25 20:44:38 +04:00
Merge branch 'dev' into dev-nouislider
This commit is contained in:
Dawid Harat
@@ -3,3 +3,6 @@
|
||||
@import "variables";
|
||||
@import "utilities";
|
||||
@import "mixins";
|
||||
|
||||
@import "bootstrap-config";
|
||||
@import "mixins-override";
|
||||
|
||||
+16
-22
@@ -1,9 +1,5 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
$dark-body-bg: #222935;
|
||||
$dark-body-color: #afbdd1;
|
||||
$dark-border-color: rgba($border-color, .01);
|
||||
|
||||
@mixin dark-mode {
|
||||
&,
|
||||
.modal-content,
|
||||
@@ -17,21 +13,7 @@ $dark-border-color: rgba($border-color, .01);
|
||||
.sidebar,
|
||||
.topbar {
|
||||
color: inherit;
|
||||
background: rgba($white, .02);
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.form-control-light {
|
||||
background: $dark-border-color;
|
||||
}
|
||||
|
||||
.example,
|
||||
.card-footer,
|
||||
.card-header,
|
||||
.table th, .markdown table th, .table td, .markdown table td,
|
||||
.dropdown-menu {
|
||||
border-color: $dark-border-color;
|
||||
background: $dark;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
@@ -49,16 +31,28 @@ $dark-border-color: rgba($border-color, .01);
|
||||
.form-fieldset {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select,
|
||||
.form-check-input:not(:checked) {
|
||||
background: transparent;
|
||||
border-color: $dark-border-color;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media not print {
|
||||
body.theme-dark {
|
||||
.theme-dark {
|
||||
@include dark-mode;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.auto-theme-dark {
|
||||
@media not print and (prefers-color-scheme: dark) {
|
||||
.auto-theme-dark {
|
||||
@include dark-mode;
|
||||
}
|
||||
}
|
||||
|
||||
+72
-24
@@ -16,10 +16,12 @@ $theme-color-interval: 10% !default;
|
||||
$light: #f5f7fb !default;
|
||||
$dark: #354052 !default;
|
||||
|
||||
$light-black: rgba($dark, .4) !default;
|
||||
$light-white: rgba($light, .4) !default;
|
||||
$min-black: rgba($dark, .02) !default;
|
||||
$min-white: rgba($light, .02) !default;
|
||||
$light-black: rgba($dark, .24) !default;
|
||||
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
|
||||
$light-white: rgba($light, .24) !default;
|
||||
|
||||
$min-black: rgba($dark, .032) !default;
|
||||
$min-white: rgba($light, .032) !default;
|
||||
|
||||
$gray-100: $light !default;
|
||||
$gray-200: mix($light, $dark, 98%) !default;
|
||||
@@ -39,16 +41,25 @@ $pink: #f66d9b !default;
|
||||
$red: #fa4654 !default;
|
||||
$orange: #ff922b !default;
|
||||
$yellow: #fab005 !default;
|
||||
$lime: #7bd235 !default;
|
||||
$lime: #94d82d !default;
|
||||
$green: #5eba00 !default;
|
||||
$teal: #2bcbba !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
$black: #000000 !default;
|
||||
$white: #ffffff !default;
|
||||
|
||||
$text-muted: $gray-700 !default;
|
||||
$border-color: $gray-400 !default;
|
||||
$hover-bg: $gray-200 !default;
|
||||
$body-bg: $light !default;
|
||||
$body-color: $dark !default;
|
||||
|
||||
$text-muted: mix($body-color, #fff, 64%) !default;
|
||||
$border-color: rgba(mix($body-color, #fff, 75%), .24) !default;
|
||||
|
||||
$hover-bg: $light-white !default;
|
||||
$active-bg: rgba($blue, .06) !default;
|
||||
|
||||
$dark-body-bg: #222935 !default;
|
||||
$dark-body-color: #afbdd1 !default;
|
||||
$dark-border-color: rgba($dark-body-color, .4) !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $text-muted !default;
|
||||
@@ -57,11 +68,6 @@ $info: $azure !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
|
||||
$body-bg: $light !default;
|
||||
$body-color: $dark !default;
|
||||
|
||||
|
||||
|
||||
$social-colors: (
|
||||
"facebook": #3b5998,
|
||||
"twitter": #1da1f2,
|
||||
@@ -151,9 +157,9 @@ $spacers: (
|
||||
1: $spacer * .25,
|
||||
2: $spacer * .5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.25,
|
||||
5: $spacer * 1.5,
|
||||
6: $spacer * 3,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 3,
|
||||
6: $spacer * 4.5,
|
||||
7: $spacer * 6,
|
||||
8: $spacer * 9,
|
||||
9: $spacer * 12,
|
||||
@@ -183,6 +189,13 @@ $container-max-widths: (
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
$embed-responsive-aspect-ratios: (
|
||||
'2by1': (
|
||||
x: 2,
|
||||
y: 1
|
||||
)
|
||||
) !default;
|
||||
|
||||
//alerts
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-bg-level: -8 !default;
|
||||
@@ -216,7 +229,10 @@ $input-btn-padding-y-lg: .5rem !default;
|
||||
$input-height: null !default;
|
||||
$input-height-sm: null !default;
|
||||
$input-height-lg: null !default;
|
||||
$input-color: inherit !default;
|
||||
$input-focus-color: inherit !default;
|
||||
|
||||
//buttons
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-font-weight: 500 !default;
|
||||
$btn-border-radius: 3px !default;
|
||||
@@ -233,6 +249,7 @@ $card-group-margin: 1.5rem !default;
|
||||
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
|
||||
$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
|
||||
|
||||
|
||||
//close
|
||||
$close-font-weight: 400 !default;
|
||||
$close-font-size: 1.5rem !default;
|
||||
@@ -246,19 +263,49 @@ $dropdown-link-hover-bg: $hover-bg !default;
|
||||
$dropdown-link-hover-color: inherit !default;
|
||||
$dropdown-spacer: 1px !default;
|
||||
|
||||
$dropdown-link-active-color: $primary !default;
|
||||
$dropdown-link-active-bg: $active-bg !default;
|
||||
|
||||
//grid
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
|
||||
//loader
|
||||
$loader-size: 2.5rem !default;
|
||||
|
||||
//lists
|
||||
$list-group-item-padding-y: .5rem !default;
|
||||
$list-group-item-padding-x: .75rem !default;
|
||||
|
||||
//modals
|
||||
$modal-content-border-color: $border-color !default;
|
||||
$modal-backdrop-opacity: .24 !default;
|
||||
$modal-backdrop-bg: $dark !default;
|
||||
$modal-backdrop-blur: 2px !default;
|
||||
|
||||
$modal-fade-transform: translate(0, -1rem) !default;
|
||||
|
||||
$modal-content-border-radius: $border-radius !default;
|
||||
|
||||
$modal-inner-padding: .75rem !default;
|
||||
$modal-inner-padding-x: 1.25rem !default;
|
||||
$modal-footer-border-width: 0 !default;
|
||||
$modal-header-border-width: 0 !default;
|
||||
|
||||
$modal-xl: 1140px !default;
|
||||
$modal-lg: 800px !default;
|
||||
$modal-md: 540px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
//navbar
|
||||
$navbar-bg: $white !default;
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
|
||||
//popover
|
||||
$popover-border-color: $border-color !default;
|
||||
|
||||
//nav
|
||||
$nav-link-padding-y: 1rem !default;
|
||||
//$nav-link-padding-y: 1rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
@@ -298,7 +345,7 @@ $toast-header-color: $text-muted !default;
|
||||
$yiq-contrasted-threshold: 200 !default;
|
||||
|
||||
//progress
|
||||
$progress-bg: $gray-200 !default;
|
||||
$progress-bg: $light-mix !default;
|
||||
$progress-height: .75rem !default;
|
||||
|
||||
//ribbons
|
||||
@@ -312,7 +359,7 @@ $input-disabled-bg: $gray-100 !default;
|
||||
$input-border-color: $border-color !default;
|
||||
$input-placeholder-color: $text-muted !default;
|
||||
|
||||
$input-group-addon-bg: $gray-100 !default;
|
||||
$input-group-addon-bg: $min-black !default;
|
||||
$input-group-addon-color: $text-muted !default;
|
||||
|
||||
$dropdown-border-color: $border-color !default;
|
||||
@@ -326,7 +373,11 @@ $form-check-padding-left: $form-check-input-width + .5rem !default;
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: 1px solid $border-color !default;
|
||||
$form-check-input-border-radius: $border-radius !default;
|
||||
$form-check-input-checked-bg-size: .75rem !default;
|
||||
$form-check-input-checked-bg-size: .8rem !default;
|
||||
|
||||
$form-check-input-checked-border-color: $border-color !default;
|
||||
|
||||
$form-select-indicator-color: $border-color !default;
|
||||
|
||||
$form-switch-width: 1.75rem !default;
|
||||
$form-switch-padding-left: $form-switch-width + .5rem !default;
|
||||
@@ -348,15 +399,12 @@ $flag-sizes: (
|
||||
|
||||
//Payments
|
||||
$payment-sizes: (
|
||||
"md": 2rem,
|
||||
"sm": 1.5rem,
|
||||
"lg": 3rem,
|
||||
"xl": 4rem
|
||||
) !default;
|
||||
|
||||
|
||||
|
||||
$enable-social-colors: true !default;
|
||||
$enable-ghost-buttons: true !default;
|
||||
$enable-color-hues: true !default;
|
||||
$enable-extra-colors: true !default;
|
||||
$enable-gradients: false !default;
|
||||
|
||||
+65
-33
@@ -9,10 +9,10 @@ $sidenav-breakpoint-show: 'sm';
|
||||
$sidenav-breakpoint-folded: 'lg';
|
||||
$sidenav-folded-item-height: 3.5rem;
|
||||
|
||||
@mixin sidebar-folded($breakpoint-folded) {
|
||||
@mixin sidebar-folded($breakpoint-folded, $breakpoint-show: false) {
|
||||
@if $breakpoint-folded {
|
||||
|
||||
@include media-breakpoint-down($breakpoint-folded) {
|
||||
@include media-breakpoint-between($breakpoint-show, $breakpoint-folded) {
|
||||
width: $sidenav-width-folded;
|
||||
|
||||
.sidebar-brand {
|
||||
@@ -104,6 +104,10 @@ $sidenav-folded-item-height: 3.5rem;
|
||||
.sidebar-nav-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-sidebar-folded {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -116,12 +120,30 @@ $sidenav-folded-item-height: 3.5rem;
|
||||
|
||||
|
||||
/**
|
||||
Topnav
|
||||
Top nav
|
||||
*/
|
||||
.topnav {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 .5rem;
|
||||
z-index: $zindex-sticky;
|
||||
min-height: $navbar-height;
|
||||
user-select: none;
|
||||
|
||||
& + & {
|
||||
top: add($navbar-height, 1px);
|
||||
z-index: $zindex-sticky - 1;
|
||||
}
|
||||
|
||||
& + & + & {
|
||||
top: add($navbar-height * 2, 2px);
|
||||
z-index: $zindex-sticky - 2;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
@@ -133,6 +155,25 @@ Topnav
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: $navbar-height;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&.active {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-logo {
|
||||
&-sm {
|
||||
display: none;
|
||||
@@ -148,27 +189,6 @@ Topnav
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Topbar
|
||||
*/
|
||||
.topbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 .5rem;
|
||||
z-index: $zindex-sticky;
|
||||
min-height: $navbar-height;
|
||||
|
||||
& + & {
|
||||
top: add($navbar-height, 1px);
|
||||
}
|
||||
|
||||
& + & + & {
|
||||
top: add($navbar-height * 2, 2px);
|
||||
}
|
||||
|
||||
.sidebar + .content & {
|
||||
left: $sidenav-width;
|
||||
@@ -186,7 +206,7 @@ Topbar
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-fixed {
|
||||
.topnav-fixed {
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
@@ -235,15 +255,15 @@ Content
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.topbar + & {
|
||||
.topnav + & {
|
||||
padding-top: add($navbar-height, 1px);
|
||||
}
|
||||
|
||||
.topbar + .topbar + & {
|
||||
.topnav + .topnav + & {
|
||||
padding-top: add($navbar-height * 2, 2px);
|
||||
}
|
||||
|
||||
.topbar + .topbar + .topbar + & {
|
||||
.topnav + .topnav + .topnav + & {
|
||||
padding-top: add($navbar-height * 3, 3px);
|
||||
}
|
||||
}
|
||||
@@ -263,7 +283,7 @@ Sidebar
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include sidebar-folded($sidenav-breakpoint-folded);
|
||||
@include sidebar-folded($sidenav-breakpoint-folded, $sidenav-breakpoint-show);
|
||||
@include sidebar-show($sidenav-breakpoint-show);
|
||||
}
|
||||
|
||||
@@ -273,7 +293,7 @@ Sidebar
|
||||
|
||||
line-height: $navbar-height;
|
||||
width: $sidenav-width;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@@ -304,7 +324,7 @@ Sidebar
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
@include scrollbar(true);
|
||||
@include scrollbar;
|
||||
|
||||
.sidebar-brand + & {
|
||||
margin-top: $navbar-height;
|
||||
@@ -319,6 +339,7 @@ Sidebar menu
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
color: $text-muted;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
@@ -345,13 +366,13 @@ Sidebar menu
|
||||
&:hover {
|
||||
background-color: rgba(#fff, .02);
|
||||
text-decoration: none;
|
||||
color: #ffffff !important;
|
||||
color: $body-color !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
color: $body-color !important;
|
||||
box-shadow: inset 3px 0 $primary;
|
||||
background-color: rgba(#fff, .01);
|
||||
}
|
||||
@@ -406,4 +427,15 @@ Sidebar dark
|
||||
.sidebar-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.sidebar-nav-link {
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
@include scrollbar(true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,11 +20,18 @@ Navbar logo
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-item:hover,
|
||||
.dropright:hover {
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
.dropdown-menu {
|
||||
.dropdown,
|
||||
.dropright {
|
||||
.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.25rem;
|
||||
margin: .25rem 0 $card-spacer-y;
|
||||
margin: -.25rem 0 $card-spacer-y;
|
||||
|
||||
>* {
|
||||
flex: 1;
|
||||
|
||||
@@ -36,3 +36,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
.bg-dark &,
|
||||
.theme-dark & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "config";
|
||||
@import "ui/buttons-extra";
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "config";
|
||||
@import "dark";
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "config";
|
||||
@import "rtl";
|
||||
+2
-4
@@ -6,11 +6,8 @@
|
||||
*/
|
||||
|
||||
@import "config";
|
||||
@import "bootstrap-config";
|
||||
@import "mixins-override";
|
||||
@import "bootstrap-components";
|
||||
|
||||
|
||||
@import "fonts/webfonts";
|
||||
|
||||
@import "layout/core";
|
||||
@@ -26,6 +23,7 @@
|
||||
@import "ui/buttons";
|
||||
@import "ui/calendars";
|
||||
@import "ui/cards";
|
||||
@import "ui/close";
|
||||
@import "ui/dropdowns";
|
||||
@import "ui/empty";
|
||||
@import "ui/grid";
|
||||
@@ -46,6 +44,7 @@
|
||||
@import "ui/noUiSlider";
|
||||
@import "ui/stars";
|
||||
@import "ui/pagination";
|
||||
@import "ui/popovers";
|
||||
@import "ui/progress";
|
||||
@import "ui/ribbons";
|
||||
@import "ui/stamps";
|
||||
@@ -72,7 +71,6 @@
|
||||
@import "utils/opacity";
|
||||
@import "utils/shadow";
|
||||
|
||||
@import "dark";
|
||||
@import "rtl";
|
||||
|
||||
@import "debug";
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
@if $enable-ghost-buttons {
|
||||
@each $vendor, $color in $theme-colors {
|
||||
.btn-ghost-#{$vendor} {
|
||||
@include button-variant(transparent, transparent, $color, $color, $color, #fff, $color, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-social-colors {
|
||||
@each $vendor, $color in $social-colors {
|
||||
.btn-#{$vendor} {
|
||||
@include button-variant($color, $color);
|
||||
}
|
||||
|
||||
.btn-outline-#{$vendor} {
|
||||
@include button-outline-variant($color, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-extra-colors {
|
||||
@each $name, $color in $colors {
|
||||
.btn-#{$name} {
|
||||
@include button-variant($color, $color);
|
||||
}
|
||||
|
||||
.btn-outline-#{$name} {
|
||||
@include button-outline-variant($color, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
+16
-36
@@ -1,5 +1,13 @@
|
||||
.btn-secondary {
|
||||
@include button-variant($white, $border-color, $dark);
|
||||
background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 100%);
|
||||
box-shadow: none !important;
|
||||
|
||||
.bg-dark &,
|
||||
.theme-dark & {
|
||||
@include button-variant($min-white, $border-color, $light, rgba(0, 0, 0, 0), $border-color, $light);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outlined-secondary {
|
||||
@@ -14,10 +22,6 @@
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, .02);
|
||||
}
|
||||
|
||||
&:not(.btn-light):not(.btn-link) {
|
||||
background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 90%);
|
||||
}
|
||||
|
||||
&:not(:focus):not(.focus) {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
|
||||
}
|
||||
@@ -101,38 +105,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-ghost-buttons {
|
||||
@each $vendor, $color in $theme-colors {
|
||||
.btn-ghost-#{$vendor} {
|
||||
@include button-variant(transparent, transparent, $color, $color, $color, #fff, $color, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-social-colors {
|
||||
@each $vendor, $color in $social-colors {
|
||||
.btn-#{$vendor} {
|
||||
@include button-variant($color, $color);
|
||||
}
|
||||
|
||||
.btn-outline-#{$vendor} {
|
||||
@include button-outline-variant($color, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-extra-colors {
|
||||
@each $name, $color in $colors {
|
||||
.btn-#{$name} {
|
||||
@include button-variant($color, $color);
|
||||
}
|
||||
|
||||
.btn-outline-#{$name} {
|
||||
@include button-outline-variant($color, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -151,3 +123,11 @@
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-floating {
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
+17
-15
@@ -24,6 +24,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card-md {
|
||||
.card-body {
|
||||
padding: map-get($spacers, 6);
|
||||
}
|
||||
}
|
||||
|
||||
.card-group {
|
||||
margin-bottom: $card-group-margin;
|
||||
}
|
||||
@@ -71,7 +77,7 @@
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: rgba($primary, .06);
|
||||
background: $active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -324,23 +330,19 @@ Card chart
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Card profile
|
||||
/**
|
||||
Card avatar
|
||||
*/
|
||||
.card-profile {
|
||||
.card-header {
|
||||
height: 9rem;
|
||||
background-size: cover;
|
||||
}
|
||||
.card-avatar {
|
||||
box-shadow: 0 0 0 .5rem $card-bg;
|
||||
}
|
||||
|
||||
.card-profile-img {
|
||||
max-width: 6rem;
|
||||
margin-top: -5rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 3px solid #ffffff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
/*
|
||||
Card img top
|
||||
*/
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
.close {
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
min-width: 12rem;
|
||||
box-shadow: $box-shadow;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
@@ -25,7 +26,6 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-item {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
@@ -60,3 +60,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropright {
|
||||
>.dropdown-menu {
|
||||
margin-top: subtract(-$dropdown-padding-y, 1px);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -30,13 +30,13 @@
|
||||
}
|
||||
|
||||
@each $country in $countries {
|
||||
.flag-#{$country} {
|
||||
.flag-country-#{$country} {
|
||||
background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@each $flag-size, $size in $flag-sizes {
|
||||
.flag-size-#{$flag-size} {
|
||||
.flag-#{$flag-size} {
|
||||
width: $size * 1.33333;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
+115
-10
@@ -4,6 +4,9 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Form label
|
||||
*/
|
||||
.form-label {
|
||||
font-size: $h4-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
@@ -11,11 +14,33 @@ textarea {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
vertical-align: middle;
|
||||
.form-label-description {
|
||||
float: right;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-muted;
|
||||
line-height: $line-height-base * (100%/$small-font-size);
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
/**
|
||||
Form hint
|
||||
*/
|
||||
.form-hint {
|
||||
font-size: $small-font-size;
|
||||
color: $text-muted;
|
||||
margin: 0 0 .5rem;
|
||||
|
||||
.form-label + & {
|
||||
margin-top: -.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Form control
|
||||
*/
|
||||
.form-control {
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0 1000px #fff inset;
|
||||
box-shadow: 0 0 0 1000px #ffffff inset;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
@@ -23,6 +48,10 @@ textarea {
|
||||
color: $text-muted;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&[size] {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-light {
|
||||
@@ -55,23 +84,99 @@ textarea {
|
||||
Form help
|
||||
*/
|
||||
.form-help {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: $h5-font-size;
|
||||
line-height: 1rem;
|
||||
display: inline-flex;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
font-size: .75rem;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: $gray-100;
|
||||
background: $gray-200;
|
||||
border-radius: 50%;
|
||||
transition: .3s background-color, .3s color;
|
||||
|
||||
&:hover,
|
||||
&[aria-describedby] {
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Form switch
|
||||
*/
|
||||
.form-check-input {
|
||||
color: $form-check-input-checked-bg-color;
|
||||
|
||||
&:checked {
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check .form-check-input:not(:checked) ~ .form-check-label {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
/**
|
||||
Input group
|
||||
*/
|
||||
.input-group-prepend .input-group-text {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.input-group-flat {
|
||||
&:focus-within {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
border-radius: $input-border-radius;
|
||||
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border-color: $input-focus-border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
border-color: $input-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
margin-right: 0;
|
||||
|
||||
.input-group-text {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
margin-left: 0;
|
||||
|
||||
.input-group-text {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background: transparent;
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
|
||||
@each $name, $value in (0: 0, xs: .25rem, sm: .5rem, lg: 1rem, xl: 1.5rem) {
|
||||
@each $name, $value in (0: 0, xs: .25rem, sm: .5rem, md: 1.5rem, lg: 3rem) {
|
||||
.row-#{$name} {
|
||||
margin-right: (-$value);
|
||||
margin-left: -($value);
|
||||
|
||||
+4
-3
@@ -143,8 +143,9 @@
|
||||
|
||||
|
||||
.list-group-transparent {
|
||||
margin: 0 (- $list-group-item-padding-x);
|
||||
|
||||
.list-group-item {
|
||||
padding: .5rem 1rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
@@ -155,8 +156,8 @@
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $primary;
|
||||
background: rgba($primary, .06);
|
||||
color: inherit;
|
||||
background: $active-bg;
|
||||
|
||||
.icon {
|
||||
color: inherit;
|
||||
|
||||
+30
-6
@@ -1,9 +1,33 @@
|
||||
.modal-backdrop {
|
||||
backdrop-filter: blur(2px);
|
||||
background: $light-black;
|
||||
.modal-header,
|
||||
.modal-body {
|
||||
padding-left: $modal-inner-padding-x;
|
||||
padding-right: $modal-inner-padding-x;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
.modal-header {
|
||||
.close {
|
||||
font-size: 1rem;
|
||||
padding-right: $modal-inner-padding-x;
|
||||
margin-right: (- $modal-inner-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: $h3-font-size;
|
||||
font-weight: $headings-font-weight;
|
||||
color: $headings-color;
|
||||
line-height: (24/18);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding-left: $modal-inner-padding-x - $modal-footer-margin-between / 2;
|
||||
padding-right: $modal-inner-padding-x - $modal-footer-margin-between / 2;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: $min-black;
|
||||
}
|
||||
|
||||
.modal-blur {
|
||||
backdrop-filter: blur($modal-backdrop-blur);
|
||||
}
|
||||
|
||||
+14
-15
@@ -1,26 +1,25 @@
|
||||
$payment-icons: ('2checkout-dark', '2checkout', 'alipay-dark', 'alipay', 'amazon-dark', 'amazon', 'americanexpress-dark', 'americanexpress', 'applepay-dark', 'applepay', 'bancontact-dark', 'bancontact', 'bitcoin-dark', 'bitcoin', 'bitpay-dark', 'bitpay', 'cirrus-dark', 'cirrus', 'clickandbuy-dark', 'clickandbuy', 'coinkite-dark', 'coinkite', 'dinersclub-dark', 'dinersclub', 'directdebit-dark', 'directdebit', 'discover-dark', 'discover', 'dwolla-dark', 'dwolla', 'ebay-dark', 'ebay', 'eway-dark', 'eway', 'giropay-dark', 'giropay', 'googlewallet-dark', 'googlewallet', 'ingenico-dark', 'ingenico', 'jcb-dark', 'jcb', 'klarna-dark', 'klarna', 'laser-dark', 'laser', 'maestro-dark', 'maestro', 'mastercard-dark', 'mastercard', 'monero-dark', 'monero', 'neteller-dark', 'neteller', 'ogone-dark', 'ogone', 'okpay-dark', 'okpay', 'paybox-dark', 'paybox', 'paymill-dark', 'paymill', 'payone-dark', 'payone', 'payoneer-dark', 'payoneer', 'paypal-dark', 'paypal', 'paysafecard-dark', 'paysafecard', 'payu-dark', 'payu', 'payza-dark', 'payza', 'ripple-dark', 'ripple', 'sage-dark', 'sage', 'sepa-dark', 'sepa', 'shopify-dark', 'shopify', 'skrill-dark', 'skrill', 'solo-dark', 'solo', 'square-dark', 'square', 'stripe-dark', 'stripe', 'switch-dark', 'switch', 'ukash-dark', 'ukash', 'unionpay-dark', 'unionpay', 'verifone-dark', 'verifone', 'verisign-dark', 'verisign', 'visa-dark', 'visa', 'webmoney-dark', 'webmoney', 'westernunion-dark', 'westernunion', 'worldpay-dark', 'worldpay');
|
||||
|
||||
.payment {
|
||||
width: 2.5rem;
|
||||
height: 1.5rem;
|
||||
display: inline-block;
|
||||
background: no-repeat center/100% 100%;
|
||||
vertical-align: bottom;
|
||||
font-style: normal;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
|
||||
border-radius: 2px;
|
||||
|
||||
width: 2rem * 1.66666;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
background: no-repeat center/100% 100%;
|
||||
vertical-align: bottom;
|
||||
font-style: normal;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@each $payment in $payment-icons {
|
||||
.payment-#{$payment} {
|
||||
.payment-provider-#{$payment} {
|
||||
background-image: url("#{$assets-base}/img/payments/#{$payment}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $payment-size, $size in $payment-sizes {
|
||||
.payment-size-#{$payment-size} {
|
||||
width: $size * 1.66666;
|
||||
height: $size;
|
||||
}
|
||||
.payment-#{$payment-size} {
|
||||
width: $size * 1.66666;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
.popover {
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
.toast-header {
|
||||
user-select: none;
|
||||
}
|
||||
.toast button[data-dismiss="toast"]{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -125,6 +125,7 @@ Antialiasing
|
||||
Markdown
|
||||
*/
|
||||
.markdown {
|
||||
font-size: 1rem;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
Color Input
|
||||
*/
|
||||
.colorinput {
|
||||
.form-colorinput {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@@ -9,13 +9,13 @@ Color Input
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colorinput-input {
|
||||
.form-colorinput-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.colorinput-color {
|
||||
.form-colorinput-color {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
@@ -36,12 +36,12 @@ Color Input
|
||||
opacity: 0;
|
||||
transition: .3s opacity;
|
||||
|
||||
.colorinput-input:checked ~ & {
|
||||
.form-colorinput-input:checked ~ & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.colorinput-input:focus ~ & {
|
||||
.form-colorinput-input:focus ~ & {
|
||||
border-color: $primary;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
/**
|
||||
Image check
|
||||
*/
|
||||
.imagecheck {
|
||||
.form-imagecheck {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
.form-imagecheck-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.imagecheck-figure {
|
||||
.form-imagecheck-figure {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
@@ -21,12 +21,12 @@ Image check
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 3px;
|
||||
|
||||
.imagecheck-input:focus ~ & {
|
||||
.form-imagecheck-input:focus ~ & {
|
||||
border-color: $primary;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
.imagecheck-input:checked ~ & {
|
||||
.form-imagecheck-input:checked ~ & {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ Image check
|
||||
border-radius: 3px;
|
||||
transition: .3s opacity;
|
||||
|
||||
.imagecheck-input:checked ~ & {
|
||||
.form-imagecheck-input:checked ~ & {
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
background-repeat: $form-check-input-checked-bg-repeat;
|
||||
@@ -58,7 +58,7 @@ Image check
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck-image {
|
||||
.form-imagecheck-image {
|
||||
max-width: 100%;
|
||||
opacity: .64;
|
||||
transition: .3s opacity;
|
||||
@@ -73,23 +73,23 @@ Image check
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
.imagecheck:hover &,
|
||||
.imagecheck-input:focus ~ .imagecheck-figure &,
|
||||
.imagecheck-input:checked ~ .imagecheck-figure & {
|
||||
.form-imagecheck:hover &,
|
||||
.form-imagecheck-input:focus ~ .form-imagecheck-figure &,
|
||||
.form-imagecheck-input:checked ~ .form-imagecheck-figure & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck-caption {
|
||||
.form-imagecheck-caption {
|
||||
padding: .25rem;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
transition: .3s color;
|
||||
|
||||
.imagecheck:hover &,
|
||||
.imagecheck-input:focus ~ .imagecheck-figure &,
|
||||
.imagecheck-input:checked ~ .imagecheck-figure & {
|
||||
.form-imagecheck:hover &,
|
||||
.form-imagecheck-input:focus ~ .form-imagecheck-figure &,
|
||||
.form-imagecheck-input:checked ~ .form-imagecheck-figure & {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,66 +1,23 @@
|
||||
/*
|
||||
Selectgroup
|
||||
Select group
|
||||
*/
|
||||
.selectgroup {
|
||||
.form-selectgroup {
|
||||
display: inline-flex;
|
||||
margin: 0 -.5rem -.5rem 0;
|
||||
}
|
||||
|
||||
.selectgroup-vertical {
|
||||
.form-selectgroup-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.selectgroup-item {
|
||||
.form-selectgroup-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
margin: 0 .5rem .5rem 0;
|
||||
}
|
||||
|
||||
.selectgroup-separated {
|
||||
margin: 0 -.5rem -.5rem 0;
|
||||
|
||||
.selectgroup-item {
|
||||
margin: 0 .5rem .5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup:not(.selectgroup-vertical):not(.selectgroup-separated) > .selectgroup-item {
|
||||
& + .selectgroup-item {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
&:not(:first-child) .selectgroup-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) .selectgroup-button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-vertical:not(.selectgroup-separated) > .selectgroup-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& + .selectgroup-item {
|
||||
margin-top: -1px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) .selectgroup-button {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) .selectgroup-button {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-input {
|
||||
.form-selectgroup-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -68,11 +25,11 @@ Selectgroup
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.selectgroup-button {
|
||||
.form-selectgroup-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: $input-height;
|
||||
padding: $input-btn-padding-y 1rem;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
font-size: $input-btn-font-size;
|
||||
line-height: $input-line-height;
|
||||
color: $text-muted;
|
||||
@@ -82,31 +39,102 @@ Selectgroup
|
||||
background: rgba(#fff, .064);
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: 3px;
|
||||
transition: border-color .3s, background .3s, color .3s;
|
||||
|
||||
.icon:only-child {
|
||||
margin: 0 -.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-input:checked + .selectgroup-button {
|
||||
.form-selectgroup-check {
|
||||
display: inline-block;
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
border: $form-check-input-border;
|
||||
vertical-align: middle;
|
||||
|
||||
.form-selectgroup-input[type="checkbox"] + .form-selectgroup-box & {
|
||||
border-radius: $form-check-input-border-radius;
|
||||
}
|
||||
|
||||
.form-selectgroup-input[type="radio"] + .form-selectgroup-box & {
|
||||
border-radius: $form-check-radio-border-radius;
|
||||
}
|
||||
|
||||
.form-selectgroup-input:checked + .form-selectgroup-box & {
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
background-repeat: $form-check-input-checked-bg-repeat;
|
||||
background-position: $form-check-input-checked-bg-position;
|
||||
background-size: $form-check-input-checked-bg-size;
|
||||
border-color: $form-check-input-checked-border-color;
|
||||
}
|
||||
|
||||
.form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-box & {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
}
|
||||
|
||||
.form-selectgroup-input[type="radio"]:checked + .form-selectgroup-box & {
|
||||
background-image: escape-svg($form-check-radio-checked-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
.form-selectgroup-input:checked + .form-selectgroup-box {
|
||||
z-index: 1;
|
||||
color: $primary;
|
||||
background: rgba($primary, .08);
|
||||
border-color: $primary;
|
||||
background: rgba($primary, .04);
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: 0 1px 1px 0 rgba($primary, .2);
|
||||
}
|
||||
|
||||
.selectgroup-input:focus + .selectgroup-button {
|
||||
.form-selectgroup-input:focus + .form-selectgroup-box {
|
||||
z-index: 2;
|
||||
color: $primary;
|
||||
border-color: $primary;
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
.selectgroup-pills {
|
||||
/**
|
||||
Alternate version of form select group
|
||||
*/
|
||||
.form-selectgroup-boxes {
|
||||
.form-selectgroup-box {
|
||||
text-align: left;
|
||||
padding: $card-spacer-x $card-spacer-y;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-selectgroup-box-content {
|
||||
opacity: .64;
|
||||
transition: .3s opacity;
|
||||
}
|
||||
|
||||
.form-selectgroup-input:checked {
|
||||
+ .form-selectgroup-box {
|
||||
color: $body-color;
|
||||
|
||||
.form-selectgroup-box-content {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Select group
|
||||
*/
|
||||
.form-selectgroup-pills {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
.selectgroup-item {
|
||||
.form-selectgroup-item {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.selectgroup-button {
|
||||
.form-selectgroup-box {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,3 +7,9 @@
|
||||
color: #fff;
|
||||
background-color: $light-black;
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
+7
-21
@@ -1,30 +1,16 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
/**
|
||||
COLORS VARIATIONS
|
||||
*/
|
||||
@if $enable-color-hues {
|
||||
@each $color, $value in $colors {
|
||||
.bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
|
||||
.bg-#{$color}-light { background: mix($value, #fff, 70%); }
|
||||
.bg-#{$color}-dark { background: mix($value, #000, 80%); }
|
||||
.bg-#{$color}-darker { background: mix($value, #000, 40%); }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
SOCIAL COLORS
|
||||
*/
|
||||
@if $enable-social-colors {
|
||||
@each $color, $value in $social-colors {
|
||||
.bg-#{$color} {
|
||||
color: #fff !important;
|
||||
background: $value !important;
|
||||
}
|
||||
@each $color, $value in $social-colors {
|
||||
.bg-#{$color} {
|
||||
color: #fff !important;
|
||||
background: $value !important;
|
||||
}
|
||||
|
||||
.text-#{$color} {
|
||||
color: $value !important;
|
||||
}
|
||||
.text-#{$color} {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,11 +7,14 @@ Scrollable
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.hover {
|
||||
overflow-y: hidden;
|
||||
|
||||
> * {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@@ -19,6 +22,7 @@ Scrollable
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.touch & {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
Vendored
+2
@@ -20,6 +20,8 @@
|
||||
font-size: $input-font-size;
|
||||
box-shadow: none;
|
||||
line-height: $input-line-height;
|
||||
background-color: inherit !important;
|
||||
color: inherit !important;
|
||||
|
||||
.selectize-control.single & {
|
||||
background: $form-select-bg escape-svg($form-select-indicator) $form-select-background;
|
||||
|
||||
Reference in New Issue
Block a user