mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
35941f34dd
In our base stylesheets we set the `body` background color to white. This unfortunately also affected the preview area of Storybook. The Storybook preview only renders isolated components, but it does include all styles. To avoid this problem, the white background color has been moved to the `#app-content` div instead. All of our UI is inside this div.
144 lines
1.9 KiB
SCSS
144 lines
1.9 KiB
SCSS
/*
|
|
Generic
|
|
*/
|
|
|
|
@import './reset.scss';
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-family: Roboto, Arial;
|
|
color: #4d4d4d;
|
|
font-weight: 400;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 16px;
|
|
|
|
@media screen and (max-width: $break-small) {
|
|
overflow-y: overlay;
|
|
}
|
|
}
|
|
|
|
html {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.app-root {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.app-primary {
|
|
display: flex;
|
|
}
|
|
|
|
.mouse-user-styles {
|
|
button:focus,
|
|
input:focus,
|
|
textarea:focus,
|
|
.unit-input__input,
|
|
.account-list-item__account-primary-balance,
|
|
.account-list-item__input,
|
|
.currency-display__input
|
|
{
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable */
|
|
#app-content {
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f7f7f7;
|
|
|
|
@media screen and (max-width: $break-small) {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
/* stylelint-enable */
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
color: #df6b0e;
|
|
}
|
|
|
|
input.large-input,
|
|
textarea.large-input {
|
|
padding: 8px;
|
|
}
|
|
|
|
input.large-input {
|
|
height: 36px;
|
|
}
|
|
|
|
.allcaps {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.input-label {
|
|
padding-bottom: 10px;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
}
|
|
|
|
input.form-control {
|
|
padding-left: 10px;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
border: 1px solid $alto;
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
|
|
&::-webkit-input-placeholder {
|
|
font-weight: 100;
|
|
color: $dusty-gray;
|
|
}
|
|
|
|
&::-moz-placeholder {
|
|
font-weight: 100;
|
|
color: $dusty-gray;
|
|
}
|
|
|
|
&:-ms-input-placeholder {
|
|
font-weight: 100;
|
|
color: $dusty-gray;
|
|
}
|
|
|
|
&:-moz-placeholder {
|
|
font-weight: 100;
|
|
color: $dusty-gray;
|
|
}
|
|
|
|
&--error {
|
|
border: 1px solid $monzo;
|
|
}
|
|
}
|
|
|
|
.hide-text-overflow {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.pinned-to-bottom {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.pinned-to-bottom-right {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0;
|
|
}
|