google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1351 from google/component-font-variables 

Add variables for font sizes in components.
master
Sérgio Gomes 2015-08-11 13:58:12 +01:00
parent a5b69c5d50 d1be0391a8
commit 4416b43dbf
11 changed files with 30 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/_variables.scss
View File

@ -306,6 +306,7 @@ $input-text-expandable-icon-top: 16px;
/* SWITCH */
$switch-label-font-size: 16px;
$switch-label-height: 24px;
$switch-track-height: 14px;
$switch-track-length: 36px;
@ -333,6 +334,7 @@ $spinner-duration: 360 * $spinner-arc-time / (
/* RADIO */
$radio-label-font-size: 16px;
$radio-label-height: 24px;
$radio-button-size: 16px;
$radio-inner-margin: $radio-button-size / 4;
@ -352,10 +354,10 @@ $list-container-height: 500px;
$list-container-width: 400px;
$list-container-item-height: 70px;
/* ICONS */
/* LAYOUT */
$layout-nav-link-font-size: 13px;
// Dimensions
$layout-drawer-narrow: 240px;
$layout-drawer-wide: 456px;
$layout-drawer-width: $layout-drawer-narrow;
@ -376,6 +378,7 @@ $layout-header-mobile-baseline: 72px;
$layout-header-mobile-indent: 16px;
$layout-header-desktop-indent: 40px;
$layout-tab-font-size: 14px;
$layout-tab-bar-height: 48px;
$layout-tab-mobile-padding: 12px;
$layout-tab-desktop-padding: 24px;
@ -391,11 +394,6 @@ $icon-toggle-ripple-size: 36px !default;
/* FOOTER */
/*mega-footer*/
/**************
*
* Sizes
*
*************/
$footer-min-padding: 16px !default;
$footer-padding-sides: 40px !default;
$footer-heading-font-size: 14px !default;
@ -403,47 +401,14 @@ $footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
$footer-btn-size: 36px !default;
/*mini-footer*/
/**************
*
* Sizes
*
*************/
$padding: 16px !default;
$footer-heading-font-size: 24px !default;
$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
$footer-btn-size: 36px !default;
/* COLUMN LAYOUT */
// Cutoff points for devices.
$columns-tablet-size: 768px;
$columns-desktop-size: 1024px;
// Web (desktop) layout. Columns are fixed width, and there's a maximum number
// of 3 columns, after which we just add padding to either side.
$columns-web-count: 3;
$columns-web-size: 360px;
$columns-web-gutter: 40px;
$columns-web-block-size: $columns-web-size + $columns-web-gutter;
$columns-web-padding-size: $columns-web-count *
($columns-web-size + $columns-web-gutter) / 2;
// Tablet layout. There's a fixed number of columns, which grow to fill the
// entire container.
$columns-tablet-count: 2;
$columns-tablet-gutter: 24px;
$columns-tablet-percent: 100% / $columns-tablet-count;
// Phone layout. There's a fixed number of columns, which grow to fill the
// entire container.
$columns-phone-count: 1;
$columns-phone-gutter: 16px;
$columns-phone-percent: 100% / $columns-phone-count;
/* CHECKBOX */
$checkbox-label-font-size: 16px;
$checkbox-label-height: 24px;
$checkbox-button-size: 16px;
$checkbox-inner-margin: 2px;
@ -459,6 +424,7 @@ $card-width: 330px !default;
$card-height: 200px !default;
$card-font-size: 16px !default;
$card-title-font-size: 24px !default;
$card-subtitle-font-size: 14px !default;
$card-horizontal-padding: 16px !default;
$card-vertical-padding: 16px !default;
@ -516,6 +482,7 @@ $animation-curve-default: $animation-curve-fast-out-slow-in !default;
$bar-height: 4px !default;
/* BADGE */
$badge-font-size: 12px;
$badge-color: unquote("rgb(#{$color-white})") !default;
$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
$badge-background: unquote("rgb(#{$color-accent})") !default;
@ -551,6 +518,9 @@ $grid-cell-default-columns: $grid-phone-columns !default;
/* DATA TABLE */
$data-table-font-size: 13px;
$data-table-header-font-size: 12px;
$data-table-header-color: rgba(#000, 0.54);
$data-table-divider-color: rgba(#000, 0.12);
@ -571,3 +541,7 @@ $data-table-card-title-top: 20px;
$data-table-card-padding: 24px;
$data-table-button-padding-right: 16px;
$data-table-cell-top: $data-table-card-padding / 2;
/* TOOLTIP */
$tooltip-font-size: 10px !default;
$tooltip-font-size-large: 14px !default;

2
src/badge/_badge.scss
View File

@ -46,7 +46,7 @@
font-family: $preferred_font;
font-weight: 600;
font-size: 12px;
font-size: $badge-font-size;
width: $badge-size;
height: $badge-size;
border-radius : 50%;

2
src/card/_card.scss
View File

@ -72,7 +72,7 @@
}
.mdl-card__subtitle-text {
font-size: 14px;
font-size: $card-subtitle-font-size;
color: grey;
margin: 0;
}

2
src/checkbox/_checkbox.scss
View File

@ -135,7 +135,7 @@
.mdl-checkbox__label {
position: relative;
cursor: pointer;
font-size: 16px;
font-size: $checkbox-label-font-size;
line-height: $checkbox-label-height;
margin: 0;

4
src/data-table/_data-table.scss
View File

@ -22,7 +22,7 @@
border: $data-table-dividers;
border-collapse: collapse;
white-space: nowrap;
font-size: 13px;
font-size: $data-table-font-size;
background-color: unquote("rgb(#{$color-white})");
thead {
@ -85,7 +85,7 @@
text-overflow: ellipsis;
@include typo-body-2();
height: $data-table-row-height;
font-size: 12px;
font-size: $data-table-header-font-size;
color: $data-table-header-color;
padding-bottom: 8px;
box-sizing: border-box;

4
src/layout/_layout.scss
View File

@ -29,7 +29,7 @@
color: $layout-text-color;
text-decoration: none;
font-weight: 500;
font-size: 13px;
font-size: $layout-nav-link-font-size;
margin: 0;
}
@ -526,7 +526,7 @@
text-align: center;
font-weight: 500;
font-size: 14px;
font-size: $layout-tab-font-size;
text-transform: uppercase;
color: $layout-header-tab-text-color;

2
src/radio/_radio.scss
View File

@ -20,7 +20,7 @@
.mdl-radio {
position: relative;
font-size: 16px;
font-size: $radio-label-font-size;
line-height: $radio-label-height;
display: inline-block;

2
src/switch/_switch.scss
View File

@ -148,7 +148,7 @@
.mdl-switch__label {
position: relative;
cursor: pointer;
font-size: 16px;
font-size: $switch-label-font-size;
line-height: $switch-label-height;
margin: 0;
left: 24px;

2
src/tabs/_tabs.scss
View File

@ -51,7 +51,7 @@
text-align: center;
font-weight: 500;
font-size: 14px;
font-size: $layout-tab-font-size;
text-transform: uppercase;
color: $tab-text-color;

7
src/textfield/_textfield.scss
View File

@ -21,7 +21,7 @@
.mdl-textfield {
position: relative;
font-size: 16px;
font-size: $input-text-font-size;
display: inline-block;
@ -64,7 +64,6 @@
margin: 0;
padding: $input-text-padding 0;
width: $input-text-width;
background: $input-text-font-size;
text-align: left;
color: inherit;
@ -132,7 +131,7 @@
.mdl-textfield--floating-label.is-invalid & {
color: $input-text-error-color;
font-size: 12px;
font-size: $input-text-floating-label-fontsize;
}
// The after label is the colored underline for the TextField.
@ -163,7 +162,7 @@
.mdl-textfield__error {
color: $input-text-error-color;
position: absolute;
font-size: 12px;
font-size: $input-text-floating-label-fontsize;
margin-top: 3px;
visibility: hidden;
display: block;

4
src/tooltip/_tooltip.scss
View File

@ -25,7 +25,7 @@
border-radius: 2px;
color: $tooltip-text-color;
display: inline-block;
font-size: 10px;
font-size: $tooltip-font-size;
font-weight: 500;
line-height: 14px;
max-width: 170px;
@ -41,7 +41,7 @@
.mdl-tooltip--large {
line-height: 14px;
font-size: 14px;
font-size: $tooltip-font-size-large;
padding: 16px;
}