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

Add alpha values for black and white text and update the demo to reflect the addition.

master
Brian Hall 2015-03-30 11:32:29 -05:00
parent 86e50faedc
commit 37af4d565a
4 changed files with 170 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/palette/_palette.scss
View File

@ -2243,8 +2243,24 @@
// Black
.wsk-color-text--black-12 {
color: unquote("rgba(#{$palette-black-12})");
}
.wsk-color-text--black-26 {
color: unquote("rgba(#{$palette-black-26})");
}
.wsk-color-text--black-54 {
color: unquote("rgba(#{$palette-black-54})");
}
.wsk-color-text--black {
color: unquote("rgb(#{$palette-black})");
color: unquote("rgba(#{$palette-black-87})");
}
.wsk-color-text--black-100 {
color: unquote("rgba(#{$palette-black-100})");
}
.wsk-color--black {
@ -2254,8 +2270,20 @@
// White
.wsk-color-text--white-12 {
color: unquote("rgb(#{$palette-white-12})");
}
.wsk-color-text--white-30 {
color: unquote("rgb(#{$palette-white-30})");
}
.wsk-color-text--white-70 {
color: unquote("rgb(#{$palette-white-70})");
}
.wsk-color-text--white {
color: unquote("rgb(#{$palette-white})");
color: unquote("rgb(#{$palette-white-100})");
}
.wsk-color--white {

22
src/palette/color_definitions.scss
View File

@ -579,7 +579,25 @@ $palette-blue-grey-800: nth($palette-blue-grey, 9);
$palette-blue-grey-900: nth($palette-blue-grey, 10);
$palette-black:
"0,0,0";
"0,0,0"
"0,0,0,.87"
"0,0,0,.54"
"0,0,0,.26"
"0,0,0,.12";
$palette-black-100: nth($palette-black, 1);
$palette-black-87: nth($palette-black, 2);
$palette-black-54: nth($palette-black, 3);
$palette-black-26: nth($palette-black, 4);
$palette-black-12: nth($palette-black, 5);
$palette-white:
"255,255,255";
"255,255,255"
"255,255,255,.70"
"255,255,255,.30"
"255,255,255,.12";
$palette-white-100: nth($palette-white, 1);
$palette-white-70: nth($palette-white, 2);
$palette-white-30: nth($palette-white, 3);
$palette-white-12: nth($palette-white, 4);

24
src/palette/demo.html
View File

@ -431,6 +431,30 @@
<div class="demo-palette-name">White</div>
</div>
</div>
<div class="demo-palette demo-palette--black-text">
<div class="demo-palette-heading demo-palette-color">
<div class="demo-palette-name">Black</div>
100%
</div>
<div class="demo-palette-color demo-palette-color--12 demo-palette--dark-text">12%</div>
<div class="demo-palette-color demo-palette-color--26 demo-palette--dark-text">26%</div>
<div class="demo-palette-color demo-palette-color--54">54%</div>
<div class="demo-palette-color demo-palette-color--87">87%</div>
</div>
<div class="demo-palette demo-palette--white-text">
<div class="demo-palette-heading demo-palette-color demo-palette--dark-text">
<div class="demo-palette-name">White</div>
100%
</div>
<div class="demo-palette-color demo-palette-color--12 demo-palette--dark-text">12%</div>
<div class="demo-palette-color demo-palette-color--30 demo-palette--dark-text">30%</div>
<div class="demo-palette-color demo-palette-color--70 demo-palette--dark-text">70%</div>
<div class="demo-palette-color demo-palette-color--100 demo-palette--dark-text">100%</div>
</div>
</div>
</body>
</html>

100
src/palette/demo.scss
View File

@ -164,7 +164,7 @@
.demo-palette-name {
padding: 0;
float: left;
float: left;
}
}
@ -255,12 +255,104 @@
}
}
.demo-palette--white {
.demo-palette--black-text {
.demo-palette-color {
background-color: #ffffff;
background-color: #000000;
&:after {
content: '#ffffff';
content: '#000000';
float: right;
}
}
.demo-palette-color--100 {
background-color: unquote("rgb(#{nth($palette-black, 1)})");
&:after {
content: '#000000';
float: right;
}
}
.demo-palette-color--12 {
background-color: unquote("rgba(#{nth($palette-black, 5)})");
&:after {
content: 'Dividers';
float: right;
}
}
.demo-palette-color--26 {
background-color: unquote("rgba(#{nth($palette-black, 4)})");
&:after {
content: 'Disabled / Hint Text';
float: right;
}
}
.demo-palette-color--54 {
background-color: unquote("rgba(#{nth($palette-black, 3)})");
&:after {
content: 'Secondary Text / Icons';
float: right;
}
}
.demo-palette-color--87 {
background-color: unquote("rgba(#{nth($palette-black, 2)})");
&:after {
content: 'Text';
float: right;
}
}
}
.demo-palette--white-text {
.demo-palette-color {
background-color: #ffffff;
&:after {
content: '#FFFFFF';
float: right;
}
}
.demo-palette-color--12 {
background-color: unquote("rgba(#{nth($palette-white, 4)})");
&:after {
content: 'Dividers';
float: right;
}
}
.demo-palette-color--30 {
background-color: unquote("rgba(#{nth($palette-white, 3)})");
&:after {
content: 'Disabled / Hint Text';
float: right;
}
}
.demo-palette-color--70 {
background-color: unquote("rgba(#{nth($palette-white, 2)})");
&:after {
content: 'Secondary Text';
float: right;
}
}
.demo-palette-color--100 {
background-color: unquote("rgba(#{nth($palette-white, 1)})");
&:after {
content: 'Text / Icons';
float: right;
}
}