mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
23ce98ec51
This is the first PR as a part of the Fleet UI Refresh #38. Changes include: - Add Nunito Sans font files and modify global styles to reflect the font change. - Modify global font variables to reflect new sizing and weight naming conventions. -- New sizing and naming conventions: --- SIZE: xx-small: 12px, x-small: 14px, small: 16px, medium: 20px, large: 24px, x-large: 28px --- WEIGHT: regular: 400, bold: 700 - Remove the old Oxygen font files. Changes to other style sheets reflect the changes to the new font sizing and weight naming conventions for global variables. The changes don't necessarily use the correct size (as illustrated by mockups). Those "up to spec" sizing changes are to come.
83 lines
1.6 KiB
SCSS
83 lines
1.6 KiB
SCSS
.input-field {
|
|
transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
|
|
line-height: 34px;
|
|
background-color: $white;
|
|
border: solid 1px $accent-medium;
|
|
font-size: 16px;
|
|
padding: $pad-xsmall 12px;
|
|
color: $text-dark;
|
|
font-family: 'Nunito Sans', sans-serif;
|
|
box-sizing: border-box;
|
|
height: 40px;
|
|
|
|
::placeholder {
|
|
color: $accent-text;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
|
|
border-color: $link-light;
|
|
border-bottom-color: $brand;
|
|
}
|
|
|
|
&--disabled {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
&--error {
|
|
transition: background 150ms ease-in-out, color 150ms ease-in-out;
|
|
border-color: $alert;
|
|
background-color: $alert-light;
|
|
color: $white;
|
|
box-shadow: inset 0 -4px 4px 0 rgba($black, 0.1);
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
|
|
border-bottom-color: $alert;
|
|
background-color: $white;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
&--password {
|
|
letter-spacing: 7px;
|
|
}
|
|
|
|
&__textarea {
|
|
min-height: 100px;
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
&__label {
|
|
display: block;
|
|
font-size: $medium;
|
|
font-weight: $regular;
|
|
color: $text-dark;
|
|
margin-bottom: $pad-xsmall;
|
|
|
|
&--error {
|
|
color: $alert;
|
|
}
|
|
}
|
|
|
|
&__wrapper {
|
|
margin-bottom: $pad-base;
|
|
}
|
|
|
|
&__hint {
|
|
font-size: 14px;
|
|
font-weight: $regular;
|
|
line-height: 1.57;
|
|
letter-spacing: 1px;
|
|
color: $accent-text;
|
|
|
|
code {
|
|
color: $brand;
|
|
background-color: $accent-light;
|
|
padding: 2px;
|
|
font-family: 'SourceCodePro', $monospace;
|
|
}
|
|
}
|
|
}
|