File manager - Edit - /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/_forms.scss.tar
Back
home/aissorg/public_html/scss/custom-styles/components/_forms.scss 0000644 00000020532 15116247710 0021630 0 ustar 00 /* * * Form styles */ // RD Form .rd-form { position: relative; text-align: left; .button { min-height: $form-input-height; } .button-icon-only { padding-top: 11px; padding-bottom: 11px; } } * + .rd-form { margin-top: 20px; } input:-webkit-autofill ~ label, input:-webkit-autofill ~ .form-validation { color: $black !important; } // // Form wrap // .form-wrap { position: relative; &.has-error { .form-input { border-color: $form-feedback-invalid-color; } } &.has-focus { .form-input { border-color: $form-feedback-focus-color; } } } // Form wrap offset * + .form-wrap { margin-top: 24px; } // Form input .form-input { display: block; width: 100%; min-height: $form-input-height; padding: $form-input-padding-vertical $form-input-padding-horizontal; font-size: $form-input-font-size; font-weight: $form-input-font-weight; line-height: $form-input-line-height; color: $form-input-color; background-color: $form-input-background; background-image: none; border-radius: $form-input-border-radius; -webkit-appearance: none; transition: .3s ease-in-out; @if ($form-input-border) { border: $form-input-border; } &:focus { outline: 0; } } // Form textarea textarea.form-input { height: $form-textarea-default-height; min-height: $form-textarea-default-min-height; max-height: $form-textarea-default-max-height; resize: vertical; } // Form labels .form-label, .form-label-outside { margin-bottom: 0; font-weight: $form-input-font-weight; } .form-label { position: absolute; top: $form-input-height / 2; left: 0; right: 0; padding-left: $form-input-padding-horizontal; padding-right: $form-input-padding-horizontal; font-size: $form-input-font-size; font-weight: $form-input-font-weight; line-height: $form-input-line-height; color: $form-input-color-placeholder; pointer-events: none; text-align: left; z-index: 9; transition: .25s; will-change: transform; transform: translateY(-50%); &.focus { opacity: 0; } &.auto-fill { color: $form-input-color; } } // Form label out of the field .form-label-outside { width: 100%; padding-right: 150px; margin-bottom: 4px; font-size: 14px; color: $gray-300; cursor: pointer; } .form-label-outside ~ .form-validation { top: 10px; } [data-x-mode='true'] { .form-label { pointer-events: auto; } } // // Form validation // .form-validation { position: absolute; right: 15px; top: 0; z-index: 11; margin-top: 3px; font-size: 10px; font-weight: 500; line-height: 12px; letter-spacing: 0; color: $form-feedback-invalid-color; transition: .3s; transform: scale3d(1, 1, 1); &:empty { transform: scale3d(1, 0, 1); } } .form-validation-left { .form-validation { top: 2px; bottom: auto; right: auto; left: 14px; } } // Form output #form-output-global { position: fixed; bottom: 30px; left: 15px; z-index: 2000; visibility: hidden; transform: translate3d(-500px, 0, 0); transition: .3s all ease; &.active { visibility: visible; transform: translate3d(0, 0, 0); } @include media-breakpoint-up(sm) { left: 30px; } } .form-output { position: absolute; top: 100%; left: 0; font-size: 10px; font-weight: 400; line-height: 1.2; margin-top: 2px; transition: .3s; opacity: 0; visibility: hidden; &.active { opacity: 1; visibility: visible; } &.error { color: $form-feedback-invalid-color; } &.success { color: $form-feedback-valid-color; } } // // Radio and Checkbox Custom // .radio .radio-custom, .radio-inline .radio-custom, .checkbox .checkbox-custom, .checkbox-inline .checkbox-custom { opacity: 0; &, &-dummy { position: absolute; left: 0; width: 14px; height: 14px; outline: none; cursor: pointer; } &-dummy { pointer-events: none; background: $white; &::after { position: absolute; opacity: 0; transition: .22s; } } &:focus { outline: none; } } .radio, .radio-inline, .checkbox, .checkbox-inline { input { @include sr-only; } } .radio-custom:checked + .radio-custom-dummy:after, .checkbox-custom:checked + .checkbox-custom-dummy:after { opacity: 1; } // // Custom Radio Styles // .radio, .radio-inline { padding-left: 28px; .radio-custom-dummy { top: 1px; left: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid $gray-400; &::after { content: ''; top: 3px; right: 3px; bottom: 3px; left: 3px; background: $gray-700; border-radius: inherit; } } } // // Custom Checkbox Styles // .checkbox, .checkbox-inline { padding-left: 28px; .checkbox-custom-dummy { left: 0; width: 18px; height: 18px; margin: 0; border: 1px solid $gray-400; &::after { content: '\f222'; font-family: $mdi; position: absolute; top: -1px; left: -2px; font-size: 20px; line-height: 18px; color: $gray-300; } } } // // Checkbox Toggle // .toggle-custom { padding-left: 60px; -webkit-appearance: none; &:checked ~ .checkbox-custom-dummy { &::after { background: $primary; transform: translate(20px, -50%); } } & ~ .checkbox-custom-dummy { $toggle-height: 20px; position: relative; display: inline-block; margin-top: -1px; width: 44px; height: $toggle-height; background: $form-input-background; cursor: pointer; &::after { content: ''; position: absolute; display: inline-block; width: $toggle-height - 4px; height: $toggle-height - 4px; left: 0; top: 50%; background: $gray-400; transform: translate(4px, -50%); opacity: 1; transition: .22s; } } } // // RD Form Inline // .form-inline { display: flex; flex-wrap: wrap; align-items: stretch; text-align: center; @include groupY(8px); > * { margin-top: 0; margin-right: -$form-input-border-radius; } .form-wrap { flex: 20 0; min-width: 220px; } .form-wrap-select { text-align: left; } .form-label { display: block; } .form-input { border-color: $form-input-background; } .form-button { flex-grow: 1; min-height: $form-input-height; .button { width: 100%; min-height: inherit; } } @include media-breakpoint-up(sm) { .button { display: block; } } &.form-inline-centered { justify-content: center; } } .single-page{ .form-inline{ > *{ margin-right: 0; } @media (min-width: 412px) { flex-direction: column; align-items: center; .form-wrap{ width: 100%; } } @include media-breakpoint-up(sm){ .form-wrap{ width: auto; } flex-direction: row; > *{ margin-left: -6px; } } } } // // Form Small // .form-sm { .form-input, .button { padding-top: 9px; padding-bottom: 9px; min-height: $form-input-sm-height; } .form-validation { top: -16px; } .form-label { top: $form-input-sm-height / 2; } * + .button { margin-top: 10px; } } // // Form Large // .form-lg { .form-input, .select2-container--default .select2-selection--single .select2-selection__rendered { padding-top: round(($form-input-lg-height - $form-input-line-height-base) / 2) - 1px; padding-bottom: round(($form-input-lg-height - $form-input-line-height-base) / 2) - 1px; } .form-input, .select2-container--default .select2-selection--single .select2-selection__rendered, .form-wrap-button { min-height: $form-input-lg-height; } .form-label { top: round($form-input-lg-height / 2); } } // // Form Layout 1 // .form-layout-1 { @include group(20px); > * { display: block; } .select-2-container { display: block; min-width: 100%; max-width: 100%; width: auto !important; } .form-wrap-button { display: flex; } .button { display: block; width: 100%; } } * + form.form-layout-1 { margin-top: 35px; } @include media-breakpoint-up(md) { .form-layout-1 { display: flex; > * { flex-shrink: 0; } .form-wrap-main { flex-grow: 1; } .form-wrap-select { width: 100%; max-width: 220px; } } } @include media-breakpoint-up(lg) { * + form.form-layout-1 { margin-top: 50px; } } home/aissorg/public_html/scss/bootstrap/mixins/_forms.scss 0000644 00000006410 15116247733 0020140 0 ustar 00 // Form control focus state // // Generate a customized focus state and for any input with the specified color, // which defaults to the `$input-focus-border-color` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on // WebKit's default styles, but applicable to a wider range of browsers. Its // usability and accessibility should be taken into account with any change. // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. @mixin form-control-focus() { &:focus { color: $input-focus-color; background-color: $input-focus-bg; border-color: $input-focus-border-color; outline: 0; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $input-box-shadow, $input-focus-box-shadow; } @else { box-shadow: $input-focus-box-shadow; } } } @mixin form-validation-state($state, $color) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; font-size: $form-feedback-font-size; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible padding: .5rem; margin-top: .1rem; font-size: .875rem; line-height: 1; color: #fff; background-color: rgba($color, .8); border-radius: .2rem; } .form-control, .custom-select { .was-validated &:#{$state}, &.is-#{$state} { border-color: $color; &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } } .form-check-input { .was-validated &:#{$state}, &.is-#{$state} { ~ .form-check-label { color: $color; } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } } .custom-control-input { .was-validated &:#{$state}, &.is-#{$state} { ~ .custom-control-label { color: $color; &::before { background-color: lighten($color, 25%); } } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } &:checked { ~ .custom-control-label::before { @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); } } } } // custom file .custom-file-input { .was-validated &:#{$state}, &.is-#{$state} { ~ .custom-file-label { border-color: $color; &::before { border-color: inherit; } } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } &:focus { ~ .custom-file-label { box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } } } home/aissorg/public_html/scss/bootstrap/_forms.scss 0000644 00000021613 15116256123 0016624 0 ustar 00 // stylelint-disable selector-no-qualifying-type // // Textual form controls // .form-control { display: block; width: 100%; padding: $input-padding-y $input-padding-x; font-size: $font-size-base; line-height: $input-line-height; color: $input-color; 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. @if $enable-rounded { // Manually use the if/else instead of the mixin to account for iOS override border-radius: $input-border-radius; } @else { // Otherwise undo the iOS default border-radius: 0; } @include box-shadow($input-box-shadow); @include transition($input-transition); // Unstyle the caret on `<select>`s in IE10+. &::-ms-expand { background-color: transparent; border: 0; } // Customize the `:focus` state to imitate native WebKit styles. @include form-control-focus(); // 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; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } } select.form-control { &:not([size]):not([multiple]) { height: $input-height; } &:focus::-ms-value { // Suppress the nested default white text on blue background highlight given to // the selected option text when the (still closed) <select> receives focus // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to // match the appearance of the native widget. // See https://github.com/twbs/bootstrap/issues/19398. color: $input-color; background-color: $input-bg; } } // Make file inputs better match text inputs by forcing them to new lines. .form-control-file, .form-control-range { display: block; width: 100%; } // // Labels // // 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: calc(#{$input-padding-y} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); margin-bottom: 0; // Override the `<label>/<legend>` default font-size: inherit; // Override the `<legend>` default line-height: $input-line-height; } .col-form-label-lg { padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); font-size: $font-size-lg; line-height: $input-line-height-lg; } .col-form-label-sm { padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); font-size: $font-size-sm; line-height: $input-line-height-sm; } // 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-top: $input-padding-y; padding-bottom: $input-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins line-height: $input-line-height; 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. // // The `.form-group-* form-control` variations are sadly duplicated to avoid the // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } select.form-control-sm { &:not([size]):not([multiple]) { height: $input-height-sm; } } .form-control-lg { padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } select.form-control-lg { &:not([size]):not([multiple]) { height: $input-height-lg; } } // Form groups // // Designed to help with the organization and spacing of vertical forms. For // horizontal forms, use the predefined grid classes. .form-group { margin-bottom: $form-group-margin-bottom; } .form-text { display: block; margin-top: $form-text-margin-top; } // Form grid // // Special replacement for our grid system's `.row` for tighter form layouts. .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; > .col, > [class*="col-"] { padding-right: 5px; padding-left: 5px; } } // Checkboxes and radios // // Indent the labels to position radios/checkboxes as hanging controls. .form-check { position: relative; display: block; padding-left: $form-check-input-gutter; } .form-check-input { position: absolute; margin-top: $form-check-input-margin-y; margin-left: -$form-check-input-gutter; &:disabled ~ .form-check-label { color: $text-muted; } } .form-check-label { margin-bottom: 0; // Override default `<label>` bottom margin } .form-check-inline { display: inline-flex; align-items: center; padding-left: 0; // Override base .form-check margin-right: $form-check-inline-margin-x; // Undo .form-check-input defaults and add some `margin-right`. .form-check-input { position: static; margin-top: 0; margin-right: $form-check-inline-input-margin-x; margin-left: 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. @include form-validation-state("valid", $form-feedback-valid-color); @include form-validation-state("invalid", $form-feedback-invalid-color); // Inline forms // // Make forms appear inline(-block) by adding the `.form-inline` class. Inline // forms begin stacked on extra small (mobile) devices and then go inline when // viewports reach <768px. // // Requires wrapping inputs and labels with `.form-group` for proper display of // default HTML form controls and our custom form controls (e.g., input groups). .form-inline { display: flex; flex-flow: row wrap; align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height) // Because we use flex, the initial sizing of checkboxes is collapsed and // doesn't occupy the full-width (which is what we want for xs grid tier), // so we force that here. .form-check { width: 100%; } // Kick in the inline @include media-breakpoint-up(sm) { label { display: flex; align-items: center; justify-content: center; margin-bottom: 0; } // Inline-block all the things for "inline" .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0; } // Allow folks to *not* use `.form-group` .form-control { display: inline-block; width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; } // Make static controls behave like regular ones .form-control-plaintext { display: inline-block; } .input-group { width: auto; } // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0; } .form-check-input { position: relative; margin-top: 0; margin-right: $form-check-input-margin-x; margin-left: 0; } .custom-control { align-items: center; justify-content: center; } .custom-control-label { margin-bottom: 0; } } }
| ver. 1.4 |
Github
|
.
| PHP 8.0.30 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings