v2 first commit

This commit is contained in:
denisdulici
2019-11-16 10:21:14 +03:00
parent 5b23e9c2c4
commit 6d50fa8442
3075 changed files with 3451681 additions and 65594 deletions

View File

@ -0,0 +1,47 @@
//
// Custom checkbox
//
.custom-checkbox {
.custom-control-input ~ .custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
height: $custom-control-indicator-size;
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}
// Color variations
@each $color, $value in $theme-colors {
.custom-checkbox-#{$color} {
@include custom-checkbox-variant($value);
}
}

View File

@ -0,0 +1,58 @@
//
// Custom control
// additional styles for custom checkboxes, radios and other
//
.custom-control-label {
// Background-color and (when enabled) gradient
&::before {
border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
@include transition($input-transition);
top:($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size - 1rem);
}
&::after{
top:($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size - 1rem);
}
span {
position: relative;
top: 2px;
}
}
.custom-control-label {
margin-bottom: 0;
}
// Alternative style
.custom-control-alternative {
.custom-control-label {
// Background-color and (when enabled) gradient
&::before {
border: 0;
box-shadow: $input-alternative-box-shadow;
}
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
box-shadow: $input-focus-alternative-box-shadow;
}
}
}
&:active~.custom-control-label::before,
&:focus~.custom-control-label::before {
box-shadow: $input-alternative-box-shadow;
}
}
}

View File

@ -0,0 +1,45 @@
//
// Custom checkbox
//
.custom-control {
padding-left: 1.75rem;
}
.custom-checkbox {
.custom-control-input ~ .custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
&:after,
&:before {
left: -1.75rem
}
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}

View File

@ -0,0 +1,38 @@
//
// Custom radio
//
.custom-radio {
.custom-control-input ~ .custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
height: $custom-control-indicator-size;
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-radio-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}

View File

@ -0,0 +1,122 @@
//
// Custom toggle
//
.custom-toggle {
position: relative;
display: inherit;
width: $custom-toggle-width;
height: 1.5rem;
margin: 0;
display: inline-block;
input {
display: none;
&:checked {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
&:before {
background: $custom-toggle-checked-bg;
transform: translateX(28px);
}
}
}
&:disabled {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
}
&:checked {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
&:before {
background-color: lighten($custom-control-indicator-checked-bg, 10%);
}
}
}
}
}
}
.custom-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: $custom-control-indicator-border-width solid $custom-toggle-border-color;
border-radius: 34px !important;
background-color: transparent;
&:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
border-radius: 50% !important;
background-color: $custom-toggle-slider-bg;
transition: $input-transition;
}
}
.custom-toggle-wrapper {
.custom-toggle + .custom-toggle {
margin-left: 1rem !important;
}
}
// Labeled toggles
.custom-toggle {
input {
&:checked {
+ .custom-toggle-slider {
&:after {
content: attr(data-label-on);
color: $custom-control-indicator-checked-border-color;
right: auto;
left: 0;
}
}
}
}
}
.custom-toggle-slider {
&:after {
color: $custom-toggle-border-color;
content: attr(data-label-off);
display: block;
font-family: inherit;
font-weight: 600;
font-size: .75rem;
line-height: 24px;
position: absolute;
right: 0;
margin: 0 .21667rem;
top: 0;
text-align: center;
min-width: 1.66667rem;
overflow: hidden;
@include transition($transition-base);
}
}
// Color variations
@each $color, $value in $theme-colors {
.custom-toggle-#{$color} {
@include custom-toggle-variant($value);
}
}