initial commit, add Publish, add minimal theme, add content
This commit is contained in:
Felix Förtsch
Executable
+142
@@ -0,0 +1,142 @@
|
||||
//
|
||||
// Check/radio
|
||||
//
|
||||
|
||||
.form-check {
|
||||
display: block;
|
||||
min-height: $form-check-min-height;
|
||||
padding-left: $form-check-padding-left;
|
||||
margin-bottom: $form-check-margin-bottom;
|
||||
|
||||
.form-check-input {
|
||||
float: left;
|
||||
margin-left: $form-check-padding-left * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
|
||||
vertical-align: top;
|
||||
background-color: $form-check-input-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border: $form-check-input-border;
|
||||
appearance: none;
|
||||
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-blacklist
|
||||
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 {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
|
||||
} @else {
|
||||
background-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 {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
~ .form-check-label {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: $form-check-label-color;
|
||||
cursor: $form-check-label-cursor;
|
||||
}
|
||||
|
||||
//
|
||||
// Switch
|
||||
//
|
||||
|
||||
.form-switch {
|
||||
padding-left: $form-switch-padding-left;
|
||||
|
||||
.form-check-input {
|
||||
width: $form-switch-width;
|
||||
margin-left: $form-switch-padding-left * -1;
|
||||
background-image: escape-svg($form-switch-bg-image);
|
||||
background-position: left center;
|
||||
@include border-radius($form-switch-border-radius);
|
||||
|
||||
&:focus {
|
||||
background-image: escape-svg($form-switch-focus-bg-image);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-position: $form-switch-checked-bg-position;
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-switch-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: $form-check-inline-margin-right;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
Executable
+116
@@ -0,0 +1,116 @@
|
||||
//
|
||||
// Textual form controls
|
||||
//
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: $input-height;
|
||||
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;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
appearance: none; // Fix appearance for date inputs in Safari
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius, 0);
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only 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,
|
||||
&[readonly] {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
&.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.form-control-color {
|
||||
max-width: 3rem;
|
||||
padding: $input-padding-y;
|
||||
}
|
||||
|
||||
.form-control-color::-moz-color-swatch {
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
.form-control-color::-webkit-color-swatch {
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
Executable
+91
@@ -0,0 +1,91 @@
|
||||
.form-file {
|
||||
--bs-form-file-height: #{$form-file-height};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-file-input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: var(--bs-form-file-height);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus-within ~ .form-file-label {
|
||||
border-color: $form-file-focus-border-color;
|
||||
box-shadow: $form-file-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled] ~ .form-file-label .form-file-text,
|
||||
&:disabled ~ .form-file-label .form-file-text {
|
||||
background-color: $form-file-disabled-bg;
|
||||
border-color: $form-file-disabled-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: var(--bs-form-file-height);
|
||||
border-color: $form-file-border-color;
|
||||
@include border-radius($form-file-border-radius);
|
||||
@include box-shadow($form-file-box-shadow);
|
||||
}
|
||||
|
||||
.form-file-text {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
padding: $form-file-padding-y $form-file-padding-x;
|
||||
overflow: hidden;
|
||||
font-family: $form-file-font-family;
|
||||
font-weight: $form-file-font-weight;
|
||||
line-height: $form-file-line-height;
|
||||
color: $form-file-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: $form-file-bg;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: $form-file-border-width;
|
||||
@include border-left-radius(inherit);
|
||||
}
|
||||
|
||||
.form-file-button {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
padding: $form-file-padding-y $form-file-padding-x;
|
||||
margin-left: -$form-file-border-width;
|
||||
line-height: $form-file-line-height;
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: $form-file-border-width;
|
||||
@include border-right-radius(inherit);
|
||||
}
|
||||
|
||||
.form-file-sm {
|
||||
--bs-form-file-height: #{$form-file-height-sm};
|
||||
@include font-size($form-file-font-size-sm);
|
||||
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
padding: $form-file-padding-y-sm $form-file-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-lg {
|
||||
--bs-form-file-height: #{$form-file-height-lg};
|
||||
@include font-size($form-file-font-size-lg);
|
||||
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
padding: $form-file-padding-y-lg $form-file-padding-x-lg;
|
||||
}
|
||||
}
|
||||
Executable
+136
@@ -0,0 +1,136 @@
|
||||
// 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
|
||||
background-color: transparent;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
// 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; }
|
||||
&::-ms-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) / 2; // Webkit specific
|
||||
@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);
|
||||
appearance: none;
|
||||
|
||||
&: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;
|
||||
@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);
|
||||
appearance: none;
|
||||
|
||||
&: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);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
width: $form-range-thumb-width;
|
||||
height: $form-range-thumb-height;
|
||||
margin-top: 0; // Edge specific
|
||||
margin-right: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
|
||||
margin-left: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
|
||||
@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);
|
||||
appearance: none;
|
||||
|
||||
&:active {
|
||||
@include gradient-bg($form-range-thumb-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: $form-range-track-width;
|
||||
height: $form-range-track-height;
|
||||
color: transparent;
|
||||
cursor: $form-range-track-cursor;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-width: $form-range-thumb-height / 2;
|
||||
@include box-shadow($form-range-track-box-shadow);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: $form-range-track-bg;
|
||||
@include border-radius($form-range-track-border-radius);
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
margin-right: 15px; // arbitrary?
|
||||
background-color: $form-range-track-bg;
|
||||
@include border-radius($form-range-track-border-radius);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+82
@@ -0,0 +1,82 @@
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// https://primer.github.io/.
|
||||
|
||||
.form-select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $form-select-height;
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $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;
|
||||
vertical-align: middle;
|
||||
background-color: $form-select-bg;
|
||||
background-image: escape-svg($form-select-indicator);
|
||||
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);
|
||||
appearance: none;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// suppress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
height: auto;
|
||||
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 {
|
||||
height: $form-select-height-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);
|
||||
}
|
||||
|
||||
.form-select-lg {
|
||||
height: $form-select-height-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);
|
||||
}
|
||||
Executable
+11
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
Executable
+140
@@ -0,0 +1,140 @@
|
||||
//
|
||||
// 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-file {
|
||||
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-file .form-file-input:focus ~ .form-file-label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Bring the custom file input above the label
|
||||
> .form-file {
|
||||
> .form-file-input:focus {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&:not(:last-child) > .form-file-label {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
&:not(:first-child) > .form-file-label {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 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: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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-padding-y $input-padding-x;
|
||||
@include font-size($input-font-size); // Match inputs
|
||||
font-weight: $font-weight-normal;
|
||||
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 {
|
||||
min-height: $input-height-lg;
|
||||
}
|
||||
|
||||
.input-group-lg > .form-select {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
|
||||
.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 {
|
||||
min-height: $input-height-sm;
|
||||
}
|
||||
|
||||
.input-group-sm > .form-select {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
|
||||
.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(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
|
||||
> .dropdown-toggle:nth-last-child(n + 3) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
> :not(:first-child):not(.dropdown-menu) {
|
||||
margin-left: -$input-border-width;
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
Executable
+36
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// 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 `<legend>` default
|
||||
@include font-size(inherit); // Override the `<legend>` 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);
|
||||
}
|
||||
Executable
+12
@@ -0,0 +1,12 @@
|
||||
// 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, map-get($data, color), map-get($data, icon));
|
||||
}
|
||||
// scss-docs-end form-validation-states-loop
|
||||
Reference in New Issue
Block a user