mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-13 09:30:40 +00:00
style and compatibility update
This commit is contained in:
Patrick Jentsch
200
app/static/external/materialize/sass/components/forms/_checkboxes.scss
vendored
Normal file
200
app/static/external/materialize/sass/components/forms/_checkboxes.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
44
app/static/external/materialize/sass/components/forms/_file-input.scss
vendored
Normal file
44
app/static/external/materialize/sass/components/forms/_file-input.scss
vendored
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
22
app/static/external/materialize/sass/components/forms/_forms.scss
vendored
Normal file
22
app/static/external/materialize/sass/components/forms/_forms.scss
vendored
Normal file
@ -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';
|
||||
354
app/static/external/materialize/sass/components/forms/_input-fields.scss
vendored
Normal file
354
app/static/external/materialize/sass/components/forms/_input-fields.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
115
app/static/external/materialize/sass/components/forms/_radio-buttons.scss
vendored
Normal file
115
app/static/external/materialize/sass/components/forms/_radio-buttons.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
161
app/static/external/materialize/sass/components/forms/_range.scss
vendored
Normal file
161
app/static/external/materialize/sass/components/forms/_range.scss
vendored
Normal file
@ -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);
|
||||
}
|
||||
180
app/static/external/materialize/sass/components/forms/_select.scss
vendored
Normal file
180
app/static/external/materialize/sass/components/forms/_select.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
89
app/static/external/materialize/sass/components/forms/_switches.scss
vendored
Normal file
89
app/static/external/materialize/sass/components/forms/_switches.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user