summaryrefslogtreecommitdiff
path: root/sass/components/forms
diff options
context:
space:
mode:
Diffstat (limited to 'sass/components/forms')
-rw-r--r--sass/components/forms/_checkboxes.scss200
-rw-r--r--sass/components/forms/_file-input.scss44
-rw-r--r--sass/components/forms/_forms.scss22
-rw-r--r--sass/components/forms/_input-fields.scss354
-rw-r--r--sass/components/forms/_radio-buttons.scss115
-rw-r--r--sass/components/forms/_range.scss161
-rw-r--r--sass/components/forms/_select.scss180
-rw-r--r--sass/components/forms/_switches.scss89
8 files changed, 1165 insertions, 0 deletions
diff --git a/sass/components/forms/_checkboxes.scss b/sass/components/forms/_checkboxes.scss
new file mode 100644
index 0000000..ddc7d96
--- /dev/null
+++ b/sass/components/forms/_checkboxes.scss
@@ -0,0 +1,200 @@
+/* Checkboxes
+ ========================================================================== */
+
+/* Remove default checkbox */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+// Checkbox Styles
+[type="checkbox"] {
+ // Text Label Style
+ + span:not(.lever) {
+ position: relative;
+ padding-left: 35px;
+ cursor: pointer;
+ display: inline-block;
+ height: 25px;
+ line-height: 25px;
+ font-size: 1rem;
+ user-select: none;
+ }
+
+ /* checkbox aspect */
+ + span:not(.lever):before,
+ &:not(.filled-in) + span:not(.lever):after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 18px;
+ z-index: 0;
+ border: 2px solid $radio-empty-color;
+ border-radius: 1px;
+ margin-top: 3px;
+ transition: .2s;
+ }
+
+ &:not(.filled-in) + span:not(.lever):after {
+ border: 0;
+ transform: scale(0);
+ }
+
+ &:not(:checked):disabled + span:not(.lever):before {
+ border: none;
+ background-color: $input-disabled-color;
+ }
+
+ // Focused styles
+ &.tabbed:focus + span:not(.lever):after {
+ transform: scale(1);
+ border: 0;
+ border-radius: 50%;
+ box-shadow: 0 0 0 10px rgba(0,0,0,.1);
+ background-color: rgba(0,0,0,.1);
+ }
+}
+
+[type="checkbox"]:checked {
+ + span:not(.lever):before {
+ top: -4px;
+ left: -5px;
+ width: 12px;
+ height: 22px;
+ border-top: 2px solid transparent;
+ border-left: 2px solid transparent;
+ border-right: $radio-border;
+ border-bottom: $radio-border;
+ transform: rotate(40deg);
+ backface-visibility: hidden;
+ transform-origin: 100% 100%;
+ }
+
+ &:disabled + span:before {
+ border-right: 2px solid $input-disabled-color;
+ border-bottom: 2px solid $input-disabled-color;
+ }
+}
+
+/* Indeterminate checkbox */
+[type="checkbox"]:indeterminate {
+ + span:not(.lever):before {
+ top: -11px;
+ left: -12px;
+ width: 10px;
+ height: 22px;
+ border-top: none;
+ border-left: none;
+ border-right: $radio-border;
+ border-bottom: none;
+ transform: rotate(90deg);
+ backface-visibility: hidden;
+ transform-origin: 100% 100%;
+ }
+
+ // Disabled indeterminate
+ &:disabled + span:not(.lever):before {
+ border-right: 2px solid $input-disabled-color;
+ background-color: transparent;
+ }
+}
+
+// Filled in Style
+[type="checkbox"].filled-in {
+ // General
+ + span:not(.lever):after {
+ border-radius: 2px;
+ }
+
+ + span:not(.lever):before,
+ + span:not(.lever):after {
+ content: '';
+ left: 0;
+ position: absolute;
+ /* .1s delay is for check animation */
+ transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
+ z-index: 1;
+ }
+
+ // Unchecked style
+ &:not(:checked) + span:not(.lever):before {
+ width: 0;
+ height: 0;
+ border: 3px solid transparent;
+ left: 6px;
+ top: 10px;
+ transform: rotateZ(37deg);
+ transform-origin: 100% 100%;
+ }
+
+ &:not(:checked) + span:not(.lever):after {
+ height: 20px;
+ width: 20px;
+ background-color: transparent;
+ border: 2px solid $radio-empty-color;
+ top: 0px;
+ z-index: 0;
+ }
+
+ // Checked style
+ &:checked {
+ + span:not(.lever):before {
+ top: 0;
+ left: 1px;
+ width: 8px;
+ height: 13px;
+ border-top: 2px solid transparent;
+ border-left: 2px solid transparent;
+ border-right: 2px solid $input-background;
+ border-bottom: 2px solid $input-background;
+ transform: rotateZ(37deg);
+ transform-origin: 100% 100%;
+ }
+
+ + span:not(.lever):after {
+ top: 0;
+ width: 20px;
+ height: 20px;
+ border: 2px solid $secondary-color;
+ background-color: $secondary-color;
+ z-index: 0;
+ }
+ }
+
+ // Focused styles
+ &.tabbed:focus + span:not(.lever):after {
+ border-radius: 2px;
+ border-color: $radio-empty-color;
+ background-color: rgba(0,0,0,.1);
+ }
+
+ &.tabbed:checked:focus + span:not(.lever):after {
+ border-radius: 2px;
+ background-color: $secondary-color;
+ border-color: $secondary-color;
+ }
+
+ // Disabled style
+ &:disabled:not(:checked) + span:not(.lever):before {
+ background-color: transparent;
+ border: 2px solid transparent;
+ }
+
+ &:disabled:not(:checked) + span:not(.lever):after {
+ border-color: transparent;
+ background-color: $input-disabled-solid-color;
+ }
+
+ &:disabled:checked + span:not(.lever):before {
+ background-color: transparent;
+ }
+
+ &:disabled:checked + span:not(.lever):after {
+ background-color: $input-disabled-solid-color;
+ border-color: $input-disabled-solid-color;
+ }
+}
diff --git a/sass/components/forms/_file-input.scss b/sass/components/forms/_file-input.scss
new file mode 100644
index 0000000..e0f7ef7
--- /dev/null
+++ b/sass/components/forms/_file-input.scss
@@ -0,0 +1,44 @@
+/* File Input
+ ========================================================================== */
+
+.file-field {
+ position: relative;
+
+ .file-path-wrapper {
+ overflow: hidden;
+ padding-left: 10px;
+ }
+
+ input.file-path { width: 100%; }
+
+ .btn {
+ float: left;
+ height: $input-height;
+ line-height: $input-height;
+ }
+
+ span {
+ cursor: pointer;
+ }
+
+ input[type=file] {
+
+ // Needed to override webkit button
+ &::-webkit-file-upload-button {
+ display: none;
+ }
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ font-size: 20px;
+ cursor: pointer;
+ opacity: 0;
+ filter: alpha(opacity=0);
+ }
+}
diff --git a/sass/components/forms/_forms.scss b/sass/components/forms/_forms.scss
new file mode 100644
index 0000000..4c19f4c
--- /dev/null
+++ b/sass/components/forms/_forms.scss
@@ -0,0 +1,22 @@
+// Remove Focus Boxes
+select:focus {
+ outline: $select-focus;
+}
+
+button:focus {
+ outline: none;
+ background-color: $button-background-focus;
+}
+
+label {
+ font-size: $label-font-size;
+ color: $input-border-color;
+}
+
+@import 'input-fields';
+@import 'radio-buttons';
+@import 'checkboxes';
+@import 'switches';
+@import 'select';
+@import 'file-input';
+@import 'range';
diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss
new file mode 100644
index 0000000..f18c2f8
--- /dev/null
+++ b/sass/components/forms/_input-fields.scss
@@ -0,0 +1,354 @@
+/* Text Inputs + Textarea
+ ========================================================================== */
+
+/* Style Placeholders */
+
+::placeholder {
+ color: $placeholder-text-color;
+}
+
+/* Text inputs */
+
+input:not([type]),
+input[type=text]:not(.browser-default),
+input[type=password]:not(.browser-default),
+input[type=email]:not(.browser-default),
+input[type=url]:not(.browser-default),
+input[type=time]:not(.browser-default),
+input[type=date]:not(.browser-default),
+input[type=datetime]:not(.browser-default),
+input[type=datetime-local]:not(.browser-default),
+input[type=tel]:not(.browser-default),
+input[type=number]:not(.browser-default),
+input[type=search]:not(.browser-default),
+textarea.materialize-textarea {
+
+ // General Styles
+ background-color: transparent;
+ border: none;
+ border-bottom: $input-border;
+ border-radius: 0;
+ outline: none;
+ height: $input-height;
+ width: 100%;
+ font-size: $input-font-size;
+ margin: $input-margin;
+ padding: $input-padding;
+ box-shadow: none;
+ box-sizing: content-box;
+ transition: box-shadow .3s, border .3s;
+
+ // Disabled input style
+ &:disabled,
+ &[readonly="readonly"] {
+ color: $input-disabled-color;
+ border-bottom: $input-disabled-border;
+ }
+
+ // Disabled label style
+ &:disabled+label,
+ &[readonly="readonly"]+label {
+ color: $input-disabled-color;
+ }
+
+ // Focused input style
+ &:focus:not([readonly]) {
+ border-bottom: 1px solid $input-focus-color;
+ box-shadow: 0 1px 0 0 $input-focus-color;
+ }
+
+ // Focused label style
+ &:focus:not([readonly])+label {
+ color: $input-focus-color;
+ }
+
+ // Hide helper text on data message
+ &.valid ~ .helper-text[data-success],
+ &:focus.valid ~ .helper-text[data-success],
+ &.invalid ~ .helper-text[data-error],
+ &:focus.invalid ~ .helper-text[data-error] {
+ @extend %hidden-text;
+ }
+
+ // Valid Input Style
+ &.valid,
+ &:focus.valid {
+ @extend %valid-input-style;
+ }
+
+ // Custom Success Message
+ &.valid ~ .helper-text:after,
+ &:focus.valid ~ .helper-text:after {
+ @extend %custom-success-message;
+ }
+ &:focus.valid ~ label {
+ color: $input-success-color;
+ }
+
+ // Invalid Input Style
+ &.invalid,
+ &:focus.invalid {
+ @extend %invalid-input-style;
+ }
+
+ // Custom Error message
+ &.invalid ~ .helper-text:after,
+ &:focus.invalid ~ .helper-text:after {
+ @extend %custom-error-message;
+ }
+ &:focus.invalid ~ label {
+ color: $input-error-color;
+ }
+
+ // Full width label when using validate for error messages
+ &.validate + label {
+ width: 100%;
+ }
+
+ // Form Message Shared Styles
+ & + label:after {
+ @extend %input-after-style;
+ }
+}
+
+
+/* Validation Sass Placeholders */
+%valid-input-style {
+ border-bottom: 1px solid $input-success-color;
+ box-shadow: 0 1px 0 0 $input-success-color;
+}
+%invalid-input-style {
+ border-bottom: $input-invalid-border;
+ box-shadow: 0 1px 0 0 $input-error-color;
+}
+%hidden-text {
+ color: transparent;
+ user-select: none;
+ pointer-events: none;
+}
+%custom-success-message {
+ content: attr(data-success);
+ color: $input-success-color;
+}
+%custom-error-message {
+ content: attr(data-error);
+ color: $input-error-color;
+}
+%input-after-style {
+ display: block;
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 0;
+ opacity: 0;
+ transition: .2s opacity ease-out, .2s color ease-out;
+}
+
+
+// Styling for input field wrapper
+.input-field {
+ // Inline styles
+ &.inline {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 5px;
+
+ input,
+ .select-dropdown {
+ margin-bottom: 1rem;
+ }
+ }
+
+ // Gutter spacing
+ &.col {
+ label {
+ left: $gutter-width / 2;
+ }
+
+ .prefix ~ label,
+ .prefix ~ .validate ~ label {
+ width: calc(100% - 3rem - #{$gutter-width});
+ }
+ }
+
+ position: relative;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+
+ & > label {
+ color: $input-border-color;
+ position: absolute;
+ top: 0;
+ left: 0;
+ font-size: 1rem;
+ cursor: text;
+ transition: transform .2s ease-out, color .2s ease-out;
+ transform-origin: 0% 100%;
+ text-align: initial;
+ transform: translateY(12px);
+
+ &:not(.label-icon).active {
+ transform: translateY(-14px) scale(.8);
+ transform-origin: 0 0;
+ }
+ }
+
+ // Autofill + date + time inputs
+ & > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
+ & > input[type=date]:not(.browser-default) + label,
+ & > input[type=time]:not(.browser-default) + label {
+ transform: translateY(-14px) scale(.8);
+ transform-origin: 0 0;
+ }
+
+ .helper-text {
+ &::after {
+ opacity: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ position: relative;
+ min-height: 18px;
+ display: block;
+ font-size: 12px;
+ color: rgba(0,0,0,.54);
+ }
+
+ // Prefix Icons
+ .prefix {
+ position: absolute;
+ width: $input-height;
+ font-size: $input-icon-size;
+ transition: color .2s;
+ top: ($input-height - $input-icon-size) / 2;
+
+ &.active { color: $input-focus-color; }
+ }
+
+ .prefix ~ input,
+ .prefix ~ textarea,
+ .prefix ~ label,
+ .prefix ~ .validate ~ label,
+ .prefix ~ .helper-text,
+ .prefix ~ .autocomplete-content {
+ margin-left: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
+ }
+
+ .prefix ~ label { margin-left: 3rem; }
+
+ @media #{$medium-and-down} {
+ .prefix ~ input {
+ width: 86%;
+ width: calc(100% - 3rem);
+ }
+ }
+
+ @media #{$small-and-down} {
+ .prefix ~ input {
+ width: 80%;
+ width: calc(100% - 3rem);
+ }
+ }
+}
+
+
+/* Search Field */
+
+.input-field input[type=search] {
+ display: block;
+ line-height: inherit;
+ transition: .3s background-color;
+
+ .nav-wrapper & {
+ height: inherit;
+ padding-left: 4rem;
+ width: calc(100% - 4rem);
+ border: 0;
+ box-shadow: none;
+ }
+
+ &:focus:not(.browser-default) {
+ background-color: $input-background;
+ border: 0;
+ box-shadow: none;
+ color: #444;
+
+ & + label i,
+ & ~ .mdi-navigation-close,
+ & ~ .material-icons {
+ color: #444;
+ }
+ }
+
+ & + .label-icon {
+ transform: none;
+ left: 1rem;
+ }
+
+ & ~ .mdi-navigation-close,
+ & ~ .material-icons {
+ position: absolute;
+ top: 0;
+ right: 1rem;
+ color: transparent;
+ cursor: pointer;
+ font-size: $input-icon-size;
+ transition: .3s color;
+ }
+}
+
+
+/* Textarea */
+
+// Default textarea
+textarea {
+ width: 100%;
+ height: $input-height;
+ background-color: transparent;
+
+ &.materialize-textarea {
+ line-height: normal;
+ overflow-y: hidden; /* prevents scroll bar flash */
+ padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
+ resize: none;
+ min-height: $input-height;
+ box-sizing: border-box;
+ }
+}
+
+// For textarea autoresize
+.hiddendiv {
+ visibility: hidden;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
+ padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+
+ // Reduces repaints
+ position: absolute;
+ top: 0;
+ z-index: -1;
+}
+
+
+/* Autocomplete */
+.autocomplete-content {
+ li {
+ .highlight { color: #444; }
+
+ img {
+ height: $dropdown-item-height - 10;
+ width: $dropdown-item-height - 10;
+ margin: 5px 15px;
+ }
+ }
+}
+
+/* Character Counter */
+.character-counter {
+ min-height: 18px;
+}
diff --git a/sass/components/forms/_radio-buttons.scss b/sass/components/forms/_radio-buttons.scss
new file mode 100644
index 0000000..c9f7296
--- /dev/null
+++ b/sass/components/forms/_radio-buttons.scss
@@ -0,0 +1,115 @@
+/* Radio Buttons
+ ========================================================================== */
+
+// Remove default Radio Buttons
+[type="radio"]:not(:checked),
+[type="radio"]:checked {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+[type="radio"]:not(:checked) + span,
+[type="radio"]:checked + span {
+ position: relative;
+ padding-left: 35px;
+ cursor: pointer;
+ display: inline-block;
+ height: 25px;
+ line-height: 25px;
+ font-size: 1rem;
+ transition: .28s ease;
+ user-select: none;
+}
+
+[type="radio"] + span:before,
+[type="radio"] + span:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 4px;
+ width: 16px;
+ height: 16px;
+ z-index: 0;
+ transition: .28s ease;
+}
+
+/* Unchecked styles */
+[type="radio"]:not(:checked) + span:before,
+[type="radio"]:not(:checked) + span:after,
+[type="radio"]:checked + span:before,
+[type="radio"]:checked + span:after,
+[type="radio"].with-gap:checked + span:before,
+[type="radio"].with-gap:checked + span:after {
+ border-radius: 50%;
+}
+
+[type="radio"]:not(:checked) + span:before,
+[type="radio"]:not(:checked) + span:after {
+ border: 2px solid $radio-empty-color;
+}
+
+[type="radio"]:not(:checked) + span:after {
+ transform: scale(0);
+}
+
+/* Checked styles */
+[type="radio"]:checked + span:before {
+ border: 2px solid transparent;
+}
+
+[type="radio"]:checked + span:after,
+[type="radio"].with-gap:checked + span:before,
+[type="radio"].with-gap:checked + span:after {
+ border: $radio-border;
+}
+
+[type="radio"]:checked + span:after,
+[type="radio"].with-gap:checked + span:after {
+ background-color: $radio-fill-color;
+}
+
+[type="radio"]:checked + span:after {
+ transform: scale(1.02);
+}
+
+/* Radio With gap */
+[type="radio"].with-gap:checked + span:after {
+ transform: scale(.5);
+}
+
+/* Focused styles */
+[type="radio"].tabbed:focus + span:before {
+ box-shadow: 0 0 0 10px rgba(0,0,0,.1);
+}
+
+/* Disabled Radio With gap */
+[type="radio"].with-gap:disabled:checked + span:before {
+ border: 2px solid $input-disabled-color;
+}
+
+[type="radio"].with-gap:disabled:checked + span:after {
+ border: none;
+ background-color: $input-disabled-color;
+}
+
+/* Disabled style */
+[type="radio"]:disabled:not(:checked) + span:before,
+[type="radio"]:disabled:checked + span:before {
+ background-color: transparent;
+ border-color: $input-disabled-color;
+}
+
+[type="radio"]:disabled + span {
+ color: $input-disabled-color;
+}
+
+[type="radio"]:disabled:not(:checked) + span:before {
+ border-color: $input-disabled-color;
+}
+
+[type="radio"]:disabled:checked + span:after {
+ background-color: $input-disabled-color;
+ border-color: $input-disabled-solid-color;
+}
diff --git a/sass/components/forms/_range.scss b/sass/components/forms/_range.scss
new file mode 100644
index 0000000..18607f5
--- /dev/null
+++ b/sass/components/forms/_range.scss
@@ -0,0 +1,161 @@
+/* Range
+ ========================================================================== */
+
+.range-field {
+ position: relative;
+}
+
+input[type=range],
+input[type=range] + .thumb {
+ @extend .no-select;
+ cursor: pointer;
+}
+
+input[type=range] {
+ position: relative;
+ background-color: transparent;
+ border: none;
+ outline: none;
+ width: 100%;
+ margin: 15px 0;
+ padding: 0;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+input[type=range] + .thumb {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ border: none;
+ height: 0;
+ width: 0;
+ border-radius: 50%;
+ background-color: $radio-fill-color;
+ margin-left: 7px;
+
+ transform-origin: 50% 50%;
+ transform: rotate(-45deg);
+
+ .value {
+ display: block;
+ width: 30px;
+ text-align: center;
+ color: $radio-fill-color;
+ font-size: 0;
+ transform: rotate(45deg);
+ }
+
+ &.active {
+ border-radius: 50% 50% 50% 0;
+
+ .value {
+ color: $input-background;
+ margin-left: -1px;
+ margin-top: 8px;
+ font-size: 10px;
+ }
+ }
+}
+
+// Shared
+@mixin range-track {
+ height: $track-height;
+ background: #c2c0c2;
+ border: none;
+}
+
+@mixin range-thumb {
+ border: none;
+ height: $range-height;
+ width: $range-width;
+ border-radius: 50%;
+ background: $radio-fill-color;
+ transition: box-shadow .3s;
+}
+
+// WebKit
+input[type=range] {
+ -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ @include range-track;
+}
+
+input[type=range]::-webkit-slider-thumb {
+ @include range-thumb;
+ -webkit-appearance: none;
+ background-color: $radio-fill-color;
+ transform-origin: 50% 50%;
+ margin: -5px 0 0 0;
+
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
+}
+
+// FireFox
+input[type=range] {
+ /* fix for FF unable to apply focus style bug */
+ border: 1px solid white;
+
+ /*required for proper track sizing in FF*/
+}
+
+input[type=range]::-moz-range-track {
+ @include range-track;
+}
+
+input[type=range]::-moz-focus-inner {
+ border: 0;
+}
+
+input[type=range]::-moz-range-thumb {
+ @include range-thumb;
+ margin-top: -5px;
+}
+
+// hide the outline behind the border
+input[type=range]:-moz-focusring {
+ outline: 1px solid #fff;
+ outline-offset: -1px;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
+}
+
+// IE 10+
+input[type=range]::-ms-track {
+ height: $track-height;
+
+ // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
+ background: transparent;
+
+ // leave room for the larger thumb to overflow with a transparent border */
+ border-color: transparent;
+ border-width: 6px 0;
+
+ /*remove default tick marks*/
+ color: transparent;
+}
+
+input[type=range]::-ms-fill-lower {
+ background: #777;
+}
+
+input[type=range]::-ms-fill-upper {
+ background: #ddd;
+}
+
+input[type=range]::-ms-thumb {
+ @include range-thumb;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
+ box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
+}
diff --git a/sass/components/forms/_select.scss b/sass/components/forms/_select.scss
new file mode 100644
index 0000000..2fd04d3
--- /dev/null
+++ b/sass/components/forms/_select.scss
@@ -0,0 +1,180 @@
+/* Select Field
+ ========================================================================== */
+
+select { display: none; }
+select.browser-default { display: block; }
+
+select {
+ background-color: $select-background;
+ width: 100%;
+ padding: $select-padding;
+ border: $select-border;
+ border-radius: $select-radius;
+ height: $input-height;
+}
+
+.select-label {
+ position: absolute;
+}
+
+.select-wrapper {
+ &.valid .helper-text[data-success],
+ &.invalid ~ .helper-text[data-error] {
+ @extend %hidden-text;
+ }
+
+ &.valid {
+ & > input.select-dropdown {
+ @extend %valid-input-style;
+ }
+
+ & ~ .helper-text:after {
+ @extend %custom-success-message;
+ }
+ }
+
+ &.invalid {
+ & > input.select-dropdown,
+ & > input.select-dropdown:focus {
+ @extend %invalid-input-style;
+ }
+
+ & ~ .helper-text:after {
+ @extend %custom-error-message;
+ }
+ }
+
+ &.valid + label,
+ &.invalid + label {
+ width: 100%;
+ pointer-events: none;
+ }
+
+ & + label:after {
+ @extend %input-after-style;
+ }
+
+ position: relative;
+
+ input.select-dropdown {
+ &:focus {
+ border-bottom: 1px solid $input-focus-color;
+ }
+ position: relative;
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+ border-bottom: $input-border;
+ outline: none;
+ height: $input-height;
+ line-height: $input-height;
+ width: 100%;
+ font-size: $input-font-size;
+ margin: $input-margin;
+ padding: 0;
+ display: block;
+ user-select:none;
+ z-index: 1;
+ }
+
+ .caret {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ z-index: 0;
+ fill: rgba(0,0,0,.87);
+ }
+
+ & + label {
+ position: absolute;
+ top: -26px;
+ font-size: $label-font-size;
+ }
+}
+
+// Disabled styles
+select:disabled {
+ color: $input-disabled-color;
+}
+
+.select-wrapper.disabled {
+ + label {
+ color: $input-disabled-color;
+ }
+ .caret {
+ fill: $input-disabled-color;
+ }
+}
+
+.select-wrapper input.select-dropdown:disabled {
+ color: $input-disabled-color;
+ cursor: default;
+ user-select: none;
+}
+
+.select-wrapper i {
+ color: $select-disabled-color;
+}
+
+.select-dropdown li.disabled,
+.select-dropdown li.disabled > span,
+.select-dropdown li.optgroup {
+ color: $select-disabled-color;
+ background-color: transparent;
+}
+
+body.keyboard-focused {
+ .select-dropdown.dropdown-content li:focus {
+ background-color: $select-option-focus;
+ }
+}
+
+.select-dropdown.dropdown-content {
+ li {
+ &:hover {
+ background-color: $select-option-hover;
+ }
+
+ &.selected {
+ background-color: $select-option-selected;
+ }
+ }
+}
+
+// Prefix Icons
+.prefix ~ .select-wrapper {
+ margin-left: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
+}
+
+.prefix ~ label { margin-left: 3rem; }
+
+// Icons
+.select-dropdown li {
+ img {
+ height: $dropdown-item-height - 10;
+ width: $dropdown-item-height - 10;
+ margin: 5px 15px;
+ float: right;
+ }
+}
+
+// Optgroup styles
+.select-dropdown li.optgroup {
+ border-top: 1px solid $dropdown-hover-bg-color;
+
+ &.selected > span {
+ color: rgba(0, 0, 0, .7);
+ }
+
+ & > span {
+ color: rgba(0, 0, 0, .4);
+ }
+
+ & ~ li.optgroup-option {
+ padding-left: 1rem;
+ }
+}
diff --git a/sass/components/forms/_switches.scss b/sass/components/forms/_switches.scss
new file mode 100644
index 0000000..3296b12
--- /dev/null
+++ b/sass/components/forms/_switches.scss
@@ -0,0 +1,89 @@
+/* Switch
+ ========================================================================== */
+
+.switch,
+.switch * {
+ -webkit-tap-highlight-color: transparent;
+ user-select: none;
+}
+
+.switch label {
+ cursor: pointer;
+}
+
+.switch label input[type=checkbox] {
+ opacity: 0;
+ width: 0;
+ height: 0;
+
+ &:checked + .lever {
+ background-color: $switch-checked-lever-bg;
+
+ &:before, &:after {
+ left: 18px;
+ }
+
+ &:after {
+ background-color: $switch-bg-color;
+ }
+ }
+}
+
+.switch label .lever {
+ content: "";
+ display: inline-block;
+ position: relative;
+ width: 36px;
+ height: 14px;
+ background-color: $switch-unchecked-lever-bg;
+ border-radius: $switch-radius;
+ margin-right: 10px;
+ transition: background 0.3s ease;
+ vertical-align: middle;
+ margin: 0 16px;
+
+ &:before, &:after {
+ content: "";
+ position: absolute;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ left: 0;
+ top: -3px;
+ transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
+ }
+
+ &:before {
+ background-color: transparentize($switch-bg-color, .85);
+ }
+
+ &:after {
+ background-color: $switch-unchecked-bg;
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+ }
+}
+
+// Switch active style
+input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
+input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
+ transform: scale(2.4);
+ background-color: transparentize($switch-bg-color, .85);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:active:before,
+input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
+ transform: scale(2.4);
+ background-color: rgba(0,0,0,.08);
+}
+
+// Disabled Styles
+.switch input[type=checkbox][disabled] + .lever {
+ cursor: default;
+ background-color: rgba(0,0,0,.12);
+}
+
+.switch label input[type=checkbox][disabled] + .lever:after,
+.switch label input[type=checkbox][disabled]:checked + .lever:after {
+ background-color: $input-disabled-solid-color;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-01 03:03:30 +0000