338 lines
7.2 KiB
SCSS
338 lines
7.2 KiB
SCSS
/*
|
|
|
|
Base Form Elements
|
|
~~~~~~~~~~~~~~~~~~
|
|
|
|
*/
|
|
|
|
@import "../../styles/_global/all.scss";
|
|
|
|
$input-border-color: $color-grey-40;
|
|
$input-height: 42px;
|
|
$input-height--small: 34px;
|
|
$input-height--tiny: 22px;
|
|
$input-radius: 3px;
|
|
$input-background: #fff;
|
|
$button-background: $color-grey-50;
|
|
$button-background--primary: $color-blue-50;
|
|
$button-background--alpha: rgba(0, 0, 0, 0.02);
|
|
$button-background--dark: $color-grey-80;
|
|
$button-background--disabled: $color-grey-30;
|
|
$button-border--inverted: $color-grey-40;
|
|
$button-border--disabled: $color-grey-50;
|
|
$button-color--disabled: $color-grey-60;
|
|
$button-color--inverted: $color-grey-70;
|
|
|
|
.form-field {
|
|
&:not(:last-child) {
|
|
margin-bottom: 22px;
|
|
}
|
|
label {
|
|
color: $color-grey-80;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
sup {
|
|
color: $color-grey-60;
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
padding-top: 2px;
|
|
padding-bottom: 11px;
|
|
}
|
|
&.form-field--small {
|
|
input,
|
|
select {
|
|
font-size: 12px;
|
|
height: $input-height--small;
|
|
}
|
|
}
|
|
&-inset {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
padding: 11px;
|
|
&-list {
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 11px;
|
|
}
|
|
&-item-title {
|
|
font-weight: 600;
|
|
flex: 1;
|
|
}
|
|
&-item-action {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
&[data-extension] {
|
|
position: relative;
|
|
&:after {
|
|
background: $color-grey-30;
|
|
border-left: 1px solid $input-border-color;
|
|
bottom: 1px;
|
|
cursor: default;
|
|
color: $color-grey-70;
|
|
content: attr(data-extension);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: $input-height - 2px;
|
|
padding: 0 11px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
right: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Text-like Inputs
|
|
// ~~~~~~~~~~~~~~~~
|
|
input[type="text"],
|
|
input[type="number"],
|
|
textarea,
|
|
select {
|
|
background: $input-background;
|
|
border: 1px solid $input-border-color;
|
|
border-radius: $input-radius;
|
|
font-size: 14px;
|
|
height: $input-height;
|
|
outline: none;
|
|
padding: 0 14px;
|
|
transition-duration: 0.1s;
|
|
width: 100%;
|
|
&:focus {
|
|
border-color: $color-grey-60;
|
|
}
|
|
&::placeholder {
|
|
color: $color-grey-40;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
min-height: 144px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
// Buttons
|
|
// ~~~~~~~
|
|
input[type="button"],
|
|
button,
|
|
a.button {
|
|
background: $color-grey-50;
|
|
border: 1px solid $color-grey-60;
|
|
border-bottom-width: 3px;
|
|
border-radius: $input-radius;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
height: $input-height;
|
|
line-height: $input-height - 2px;
|
|
outline: 0;
|
|
padding: 0 5%;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
|
transition-duration: 0.1s;
|
|
white-space: nowrap;
|
|
&:active {
|
|
background: $color-grey-60;
|
|
border-bottom-width: 1px;
|
|
}
|
|
// Button Display Variations
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
&.button--inline {
|
|
display: inline-block;
|
|
}
|
|
&.button--wide {
|
|
width: 100%;
|
|
}
|
|
// Button Size Variations
|
|
// ~~~~~~~~~~~~~~~~~~~~~~
|
|
&.button--small {
|
|
height: $input-height--small;
|
|
line-height: $input-height--small - 2px;
|
|
}
|
|
&.button--tiny {
|
|
height: $input-height--tiny;
|
|
font-size: 12px;
|
|
line-height: $input-height--tiny - 2px;
|
|
}
|
|
// Button Disabled Variations
|
|
&[disabled] {
|
|
background: $button-background--disabled;
|
|
border-color: $button-border--disabled;
|
|
border-bottom-width: 1px;
|
|
color: $button-color--disabled;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
text-shadow: none;
|
|
}
|
|
// Button Color Variations
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~
|
|
&.button--primary {
|
|
background: $button-background--primary;
|
|
border-color: darken($button-background--primary, 8%);
|
|
&:hover {
|
|
background: darken($button-background--primary, 2%);
|
|
}
|
|
&:active {
|
|
background: darken($button-background--primary, 8%);
|
|
}
|
|
}
|
|
&.button--secondary {
|
|
background: linear-gradient(-180deg, #f9f9f9 0%, #f0f0f0 100%);
|
|
border-color: $color-grey-40;
|
|
border-radius: 5px;
|
|
color: $color-grey-80;
|
|
text-shadow: none;
|
|
}
|
|
&.button--alpha {
|
|
background: $button-background--alpha;
|
|
border-color: $color-grey-30;
|
|
border-width: 1px;
|
|
color: $color-grey-70;
|
|
text-shadow: none;
|
|
}
|
|
&.button--inverted {
|
|
background: transparent;
|
|
border-color: $button-border--inverted;
|
|
border-width: 1px;
|
|
color: $button-color--inverted;
|
|
text-shadow: none;
|
|
&:hover {
|
|
border-color: darken($button-border--inverted, 5%);
|
|
}
|
|
&:active {
|
|
background: $button-background--alpha;
|
|
}
|
|
}
|
|
&.button--dark {
|
|
background: $button-background--dark;
|
|
border-color: darken($button-background--dark, 10%);
|
|
&:hover {
|
|
background: darken($button-background--dark, 3%);
|
|
}
|
|
&:active {
|
|
background: darken($button-background--dark, 10%);
|
|
}
|
|
}
|
|
// Major variations
|
|
&.button--kiosk {
|
|
box-shadow: 0 1px 3px 0 rgba(105, 105, 105, 0.2);
|
|
height: 144px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 34px;
|
|
padding-left: 160px;
|
|
padding-top: 31px;
|
|
position: relative;
|
|
text-align: left;
|
|
width: 100%;
|
|
&:active {
|
|
> i {
|
|
top: 35px;
|
|
}
|
|
}
|
|
&[disabled],
|
|
&.is-disabled {
|
|
// it is expected when kiosk buttons are disabled
|
|
// that a context <p> will be provided
|
|
border-width: 1px;
|
|
box-shadow: none;
|
|
cursor: default;
|
|
padding-top: 22px;
|
|
strong,
|
|
sup,
|
|
> i {
|
|
opacity: 0.3;
|
|
}
|
|
sup {
|
|
font-size: 16px;
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
span {
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
pointer-events: auto;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
> i {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 100%;
|
|
font-size: 36px;
|
|
line-height: 73px;
|
|
text-align: center;
|
|
left: 50px;
|
|
top: 34px;
|
|
opacity: 0.3;
|
|
position: absolute;
|
|
width: 73px;
|
|
}
|
|
strong,
|
|
sup {
|
|
display: block;
|
|
line-height: normal;
|
|
}
|
|
strong {
|
|
font-size: 26px;
|
|
letter-spacing: 0.0125em;
|
|
margin-bottom: 8px;
|
|
}
|
|
sup {
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
&.button--icon {
|
|
box-shadow: 0 1px 3px 0 rgba(105, 105, 105, 0.2);
|
|
height: 84px;
|
|
margin-bottom: 15px;
|
|
padding-left: 160px;
|
|
padding-top: 26px;
|
|
padding-bottom: 23px;
|
|
position: relative;
|
|
text-align: left;
|
|
width: 100%;
|
|
> i {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 100%;
|
|
font-size: 36px;
|
|
line-height: 54px;
|
|
text-align: center;
|
|
left: 59px;
|
|
top: 13px;
|
|
opacity: 0.3;
|
|
position: absolute;
|
|
width: 54px;
|
|
}
|
|
strong {
|
|
display: block;
|
|
line-height: normal;
|
|
font-size: 26px;
|
|
letter-spacing: 0.0125em;
|
|
}
|
|
}
|
|
}
|