mirror of
https://github.com/empayre/fleet.git
synced 2024-11-07 09:18:59 +00:00
028b968ff5
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).
126 lines
2.2 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|