diff options
author | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
commit | eeaddb27560d723ca7d61359744ceb2709fccd2d (patch) | |
tree | 04ddbc49ae7b73d5f5a9e1716d7227aecd3b9f85 /pyblackbird_cc/static/scss/forms/_form-control.scss | |
parent | 7a3044c859043837e6c7c95bb4894d04e9b2cbc2 (diff) |
Renamed from pyblackbird_cc to alphabetlearning - everywhere
Diffstat (limited to 'pyblackbird_cc/static/scss/forms/_form-control.scss')
-rw-r--r-- | pyblackbird_cc/static/scss/forms/_form-control.scss | 214 |
1 files changed, 0 insertions, 214 deletions
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; } -} |