503 lines
7.0 KiB
SCSS
Executable File
503 lines
7.0 KiB
SCSS
Executable File
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
|
|
::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="date"],
|
|
input[type="file"],
|
|
select {
|
|
padding: 10px 14px;
|
|
background: rgba(255,255,255,0.1);
|
|
color: $white;
|
|
font-family: "Overpass", Helvetica, Arial, sans-serif;
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
letter-spacing: -0.01rem;
|
|
|
|
&:focus,
|
|
&:active {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&.tiny {
|
|
width: 50px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.light-theme & {
|
|
background: $faint_grey;
|
|
color: $darkest_grey;
|
|
|
|
&:focus,
|
|
&:active {
|
|
background: darken($faint_grey, 3%);
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"]{
|
|
-moz-appearance: textfield;
|
|
|
|
&::-webkit-inner-spin-button,
|
|
&::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
input[type="radio"]{
|
|
|
|
& + .label:before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
background: rgba(255,255,255,0.1);
|
|
top: 4px;
|
|
left: 0;
|
|
}
|
|
|
|
&:checked + .label:after {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 11px;
|
|
left: 7px;
|
|
background: $white;
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.light-theme & {
|
|
|
|
& + .label:before {
|
|
background: $faint_grey;
|
|
}
|
|
|
|
&:checked + .label:after {
|
|
background: $darkest_grey;
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
background: $grey;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]{
|
|
& + .label:before {
|
|
font-family: "Material Icons";
|
|
font-size: 14px;
|
|
content: '';
|
|
color: $white;
|
|
background: rgba(255,255,255,0.1);
|
|
display: inline-block;
|
|
padding: 0.2em;
|
|
height: 1.1em;
|
|
width: 1.1em;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&:checked + .label:before {
|
|
content: '\e5ca';
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.light-theme & {
|
|
& + .label:before {
|
|
background: $faint_grey;
|
|
color: $darkest_grey;
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
background: $grey;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
max-width: 100%;
|
|
|
|
option {
|
|
background: $white;
|
|
color: $darkest_grey;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.button-wrapper {
|
|
padding: 10px 0;
|
|
margin-top: -1px;
|
|
|
|
&.large {
|
|
padding: 16px 0;
|
|
}
|
|
}
|
|
|
|
.text-button {
|
|
cursor: pointer;
|
|
|
|
&.destructive {
|
|
color: $red;
|
|
}
|
|
}
|
|
|
|
.button,
|
|
button,
|
|
input[type="button"],
|
|
input[type="submit"] {
|
|
@include animate();
|
|
@include feature_font();
|
|
@include noselect();
|
|
font-size: 14px;
|
|
color: $black;
|
|
display: inline-block;
|
|
padding: 9px 30px 7px;
|
|
margin: 0 20px 10px 0;
|
|
background: $white;
|
|
box-sizing: border-box;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
border: 0 !important;
|
|
cursor: pointer;
|
|
letter-spacing: -0.01rem;
|
|
text-align: center;
|
|
|
|
.icon {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
&:not(.no-hover){
|
|
@include gradient_overlay(3px, 0.05);
|
|
}
|
|
|
|
.notouch &:not(.no-hover):hover {
|
|
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
|
|
|
|
&:before {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
@include noanimate();
|
|
background: darken($white, 5%);
|
|
transform: translate(1px,1px);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.light-theme & {
|
|
background: $dark_grey;
|
|
color: $white;
|
|
|
|
&:active {
|
|
background: $black;
|
|
}
|
|
}
|
|
|
|
&.small {
|
|
padding: 6px 18px 4px;
|
|
}
|
|
|
|
&.large {
|
|
padding: 16px 50px 14px;
|
|
}
|
|
|
|
&.pull-right {
|
|
margin-right: 0;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&.primary {
|
|
background: $turquoise;
|
|
color: $white;
|
|
}
|
|
|
|
&.white {
|
|
color: $black;
|
|
background: $white;
|
|
}
|
|
|
|
&.grey {
|
|
color: $white;
|
|
background: $grey;
|
|
}
|
|
|
|
&.black {
|
|
color: $white;
|
|
background: $darkest_grey;
|
|
}
|
|
|
|
&.confirming,
|
|
&.destructive {
|
|
background: $red;
|
|
color: $white;
|
|
}
|
|
|
|
&.alternative {
|
|
background: $blue;
|
|
color: $white;
|
|
}
|
|
|
|
&.timing-out {
|
|
position: relative;
|
|
&:before {
|
|
@include animate_timeout(2s);
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
background: $black;
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
&.discrete {
|
|
border: transparent;
|
|
|
|
&[disabled],
|
|
&[disabled="disabled"] {
|
|
border-color: $light_grey !important;
|
|
}
|
|
}
|
|
|
|
&.working {
|
|
position: relative;
|
|
cursor: wait !important;
|
|
background: $grey;
|
|
color: $mid_grey;
|
|
|
|
&:after {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
animation: slideloader 1s infinite linear;
|
|
background: rgba(200,200,200,0.3);
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
&.disabled,
|
|
&[disabled],
|
|
&[disabled="disabled"]{
|
|
opacity: 0.5;
|
|
cursor: not-allowed !important;
|
|
color: $mid_grey;
|
|
border-color: $mid_grey;
|
|
background: transparent;
|
|
|
|
&:before {
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
@include responsive($bp_medium){
|
|
margin-right: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
@include clearfix();
|
|
@include noselect();
|
|
display: block;
|
|
padding-bottom: 12px;
|
|
|
|
.icon {
|
|
padding-right: 0.32em;
|
|
}
|
|
|
|
& > .name {
|
|
display: block;
|
|
padding-top: 10px;
|
|
width: 20%;
|
|
float: left;
|
|
}
|
|
|
|
& > .input {
|
|
width: 80%;
|
|
float: left;
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.text {
|
|
display: block;
|
|
padding: 10px 14px 10px 0;
|
|
}
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.label {
|
|
.tooltip {
|
|
left: -4px;
|
|
}
|
|
}
|
|
|
|
&.sub-field {
|
|
padding: 0;
|
|
}
|
|
|
|
.description {
|
|
display: block;
|
|
padding: 6px 0 4px;
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,0.6);
|
|
|
|
&.error {
|
|
color: $red;
|
|
display: inline-block;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.radio,
|
|
&.checkbox {
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.input {
|
|
padding-top: 4px;
|
|
|
|
label:not(:last-child){
|
|
padding-right: 14px;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
display: inline-block;
|
|
float: none;
|
|
width: auto;
|
|
padding: 5px 5px 5px 28px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&.range {
|
|
position: relative;
|
|
|
|
.input-range {
|
|
height: auto;
|
|
}
|
|
|
|
.label {
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.input-range__track,
|
|
.input-range__slider-container {
|
|
transition: none;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.input-range__track--background {
|
|
margin: 0;
|
|
background: rgba(100,100,100,0.5);
|
|
}
|
|
|
|
.input-range__track--active {
|
|
background: $blue;
|
|
}
|
|
|
|
.input-range__slider-container {
|
|
.input-range__slider {
|
|
cursor: col-resize;
|
|
background: $blue;
|
|
border: none;
|
|
top: 0;
|
|
height: 6px;
|
|
width: 20px;
|
|
margin: -6px 0 0 0;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
&:last-child {
|
|
.input-range__slider {
|
|
border-radius: 0 3px 3px 0;
|
|
margin-left: -12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.light-theme & {
|
|
.description {
|
|
color: rgba(0,0,0,0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive($bp_medium){
|
|
.field {
|
|
|
|
.name {
|
|
float: none;
|
|
width: auto;
|
|
padding: 0 0 4px 0;
|
|
}
|
|
|
|
.input {
|
|
float: none;
|
|
width: auto;
|
|
|
|
.text {
|
|
padding: 0 20px 0 0;
|
|
}
|
|
}
|
|
}
|
|
} |