TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates Typography Variables and styles. (#9017)

Browse Source 
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
feature/default_network_editable
Brad Decker 4 years ago committed by GitHub
parent 1747f91bf1
commit df8eb494fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 159 additions and 191 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ui/app/components/app/modals/add-to-addressbook-modal/index.scss
  2. 2
      ui/app/components/app/modals/new-account-modal/index.scss
  3. 4
      ui/app/components/app/permission-page-container/index.scss
  4. 3
      ui/app/components/app/permissions-connect-footer/index.scss
  5. 4
      ui/app/components/app/permissions-connect-header/index.scss
  6. 7
      ui/app/components/ui/button/buttons.scss
  7. 2
      ui/app/components/ui/list-item/index.scss
  8. 7
      ui/app/components/ui/popover/index.scss
  9. 3
      ui/app/css/itcss/components/modal.scss
  10. 1
      ui/app/css/itcss/settings/index.scss
  11. 84
      ui/app/css/itcss/settings/typography.scss
  12. 69
      ui/app/css/itcss/settings/variables.scss
  13. 1
      ui/app/css/variables/index.scss
  14. 130
      ui/app/css/variables/typography.scss
  15. 3
      ui/app/pages/home/index.scss
  16. 13
      ui/app/pages/permissions-connect/choose-account/index.scss
  17. 5
      ui/app/pages/permissions-connect/index.scss
  18. 2
      ui/app/pages/permissions-connect/redirect/index.scss
  19. 8
      ui/app/pages/send/send.scss

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

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

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

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

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

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

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

@ -5,9 +5,8 @@
align-items: center;
&__text {
@extend %content-text;
@extend %H7;
font-size: 12px;
line-height: 17px;
color: #6a737d;
display: flex;

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

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

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

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

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

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

7
ui/app/components/ui/popover/index.scss
Unescape View File

@ -33,10 +33,9 @@
align-items: center;
justify-content: space-between;
@extend %font;
@extend %H4;
font-weight: bold;
font-size: 18px;
line-height: 25px;
padding-bottom: 8px;
@ -52,10 +51,8 @@
}
&__subtitle {
@extend %font;
@extend %H6;
font-weight: normal;
font-size: 14px;
line-height: 20px;
}

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

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

1
ui/app/css/itcss/settings/index.scss
Unescape View File

@ -1,2 +1 @@
@import './variables';
@import './typography';

84
ui/app/css/itcss/settings/typography.scss
Unescape View File

@ -1,84 +0,0 @@
$fa-font-path: 'fonts/fontawesome';
@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
}
@mixin fontScale($weight: 400, $size: 1rem) {
font-weight: $weight;
font-size: $size;
}
@mixin h1($weight: 400, $size: 2.5rem) {
@include fontScale($weight, $size);
}
@mixin h2($weight: 400, $size: 2rem) {
@include fontScale($weight, $size);
}
@mixin h3($weight: 400, $size: 1.5rem) {
@include fontScale($weight, $size);
}
@mixin h4($weight: 400, $size: 1.125rem) {
@include fontScale($weight, $size);
}
@mixin h5($weight: 400, $size: 1rem) {
@include fontScale($weight, $size);
}
@mixin h6($weight: 400, $size: 0.875rem) {
@include fontScale($weight, $size);
}
@mixin h7($weight: 400, $size: 0.75rem) {
@include fontScale($weight, $size);
}
@mixin paragraph($weight: 400, $size: 1rem) {
@include fontScale($weight, $size);
}

69
ui/app/css/itcss/settings/variables.scss
Unescape View File

