app/assets/stylesheets/framework/forms.scss
// scss-lint:disable PlaceholderInExtend
.alert-notice {
@extend .alert-primary;
}
.alert-alert {
@extend .alert-danger;
}
// scss-lint:enable PlaceholderInExtend
@media screen and (max-width: 375px) {
.g-recaptcha {
transform: scale(.85);
transform-origin: 0 0;
}
}
.form-group .input-group {
div[class^="validation-"], div[class$="-feedback"] {
padding-left: 0.75rem;
}
}
.form-group-2 {
margin-bottom: 1.5rem;
.form-control {
&.is-valid,
&.is-invalid {
border-color: $input-border-color;
}
&:focus {
border-color: $input-focus-border-color;
}
}
}
.form-control-label {
font-size: .875rem;
font-weight: 600;
color: #525f7f;
}
.heading-small {
font-size: .75rem;
font-weight: 600;
padding-top: .25rem;
padding-bottom: .25rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.content {
p {
font-weight: normal;
opacity: .8;
}
}
// TODO: remove unused
// This variable does not exist in /node_modules/bootstrap/scss/_variables.scss
// But it exists in source code
// https://github.com/twbs/bootstrap/blob/2317b7fc9636f6a17465d366ce6d73a0c93fee79/scss/_variables.scss#L448
$custom-control-description-disabled-color: #868e96;
//
// These variables can be used to customize the switch component.
//
$switch-height: calc(#{$input-height} * .8) !default;
$switch-height-sm: calc(#{$input-height-sm} * .8) !default;
$switch-height-lg: calc(#{$input-height-lg} * .8) !default;
$switch-border-radius: $switch-height !default;
$switch-bg: #868e96 !default;
$switch-checked-bg: $dodger-blue-3 !default;
$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
$switch-disabled-color: $custom-control-description-disabled-color !default;
$switch-thumb-bg: $white !default;
$switch-thumb-border-radius: 50% !default;
$switch-thumb-padding: 2px !default;
$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
$switch-transition: .2s all !default;
.switch {
font-size: $font-size-base;
position: relative;
input {
position: absolute;
height: 1px;
width: 1px;
background: none;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
padding: 0;
+ label {
position: relative;
min-width: calc(#{$switch-height} * 2);
border-radius: $switch-border-radius;
height: $switch-height;
line-height: $switch-height;
display: inline-block;
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
text-indent: calc(calc(#{$switch-height} * 2) + .5rem);
}
+ label::before,
+ label::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(#{$switch-height} * 2);
bottom: 0;
display: block;
}
+ label::before {
right: 0;
background-color: $switch-bg;
border-radius: $switch-border-radius;
transition: $switch-transition;
}
+ label::after {
top: $switch-thumb-padding;
left: $switch-thumb-padding;
width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
border-radius: $switch-thumb-border-radius;
background-color: $switch-thumb-bg;
transition: $switch-transition;
}
&:checked + label::before {
background-color: $switch-checked-bg;
}
&:checked + label::after {
margin-left: $switch-height;
}
&:disabled + label {
color: $switch-disabled-color;
cursor: not-allowed;
}
&:disabled + label::before {
background-color: $switch-disabled-bg;
}
}
// Small variation
&.switch-sm {
font-size: $font-size-sm;
input {
+ label {
min-width: calc(#{$switch-height-sm} * 2);
height: $switch-height-sm;
line-height: $switch-height-sm;
text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem);
}
+ label::before {
width: calc(#{$switch-height-sm} * 2);
}
+ label::after {
width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
}
&:checked + label::after {
margin-left: $switch-height-sm;
}
}
}
// Large variation
&.switch-lg {
font-size: $font-size-lg;
input {
+ label {
min-width: calc(#{$switch-height-lg} * 2);
height: $switch-height-lg;
line-height: $switch-height-lg;
text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem);
}
+ label::before {
width: calc(#{$switch-height-lg} * 2);
}
+ label::after {
width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
}
&:checked + label::after {
margin-left: $switch-height-lg;
}
}
}
+ .switch {
margin-left: 1rem;
}
}