mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Move generic button components and body styles to components and generic, respectively
This commit is contained in:
sdtsui
parent
04d1d86f30
commit
a0a956d646
@ -5,195 +5,23 @@
|
||||
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
|
||||
*/
|
||||
|
||||
@import 'settings/index.scss';
|
||||
@import 'tools/index.scss';
|
||||
@import 'generic/index.scss';
|
||||
@import 'base/index.scss';
|
||||
@import 'objects/index.scss';
|
||||
@import 'components/index.scss';
|
||||
@import 'trumps/index.scss';
|
||||
|
||||
@import './itcss/settings/index.scss';
|
||||
@import './itcss/tools/index.scss';
|
||||
@import './itcss/generic/index.scss';
|
||||
@import './itcss/base/index.scss';
|
||||
@import './itcss/objects/index.scss';
|
||||
@import './itcss/components/index.scss';
|
||||
@import './itcss/trumps/index.scss';
|
||||
|
||||
@import './fonts.scss';
|
||||
@import './reset.scss';
|
||||
@import './lib.scss';
|
||||
@import './transitions.scss';
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat Regular', Arial;
|
||||
color: #4D4D4D;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
background: #F7F7F7;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.app-root {
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.app-primary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.full-size {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-flex-height {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
overflow-x: hidden;
|
||||
min-width: 357px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// TODO: remove/refactor for new design
|
||||
|
||||
// button, input[type="submit"] {
|
||||
// font-family: 'Montserrat Bold';
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
// padding: 8px 12px;
|
||||
// border: none;
|
||||
// color: white;
|
||||
// transform-origin: center center;
|
||||
// transition: transform 50ms ease-in;
|
||||
// /* default orange */
|
||||
// background: rgba(247, 134, 28, 1);
|
||||
// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
// }
|
||||
|
||||
.btn-green {
|
||||
background-color: #02C9B1; // TODO: reusable color in colors.css
|
||||
}
|
||||
|
||||
|
||||
button.btn-clear {
|
||||
background: white;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
// No longer used in flat design, remove when modal buttons done
|
||||
// div.wallet-btn {
|
||||
// border: 1px solid rgb(91, 93, 103);
|
||||
// border-radius: 2px;
|
||||
// height: 30px;
|
||||
// width: 75px;
|
||||
// font-size: 0.8em;
|
||||
// text-align: center;
|
||||
// line-height: 25px;
|
||||
// }
|
||||
|
||||
// .btn-red {
|
||||
// background: rgba(254, 35, 17, 1);
|
||||
// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
|
||||
// }
|
||||
|
||||
// button[disabled], input[type="submit"][disabled] {
|
||||
// cursor: not-allowed;
|
||||
// background: rgba(197, 197, 197, 1);
|
||||
// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
|
||||
// }
|
||||
|
||||
// button.spaced {
|
||||
// margin: 2px;
|
||||
// }
|
||||
|
||||
// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
|
||||
// transform: scale(1.1);
|
||||
// }
|
||||
// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
|
||||
// transform: scale(0.95);
|
||||
// }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: #df6b0e;
|
||||
}
|
||||
|
||||
/*
|
||||
app
|
||||
*/
|
||||
|
||||
.active {
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
padding: 8px 12px;
|
||||
background: #F7861C;
|
||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
padding: 8px 12px;
|
||||
// background: #FFFFFF; // $bg-white
|
||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
color: #585D67; // TODO: make reusable light button color
|
||||
font-size: 1.1em;
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #979797; // #TODO: make reusable light border color
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// TODO: cleanup: not used anywhere
|
||||
button.btn-thin {
|
||||
border: 1px solid;
|
||||
border-color: #4D4D4D;
|
||||
color: #4D4D4D;
|
||||
background: rgb(255, 174, 41);
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
margin: 12px 0;
|
||||
padding: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 6px 8px;
|
||||
// background: #EFEFEF; // $gallery
|
||||
@ -850,7 +678,7 @@ div.message-container > div:first-child {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
font-size: .7em;
|
||||
background: green;
|
||||
background: white;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
83
ui/app/css/itcss/components/buttons.scss
Normal file
83
ui/app/css/itcss/components/buttons.scss
Normal file
@ -0,0 +1,83 @@
|
||||
/*
|
||||
Buttons
|
||||
*/
|
||||
|
||||
.btn-green {
|
||||
background-color: #02C9B1; // TODO: reusable color in colors.css
|
||||
}
|
||||
|
||||
button.btn-clear {
|
||||
background: white;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
// No longer used in flat design, remove when modal buttons done
|
||||
// div.wallet-btn {
|
||||
// border: 1px solid rgb(91, 93, 103);
|
||||
// border-radius: 2px;
|
||||
// height: 30px;
|
||||
// width: 75px;
|
||||
// font-size: 0.8em;
|
||||
// text-align: center;
|
||||
// line-height: 25px;
|
||||
// }
|
||||
|
||||
// .btn-red {
|
||||
// background: rgba(254, 35, 17, 1);
|
||||
// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
|
||||
// }
|
||||
|
||||
// button[disabled], input[type="submit"][disabled] {
|
||||
// cursor: not-allowed;
|
||||
// background: rgba(197, 197, 197, 1);
|
||||
// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
|
||||
// }
|
||||
|
||||
// button.spaced {
|
||||
// margin: 2px;
|
||||
// }
|
||||
|
||||
// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
|
||||
// transform: scale(1.1);
|
||||
// }
|
||||
// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
|
||||
// transform: scale(0.95);
|
||||
// }
|
||||
|
||||
button.primary {
|
||||
padding: 8px 12px;
|
||||
background: #F7861C;
|
||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
padding: 8px 12px;
|
||||
// background: #FFFFFF; // $bg-white
|
||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||
color: #585D67; // TODO: make reusable light button color
|
||||
font-size: 1.1em;
|
||||
font-family: 'Montserrat Regular';
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #979797; // #TODO: make reusable light border color
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// TODO: cleanup: not used anywhere
|
||||
button.btn-thin {
|
||||
border: 1px solid;
|
||||
border-color: #4D4D4D;
|
||||
color: #4D4D4D;
|
||||
background: rgb(255, 174, 41);
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
margin: 12px 0;
|
||||
padding: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
@import './buttons.scss'
|
||||
@ -0,0 +1,50 @@
|
||||
// Generic styles
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat Regular', Arial;
|
||||
color: #4D4D4D;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
background: #F7F7F7;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.app-root {
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.app-primary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
overflow-x: hidden;
|
||||
min-width: 357px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: #df6b0e;
|
||||
}
|
||||
@ -1,5 +1,2 @@
|
||||
// Variables
|
||||
$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
|
||||
$rajah: #F5C26D; // formerly 'light orange (button shades)'
|
||||
$buttercup: #F5A623; // formerly 'dark orange (text)'
|
||||
$tundora: #4A4A4A; // formerly 'borders/font/any gray'
|
||||
@import './variables.scss';
|
||||
@import './typography.scss';
|
||||
|
||||
42
ui/app/css/itcss/settings/typography.scss
Normal file
42
ui/app/css/itcss/settings/typography.scss
Normal file
@ -0,0 +1,42 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
|
||||
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat Regular';
|
||||
src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 'small';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat Bold';
|
||||
src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat Light';
|
||||
src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat UltraLight';
|
||||
src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
|
||||
src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN OT';
|
||||
src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
4
ui/app/css/itcss/settings/variables.scss
Normal file
4
ui/app/css/itcss/settings/variables.scss
Normal file
@ -0,0 +1,4 @@
|
||||
$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
|
||||
$rajah: #F5C26D; // formerly 'light orange (button shades)'
|
||||
$buttercup: #F5A623; // formerly 'dark orange (text)'
|
||||
$tundora: #4A4A4A; // formerly 'borders/font/any gray'
|
||||
30
ui/app/css/itcss/tools/utilities.scss
Normal file
30
ui/app/css/itcss/tools/utilities.scss
Normal file
@ -0,0 +1,30 @@
|
||||
/*
|
||||
Utility Classes
|
||||
*/
|
||||
.full-size {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-flex-height {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/*
|
||||
Misc
|
||||
*/
|
||||
|
||||
// Move into component-level contextual 'active' state later
|
||||
.active {
|
||||
color: #909090;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user