@ -105,42 +105,6 @@ $break-small: 575px;
$break-midpoint: 780px;
$break-large: 576px;
$primary-font-type: Roboto;
// Font Sizes
%h3 {
font-size: 1.5rem;
line-height: 2.125rem;
font-weight: 400;
}
%h4 {
font-size: 1.125rem;
line-height: 1.3125rem;
font-weight: 400;
}
%h5 {
font-size: 1rem;
line-height: 1.25rem;
font-weight: 400;
}
%h6 {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
}
%h8 {
font-size: 0.75rem;
line-height: 1.0625rem;
font-weight: 400;
}
/*
Spacing Variables
*/
@ -176,36 +140,3 @@ $xxlarge-spacing: 64px;
border-color: $Blue-500;
}
}
// Font mixin
%font {
font-family: Roboto;
font-style: normal;
font-weight: normal;
color: $Grey-800;
}
%font--bold {
@extend %font;
font-weight: bold;
}
%header--18 {
@extend %font;
font-size: 18px;
}
%header--24 {
@extend %font;
font-size: 24px;
}
%content-text {
@extend %font;
font-size: 14px;
}

1
ui/app/css/variables/index.scss
Unescape View File

@ -1 +1,2 @@
@import './colors.scss';
@import './typography.scss';

130
ui/app/css/variables/typography.scss
Unescape View File

@ -0,0 +1,130 @@
$fa-font-path: 'fonts/fontawesome';
@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
}
$font-family: Roboto, Helvetica, Arial, sans-serif;
// Typography
%H1 {
font-style: normal;
font-weight: normal;
font-size: 2.5rem;
font-family: $font-family;
line-height: 140%;
}
%H2 {
font-style: normal;
font-weight: normal;
font-size: 2rem;
font-family: $font-family;
line-height: 140%;
}
%H3 {
font-style: normal;
font-weight: normal;
font-size: 1.5rem;
font-family: $font-family;
line-height: 140%;
}
%H4 {
font-style: normal;
font-weight: normal;
font-size: 1.125rem;
font-family: $font-family;
line-height: 140%;
}
%H5 {
font-style: normal;
font-weight: normal;
font-size: 1rem;
font-family: $font-family;
line-height: 140%;
}
%H6 {
font-style: normal;
font-weight: normal;
font-size: 0.875rem;
font-family: $font-family;
}
%Paragraph {
font-style: normal;
font-weight: normal;
font-size: 1rem;
font-family: $font-family;
line-height: 140%;
}
%H7 {
font-style: normal;
font-weight: normal;
font-size: 0.75rem;
font-family: $font-family;
line-height: 140%;
}
%H8 {
font-style: normal;
font-weight: normal;
font-size: 0.625rem;
font-family: $font-family;
line-height: 140%;
}
%H9 {
font-style: normal;
font-weight: normal;
font-size: 0.5rem;
font-family: $font-family;
line-height: 140%;
}

3
ui/app/pages/home/index.scss
Unescape View File

@ -43,10 +43,11 @@
display: flex;
flex-direction: column;
@extend %content-text;
@extend %H6;
padding-left: 24px;
padding-right: 24px;
color: $Grey-800;
div {
margin-bottom: 20px;

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

@ -24,13 +24,13 @@
&__title {
@extend %header--18;
@extend %H4;
}
&__text,
&__text-blue,
&__text-grey {
@extend %content-text;
@extend %H6;
}
&__text-blue {
@ -120,7 +120,7 @@
}
&__label {
@extend %content-text;
@extend %H6;
color: $Black-100;
text-overflow: ellipsis;
@ -129,17 +129,14 @@
}
&__balance {
@extend %content-text;
@extend %H7;
font-size: 12px;
color: $Grey-500;
}
&__last-connected {
@extend %content-text;
@extend %H8;
font-size: 10px;
line-height: 140.62%;
display: flex;
flex-direction: column;
align-items: flex-end;

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

@ -24,7 +24,7 @@
}
&__back {
@extend %content-text;
@extend %H6;
color: $Grey-600;
cursor: pointer;
@ -35,9 +35,8 @@
}
&__page-count {
@extend %content-text;
@extend %H7;
font-size: 12px;
color: #6a737d;
grid-column: 2;
justify-self: end;

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

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

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

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

Write Preview
Loading…
Cancel
Save