diff options
Diffstat (limited to 'pyblackbird_cc/static/scss/forms')
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_floating-labels.scss | 95 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_form-check.scss | 189 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_form-control.scss | 214 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_form-range.scss | 91 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_form-select.scss | 80 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_form-text.scss | 11 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_input-group.scss | 132 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_labels.scss | 36 | ||||
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_validation.scss | 12 |
9 files changed, 0 insertions, 860 deletions
diff --git a/pyblackbird_cc/static/scss/forms/_floating-labels.scss b/pyblackbird_cc/static/scss/forms/_floating-labels.scss deleted file mode 100644 index 2cf0470..0000000 --- a/pyblackbird_cc/static/scss/forms/_floating-labels.scss +++ /dev/null @@ -1,95 +0,0 @@ -.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; - } - } -} diff --git a/pyblackbird_cc/static/scss/forms/_form-check.scss b/pyblackbird_cc/static/scss/forms/_form-check.scss deleted file mode 100644 index 8a1b639..0000000 --- a/pyblackbird_cc/static/scss/forms/_form-check.scss +++ /dev/null @@ -1,189 +0,0 @@ -// -// 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)}; - } - } -} diff --git a/pyblackbird_cc/static/scss/forms/_form-control.scss b/pyblackbird_cc/static/scss/forms/_form-control.scss deleted file mode 100644 index 67ae5f4..0000000 --- a/pyblackbird_cc/static/scss/forms/_form-control.scss +++ /dev/null @@ -1,214 +0,0 @@ -// -// 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 <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); - - &[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; } -} diff --git a/pyblackbird_cc/static/scss/forms/_form-range.scss b/pyblackbird_cc/static/scss/forms/_form-range.scss deleted file mode 100644 index 4732213..0000000 --- a/pyblackbird_cc/static/scss/forms/_form-range.scss +++ /dev/null @@ -1,91 +0,0 @@ -// 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; - } - } -} diff --git a/pyblackbird_cc/static/scss/forms/_form-select.scss b/pyblackbird_cc/static/scss/forms/_form-select.scss deleted file mode 100644 index 69ace52..0000000 --- a/pyblackbird_cc/static/scss/forms/_form-select.scss +++ /dev/null @@ -1,80 +0,0 @@ -// 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)}; - } - } -} diff --git a/pyblackbird_cc/static/scss/forms/_form-text.scss b/pyblackbird_cc/static/scss/forms/_form-text.scss deleted file mode 100644 index f080d1a..0000000 --- a/pyblackbird_cc/static/scss/forms/_form-text.scss +++ /dev/null @@ -1,11 +0,0 @@ -// -// 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; -} diff --git a/pyblackbird_cc/static/scss/forms/_input-group.scss b/pyblackbird_cc/static/scss/forms/_input-group.scss deleted file mode 100644 index 58e4d40..0000000 --- a/pyblackbird_cc/static/scss/forms/_input-group.scss +++ /dev/null @@ -1,132 +0,0 @@ -// -// 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); - } -} diff --git a/pyblackbird_cc/static/scss/forms/_labels.scss b/pyblackbird_cc/static/scss/forms/_labels.scss deleted file mode 100644 index 39ecafc..0000000 --- a/pyblackbird_cc/static/scss/forms/_labels.scss +++ /dev/null @@ -1,36 +0,0 @@ -// -// 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); -} diff --git a/pyblackbird_cc/static/scss/forms/_validation.scss b/pyblackbird_cc/static/scss/forms/_validation.scss deleted file mode 100644 index c48123a..0000000 --- a/pyblackbird_cc/static/scss/forms/_validation.scss +++ /dev/null @@ -1,12 +0,0 @@ -// 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 |