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

Rebase var work against master

master
Addy Osmani 2015-04-09 09:22:18 +01:00
parent e5cefa9fd0 15a01298e4
commit baeb2e9089
24 changed files with 273 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,5 +1,5 @@
node_modules
.tmp
gulp-cache
+.DS_Store
+docs/out
.DS_Store
docs/out

92
css/material.css
View File

@ -48,6 +48,7 @@
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -328,6 +329,7 @@ a, .wsk-accordion, .wsk-button, .wsk-card, .wsk-checkbox, .wsk-dropdown-menu, .w
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -787,6 +789,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -3175,6 +3178,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -4903,6 +4907,36 @@ dt {
.wsk-color--white {
background-color: rgb(255,255,255" "255,255,255,.70" "255,255,255,.30" "255,255,255,.12); }
.wsk-color--primary {
background-color: rgb(63,81,181); }
.wsk-color--primary-contrast {
background-color: rgb(255,255,255); }
.wsk-color--primary-dark {
background-color: rgb(48,63,159); }
.wsk-color--accent {
background-color: rgb(255,64,129); }
.wsk-color--accent-contrast {
background-color: rgb(255,255,255); }
.wsk-color-text--primary {
color: rgb(63,81,181); }
.wsk-color-text--primary-contrast {
color: rgb(255,255,255); }
.wsk-color-text--primary-dark {
color: rgb(48,63,159); }
.wsk-color-text--accent {
color: rgb(255,64,129); }
.wsk-color-text--accent-contrast {
color: rgb(255,255,255); }
/*------------------------------------*\
$CONTENTS
\*------------------------------------*/
@ -4945,6 +4979,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5059,6 +5094,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5178,6 +5214,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5293,6 +5330,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5550,6 +5588,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5774,6 +5813,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5870,7 +5910,7 @@ dt {
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid rgb(0,0,0,.54);
border: 2px solid rgba(0,0,0,.54);
border-radius: 2px;
z-index: 2; }
.wsk-checkbox.is-checked .wsk-checkbox__box-outline {
@ -5987,6 +6027,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6157,6 +6198,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6422,6 +6464,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6585,6 +6628,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6758,6 +6802,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6998,6 +7043,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -7218,6 +7264,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -7820,7 +7867,7 @@ dt {
bottom: 0;
left: 0;
position: absolute;
background: rgb(224,224,224);
background: rgb(255,64,129);
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1);
@ -7884,6 +7931,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -8032,6 +8080,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -8231,6 +8280,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -8579,6 +8629,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9061,6 +9112,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9287,6 +9339,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9349,8 +9402,31 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
width: 100%; }
.wsk-tabs__tab-bar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
height: 48px;
padding: 0 0 0 56px;
padding: 0 0 0 0;
margin: 0;
border-bottom: 1px solid rgb(224,224,224); }
@ -9456,6 +9532,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9666,6 +9743,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9730,14 +9808,14 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
background: rgb(117,117,117);
border-radius: 5px;
background: rgba(0,0,0, .9);
border-radius: 2px;
color: rgb(255,255,255);
display: none;
font-size: 10px;
line-height: 14px;
max-width: 170px;
padding: 5px 8px;
padding: 4px 8px;
position: absolute;
text-align: center; }
@ -9749,7 +9827,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
.wsk-tooltip--large {
line-height: 14px;
font-size: 14px;
padding: 16px; }
padding: 15px 16px; }
@-webkit-keyframes pulse {
0% {

92
css/material.css.template
View File

@ -49,6 +49,7 @@
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -329,6 +330,7 @@ a, .wsk-accordion, .wsk-button, .wsk-card, .wsk-checkbox, .wsk-dropdown-menu, .w
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -788,6 +790,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -3176,6 +3179,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -4904,6 +4908,36 @@ dt {
.wsk-color--white {
background-color: rgb(255,255,255" "255,255,255,.70" "255,255,255,.30" "255,255,255,.12); }
.wsk-color--primary {
background-color: rgb($color-primary); }
.wsk-color--primary-contrast {
background-color: rgb($color-primary-contrast); }
.wsk-color--primary-dark {
background-color: rgb($color-primary-dark); }
.wsk-color--accent {
background-color: rgb($color-accent); }
.wsk-color--accent-contrast {
background-color: rgb($color-accent-contrast); }
.wsk-color-text--primary {
color: rgb($color-primary); }
.wsk-color-text--primary-contrast {
color: rgb($color-primary-contrast); }
.wsk-color-text--primary-dark {
color: rgb($color-primary-dark); }
.wsk-color-text--accent {
color: rgb($color-accent); }
.wsk-color-text--accent-contrast {
color: rgb($color-accent-contrast); }
/*------------------------------------*\
$CONTENTS
\*------------------------------------*/
@ -4946,6 +4980,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5060,6 +5095,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5179,6 +5215,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5294,6 +5331,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5551,6 +5589,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5775,6 +5814,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -5871,7 +5911,7 @@ dt {
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid rgb(0,0,0,.54);
border: 2px solid rgba(0,0,0,.54);
border-radius: 2px;
z-index: 2; }
.wsk-checkbox.is-checked .wsk-checkbox__box-outline {
@ -5988,6 +6028,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6158,6 +6199,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6423,6 +6465,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6586,6 +6629,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6759,6 +6803,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -6999,6 +7044,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -7219,6 +7265,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -7821,7 +7868,7 @@ dt {
bottom: 0;
left: 0;
position: absolute;
background: rgb(224,224,224);
background: rgb($color-accent);
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1);
@ -7885,6 +7932,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -8033,6 +8081,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -8232,6 +8281,7 @@ dt {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -8580,6 +8630,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9062,6 +9113,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9288,6 +9340,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9350,8 +9403,31 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
width: 100%; }
.wsk-tabs__tab-bar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
height: 48px;
padding: 0 0 0 56px;
padding: 0 0 0 0;
margin: 0;
border-bottom: 1px solid rgb(224,224,224); }
@ -9457,6 +9533,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9667,6 +9744,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
*
**/
/* ========== Color Palettes ========== */
/* colors.scss */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
@ -9731,14 +9809,14 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
background: rgb(117,117,117);
border-radius: 5px;
background: rgba(0,0,0, .9);
border-radius: 2px;
color: rgb(255,255,255);
display: none;
font-size: 10px;
line-height: 14px;
max-width: 170px;
padding: 5px 8px;
padding: 4px 8px;
position: absolute;
text-align: center; }
@ -9750,7 +9828,7 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
.wsk-tooltip--large {
line-height: 14px;
font-size: 14px;
padding: 16px; }
padding: 15px 16px; }
@-webkit-keyframes pulse {
0% {

2
css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/material.min.css.map
View File

File diff suppressed because one or more lines are too long

2
css/material.min.css.template
View File

File diff suppressed because one or more lines are too long

2
css/material.min.css.template.map
View File

File diff suppressed because one or more lines are too long

11
docs/_templates/layout.html vendored
View File

@ -40,9 +40,8 @@
<body>
<div class="demo-layout">
<div class="wsk-layout__container">
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
<header class="wsk-layout__header is-casting-shadow">
<div class="wsk-layout wsk-js-layout">
<header class="wsk-layout__header">
<!-- Icon -->
<img class="wsk-layout-icon" src="/assets/app-icon.png">
<!-- Title -->
@ -69,10 +68,10 @@
<a class="wsk-navigation__link" href="/customize">Customize</a>
</nav>
</div>
<div class="wsk-layout__drawer-button"></div><main class="wsk-layout__content">
{% block content %}{% endblock %}
<main class="wsk-layout__content">
{% block content %}{% endblock %}
</main>
<div class="wsk-layout__obfuscator"></div></div></div>
</div>
</div>

2
js/material.js
View File

@ -2490,7 +2490,7 @@ MaterialTextfield.prototype.change = function(value) {
if (value) {
this.input_.value = value;
}
this.updateValueStyles_();
this.updateClasses_();
};
/**

2
js/material.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/material.min.js.map
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -28,7 +28,7 @@
"gulp-front-matter": "^1.2.2",
"gulp-header": "^1.2.2",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.0.0",
"gulp-imagemin": "^2.2.1",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.8.0",
"gulp-markdown": "^1.0.0",

0
src/_colors.scss
View File

26
src/_demos.scss
View File

@ -1 +1,27 @@
@import "../material-design-lite";
$padding: 24px;
$icon-font-path: "packages/wsk_material/sass/fonts/";
.demo-page {
width: 100%;
height: auto;
margin: 0;
padding: 0;
padding: $padding;
box-sizing: border-box;
background: #FFF;
}
// We define h2 under body, so it doesn't bleed into typography styles
.demo-page > h2 {
margin-top: $padding ;
margin-bottom: $padding / 2;
}
.demo-preview-block {
background: rgb(245,245,245);
padding: 20px;
}

26
src/_styleguide_demo_bp.scss
View File

@ -1,26 +0,0 @@
$padding: 24px;
$icon-font-path: "packages/wsk_material/sass/fonts/";
.demo-page {
width: 100%;
height: auto;
margin: 0;
padding: 0;
padding: $padding;
box-sizing: border-box;
background: #FFF;
}
// We define h2 under body, so it doesn't bleed into typography styles
.demo-page > h2 {
margin-top: $padding ;
margin-bottom: $padding / 2;
}
.demo-preview-block {
background: rgb(245,245,245);
padding: 20px;
}

9
src/_vars.scss
View File

@ -832,7 +832,7 @@ $palette-white-30: nth($palette-white, 3);
$palette-white-12: nth($palette-white, 4);
/* colors.scss */
$styleguide-generate-template: false !default;
/* ========== Color & Themes ========== */
@ -939,7 +939,7 @@ $layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !defa
$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
// Tabs
$layout-header-tab-highlight: unquote("rgb(#{$palette-grey-300})") !default;
$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
/* ========== Content Tabs ========== */
@ -951,7 +951,7 @@ $tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
/* ========== Checkboxes ========== */
$checkbox-color: unquote("rgb(#{$color-primary})") !default;
$checkbox-off-color: unquote("rgb(#{$palette-black-54})") !default;
$checkbox-off-color: unquote("rgba(#{$palette-black-54})") !default;
$checkbox-disabled-color: unquote("rgba(#{$palette-black-26})") !default;
$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
@ -1035,7 +1035,7 @@ $default-dropdown-bg-color: unquote("rgb(#{$palette-white-100})") !default;
/* ========== Tooltips ========== */
$tooltip-text-color: unquote("rgb(#{$palette-white-100})") !default;
$tooltip-background-color: unquote("rgb(#{$palette-grey-600})") !default;
$tooltip-background-color: unquote("rgba(#{$palette-black-100}, .9)") !default;
/* ========== Footer ========== */
@ -1046,7 +1046,6 @@ $footer-button-fill-color: $footer-color !default;
$footer-underline-color: $footer-color !default;
/* TEXTFIELD */
$input-text-font-size: 16px;

1
src/material-design-lite.scss
View File

@ -5,7 +5,6 @@
// Resets and dependencies
@import "resets/resets";
@import "colors";
@import "typography/typography";
@import 'icons/icons';

36
src/palette/_palette.scss
View File

@ -1,7 +1,5 @@
@import "../vars";
//@import "color_definitions";
// Red
.wsk-color-text--red {
@ -2291,3 +2289,37 @@
.wsk-color--white {
background-color: unquote("rgb(#{$palette-white})");
}
// Primary and accent
.wsk-color--primary {
background-color: unquote("rgb(#{$color-primary})");
}
.wsk-color--primary-contrast {
background-color: unquote("rgb(#{$color-primary-contrast})");
}
.wsk-color--primary-dark {
background-color: unquote("rgb(#{$color-primary-dark})");
}
.wsk-color--accent {
background-color: unquote("rgb(#{$color-accent})");
}
.wsk-color--accent-contrast {
background-color: unquote("rgb(#{$color-accent-contrast})");
}
.wsk-color-text--primary {
color: unquote("rgb(#{$color-primary})");
}
.wsk-color-text--primary-contrast {
color: unquote("rgb(#{$color-primary-contrast})");
}
.wsk-color-text--primary-dark {
color: unquote("rgb(#{$color-primary-dark})");
}
.wsk-color-text--accent {
color: unquote("rgb(#{$color-accent})");
}
.wsk-color-text--accent-contrast {
color: unquote("rgb(#{$color-accent-contrast})");
}

0
src/palette/color_definitions.scss
View File

7
src/shadow/demo.scss
View File

@ -5,8 +5,13 @@
border-radius : 2px;
display : block;
height : 300px;
margin : 20px;
margin-bottom : 20px;
transition-property: opacity, transform;
@include material-animation-default(300ms);
width : 300px;
@media screen and (max-width: 360px ) {
width: 272px;
}
}

15
src/tabs/_tabs.scss
View File

@ -7,10 +7,17 @@
}
.wsk-tabs__tab-bar {
height: 48px;
padding: 0 0 0 56px;
margin: 0;
border-bottom: 1px solid $tab-border-color;
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : center; // ⇾
align-content : space-between; // ||
align-items : flex-start; // ↓
height : 48px;
padding : 0 0 0 0;
margin : 0;
border-bottom : 1px solid $tab-border-color;
}
.wsk-tabs__tab {

6
src/tabs/demo.html
View File

@ -17,9 +17,9 @@
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
<div class="wsk-tabs__tab-bar">
<a href="#starks-panel" class="wsk-tabs__tab is-active">Starks</a>
<a href="#lannisters-panel" class="wsk-tabs__tab">Lannisters</a>
<a href="#targaryens-panel" class="wsk-tabs__tab">Targaryens</a>
<a href="#starks-panel" class="wsk-tabs__tab is-active">Tab I</a>
<a href="#lannisters-panel" class="wsk-tabs__tab">Tab II</a>
<a href="#targaryens-panel" class="wsk-tabs__tab">Tab III</a>
</div>
<div class="wsk-tabs__panel is-active" id="starks-panel">

2
src/textfield/textfield.js
View File

@ -141,7 +141,7 @@ MaterialTextfield.prototype.change = function(value) {
if (value) {
this.input_.value = value;
}
this.updateValueStyles_();
this.updateClasses_();
};
/**

6
src/tooltip/_tooltip.scss
View File

@ -4,13 +4,13 @@
transform: scale(0);
transform-origin: top center;
background: $tooltip-background-color;
border-radius: 5px;
border-radius: 2px;
color: $tooltip-text-color;
display: none;
font-size: 10px;
line-height: 14px;
max-width: 170px;
padding: 5px 8px;
padding: 4px 8px;
position: absolute;
text-align: center;
}
@ -22,7 +22,7 @@
.wsk-tooltip--large {
line-height: 14px;
font-size: 14px;
padding: 16px;
padding: 15px 16px;
}
@-webkit-keyframes pulse {