576 lines
8.2 KiB
SCSS
Executable File
576 lines
8.2 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: colour(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: colour(faint_grey);
|
|
color: colour(darkest_grey);
|
|
|
|
&:focus,
|
|
&:active {
|
|
background: darken(colour(faint_grey), 3%);
|
|
}
|
|
}
|
|
|
|
&::placeholder {
|
|
color: rgba(128, 128, 128, 0.6);
|
|
}
|
|
|
|
&:-ms-input-placeholder {
|
|
color: rgba(128, 128, 128, 0.6);
|
|
}
|
|
|
|
&::-ms-input-placeholder {
|
|
color: rgba(128, 128, 128, 0.6);
|
|
}
|
|
}
|
|
|
|
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: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 6px;
|
|
background: colour(white);
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
background: colour(mid_grey);
|
|
}
|
|
|
|
.light-theme & {
|
|
& + .label:before {
|
|
background: colour(faint_grey);
|
|
}
|
|
|
|
&:checked + .label:after {
|
|
background: colour(darkest_grey);
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
background: colour(grey);
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]{
|
|
& + .label:before {
|
|
font-family: "Material Icons";
|
|
font-size: 14px;
|
|
content: '';
|
|
color: colour(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: colour(mid_grey);
|
|
}
|
|
|
|
.light-theme & {
|
|
& + .label:before {
|
|
background: colour(faint_grey);
|
|
color: colour(darkest_grey);
|
|
}
|
|
|
|
&:focus + .label:before,
|
|
&:active + .label:before {
|
|
color: colour(white);
|
|
background: colour(grey);
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
max-width: 100%;
|
|
|
|
option {
|
|
background: colour(white);
|
|
color: colour(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: colour(red);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@include animate();
|
|
@include feature_font();
|
|
@include noselect();
|
|
font-size: 14px;
|
|
color: colour(black);
|
|
display: inline-block;
|
|
padding: 9px 30px 7px;
|
|
margin: 0 20px 10px 0;
|
|
box-sizing: border-box;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
border: 0 !important;
|
|
cursor: pointer;
|
|
letter-spacing: -0.01rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
|
|
.icon {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
&:not(.button--no-hover){
|
|
@include gradient_overlay(3px, 0.05);
|
|
}
|
|
|
|
.notouch &:not(.button--no-hover):hover {
|
|
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
|
|
|
|
&:before {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
@include noanimate();
|
|
transform: translate(1px,1px);
|
|
}
|
|
|
|
.light-theme &--default {
|
|
background: colour(dark_grey);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: colour(black);
|
|
}
|
|
}
|
|
|
|
&--small {
|
|
padding: 6px 18px 4px;
|
|
}
|
|
|
|
&--large {
|
|
padding: 16px 50px 14px;
|
|
}
|
|
|
|
&--pull-right {
|
|
margin-right: 0;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&--primary {
|
|
background: colour(turquoise);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: darken(colour(turquoise), 10%);
|
|
}
|
|
}
|
|
|
|
&--darken {
|
|
background: rgba(0,0,0,0.8);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: rgba(0,0,0,0);
|
|
}
|
|
}
|
|
|
|
&--lighten {
|
|
background: rgba(255,255,255,0.8);
|
|
color: colour(darkest_grey);
|
|
}
|
|
|
|
&--secondary {
|
|
background: colour(blue);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: darken(colour(blue), 10%);
|
|
}
|
|
}
|
|
|
|
&--default,
|
|
&--white {
|
|
background: colour(white);
|
|
color: colour(black);
|
|
|
|
&:active {
|
|
background: darken(colour(white), 10%);
|
|
}
|
|
}
|
|
|
|
&--grey {
|
|
background: colour(grey);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: darken(colour(grey), 10%);
|
|
}
|
|
}
|
|
|
|
&--black {
|
|
background: colour(darkest_grey);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: darken(colour(darkest_grey), 10%);
|
|
}
|
|
}
|
|
|
|
&--confirming,
|
|
&--destructive {
|
|
background: colour(red);
|
|
color: colour(white);
|
|
|
|
&:active {
|
|
background: darken(colour(red), 10%);
|
|
}
|
|
}
|
|
|
|
&--timing-out {
|
|
position: relative;
|
|
|
|
&:before {
|
|
@include animate_timeout(2s);
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
background: colour(black);
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
&--discrete {
|
|
background: transparent;
|
|
color: colour(white);
|
|
|
|
.light-theme & {
|
|
color: colour(darkest_grey);
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--working {
|
|
position: relative;
|
|
cursor: wait !important;
|
|
background: colour(grey);
|
|
color: colour(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: colour(mid_grey);
|
|
border-color: colour(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;
|
|
|
|
.icon {
|
|
font-size: 0.9em;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
}
|
|
|
|
& > .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;
|
|
}
|
|
|
|
&.button-wrapper {
|
|
.button {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
display: block;
|
|
padding: 6px 0 4px;
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,0.6);
|
|
|
|
&.error {
|
|
color: colour(red);
|
|
display: inline-block;
|
|
opacity: 1;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
|
|
&--block {
|
|
.label,
|
|
label {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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: colour(blue);
|
|
}
|
|
|
|
.input-range__slider-container {
|
|
.input-range__slider {
|
|
cursor: col-resize;
|
|
background: colour(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;
|
|
}
|
|
}
|
|
}
|
|
} |