fleet/frontend/styles/global/_global.scss
noahtalerman 028b968ff5
New styles for label creation form. (#101)
The goal of this PR is to update the styles of the LabelForm component.
Also include global style changes for form components (FormField, LabelForm, and others).
2020-12-07 15:08:59 -08:00

126 lines
2.2 KiB
SCSS

html {
position: relative;
min-width: $min-width;
height: 100%;
// Because iOS hates us we must fight to the death!
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// End Apple War
}
body {
color: $core-black;
padding: 0;
margin: 0;
font-family: 'Nunito Sans', sans-serif;
font-size: $medium;
min-width: $medium-width;
height: 100%;
}
html,
body {
height: 100%;
}
.wrapper,
.wrapper > div {
min-height: 100vh;
}
h1,
h2,
h3 {
line-height: 1.2;
}
h1 {
font-size: $large;
font-weight: $regular;
letter-spacing: -0.5px;
color: $core-black;
margin: 0;
}
a {
color: $core-purple;
}
.wrapper {
background: $core-gradient;
margin: 0;
}
.body-wrap {
padding: 50px 30px 0;
border-radius: 3px;
background-color: $white;
border: solid 1px $white;
min-width: 910px;
max-width: calc(100vw - #{$nav-width} - #{$pad-base});
@at-root {
.core-wrapper--small & {
max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-base});
}
.has-sidebar & {
margin-right: 0;
min-width: 610px;
// 62px includes
max-width: calc(100vw - #{$nav-width} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-width});
@at-root .core-wrapper--small & {
max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-tablet-width});
}
@include breakpoint(smalldesk) {
max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-tablet-width});
}
}
}
@include breakpoint(smalldesk) {
max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-base});
}
}
.has-sidebar {
display: flex;
height: 100%;
> * {
&:first-child {
flex-grow: 1;
align-self: flex-start;
margin-right: 0;
}
}
}
.cf {
@include clearfix;
}
input,
textarea,
button {
font-family: 'Nunito Sans', sans-serif;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: $core-dark-blue-grey !important; //sass-lint:disable-line no-important
}
}
input {
&[type=number] {
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
}