m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Use mixins for typography instead of placeholder selectors (#9072)

Browse Source 
Using extend would not work inside of some css, namely
inside of media queries. This made it a clear choice to
use mixins for these styles.
This commit is contained in:
Brad Decker 2020-07-29 10:35:53 -05:00 committed by GitHub
parent 4cc3fff96a
commit 1582855e28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/modals/add-to-addressbook-modal/index.scss
View File

@ -9,7 +9,7 @@
border-bottom: 1px solid $Grey-100;
&__header {
@extend %H3;
@include H3;
}
}

2
ui/app/components/app/modals/new-account-modal/index.scss
View File

@ -9,7 +9,7 @@
border-bottom: 1px solid $Grey-100;
&__header {
@extend %H4;
@include H4;
font-weight: bold;
display: flex;

4
ui/app/components/app/permission-page-container/index.scss
View File

@ -31,7 +31,7 @@
}
&__title {
@extend %H4;
@include H4;
line-height: 25px;
text-align: center;
@ -84,7 +84,7 @@
}
&__permissions-header {
@extend %H6;
@include H6;
line-height: 20px;
color: #6a737d;

2
ui/app/components/app/permissions-connect-footer/index.scss
View File

@ -5,7 +5,7 @@
align-items: center;
&__text {
@extend %H7;
@include H7;
line-height: 17px;
color: #6a737d;

4
ui/app/components/app/permissions-connect-header/index.scss
View File

@ -26,7 +26,7 @@
}
&__title {
@extend %H3;
@include H3;
text-align: center;
color: $Black-100;
@ -35,7 +35,7 @@
&__text,
&__subtitle {
@extend %H6;
@include H6;
text-align: center;
color: $Grey-500;

7
ui/app/components/ui/button/buttons.scss
View File

@ -11,7 +11,7 @@ $hover-orange: #ffd3b5;
$warning-light-orange: #f8b588;
%button {
@extend %H6;
@include H6;
font-weight: 500;
font-family: Roboto, Arial;
@ -34,7 +34,7 @@ $warning-light-orange: #f8b588;
}
%link {
@extend %H4;
@include H4;
color: $Blue-500;
line-height: 1.25rem;
@ -60,7 +60,8 @@ $warning-light-orange: #f8b588;
%small-link {
@extend %link;
@extend %H6;
@include H6;
}
.button {

2
ui/app/components/ui/list-item/index.scss
View File

@ -5,7 +5,7 @@
background: #fff;
padding: 24px 16px;
@extend %Paragraph;
@include Paragraph;
border-top: 1px solid $mercury;
border-bottom: 1px solid $mercury;

4
ui/app/components/ui/popover/index.scss
View File

@ -33,7 +33,7 @@
align-items: center;
justify-content: space-between;
@extend %H4;
@include H4;
font-weight: bold;
line-height: 25px;
@ -51,7 +51,7 @@
}
&__subtitle {
@extend %H6;
@include H6;
line-height: 20px;
}

25
ui/app/css/design-system/typography.scss
View File

@ -70,7 +70,7 @@ $fa-font-path: 'fonts/fontawesome';
$font-family: Roboto, Helvetica, Arial, sans-serif;
// Typography
%H1 {
@mixin H1 {
font-style: normal;
font-weight: normal;
font-size: 2.5rem;
@ -78,7 +78,8 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H2 {
@mixin H2 {
font-style: normal;
font-weight: normal;
font-size: 2rem;
@ -86,7 +87,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H3 {
@mixin H3 {
font-style: normal;
font-weight: normal;
font-size: 1.5rem;
@ -94,7 +95,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H4 {
@mixin H4 {
font-style: normal;
font-weight: normal;
font-size: 1.125rem;
@ -102,7 +103,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H5 {
@mixin H5 {
font-style: normal;
font-weight: normal;
font-size: 1rem;
@ -110,14 +111,14 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H6 {
@mixin H6 {
font-style: normal;
font-weight: normal;
font-size: 0.875rem;
font-family: $font-family;
font-size: 0.875rem; // 14px @default
line-height: 140%;
}
%Paragraph {
@mixin Paragraph {
font-style: normal;
font-weight: normal;
font-size: 1rem;
@ -125,7 +126,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H7 {
@mixin H7 {
font-style: normal;
font-weight: normal;
font-size: 0.75rem;
@ -133,7 +134,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H8 {
@mixin H8 {
font-style: normal;
font-weight: normal;
font-size: 0.625rem;
@ -141,7 +142,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 140%;
}
%H9 {
@mixin H9 {
font-style: normal;
font-weight: normal;
font-size: 0.5rem;

3
ui/app/css/itcss/components/modal.scss
View File

@ -287,7 +287,8 @@
}
&__button {
@extend %Paragraph;
@include Paragraph;
@extend %button;
width: 141px;

2
ui/app/pages/home/index.scss
View File

@ -43,7 +43,7 @@
display: flex;
flex-direction: column;
@extend %H6;
@include H6;
padding-left: 24px;
padding-right: 24px;

10
ui/app/pages/permissions-connect/choose-account/index.scss
View File

@ -24,13 +24,13 @@
&__title {
@extend %H4;
@include H4;
}
&__text,
&__text-blue,
&__text-grey {
@extend %H6;
@include H6;
}
&__text-blue {
@ -120,7 +120,7 @@
}
&__label {
@extend %H6;
@include H6;
color: $Black-100;
text-overflow: ellipsis;
@ -129,13 +129,13 @@
}
&__balance {
@extend %H7;
@include H7;
color: $Grey-500;
}
&__last-connected {
@extend %H8;
@include H8;
display: flex;
flex-direction: column;

4
ui/app/pages/permissions-connect/index.scss
View File

@ -24,7 +24,7 @@
}
&__back {
@extend %H6;
@include H6;
color: $Grey-600;
cursor: pointer;
@ -35,7 +35,7 @@
}
&__page-count {
@extend %H7;
@include H7;
color: #6a737d;
grid-column: 2;

2
ui/app/pages/permissions-connect/redirect/index.scss
View File

@ -4,7 +4,7 @@
justify-content: center;
&__result {
@extend %H3;
@include H3;
position: absolute;
top: 30%;

8
ui/app/pages/send/send.scss
View File

@ -6,7 +6,7 @@
padding: 14px 0 3px 0;
.page-container__title {
@extend %H4;
@include H4;
text-align: center;
}
@ -91,7 +91,7 @@
}
&__group-label {
@extend %H8;
@include H8;
background-color: $Grey-000;
color: $Grey-600;
@ -136,7 +136,7 @@
}
&__subtitle {
@extend %H8;
@include H8;
color: $Grey-500;
}
@ -186,7 +186,7 @@
}
&__input {
@extend %H6;
@include H6;
flex: 1 1 auto;
width: 0;