simplify control styling using currentColor

This commit is contained in:
Hakim El Hattab 2016-06-28 12:34:23 +02:00
parent 2155415767
commit 10545d41cc
14 changed files with 31 additions and 39 deletions

View file

@ -196,7 +196,8 @@ body {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; } z-index: 1;
color: #fff; }
.reveal .controls button { .reveal .controls button {
position: absolute; position: absolute;
padding: 0; padding: 0;
@ -206,6 +207,7 @@ body {
border: 0; border: 0;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
color: currentColor;
-webkit-transform: scale(0.9999); -webkit-transform: scale(0.9999);
transform: scale(0.9999); transform: scale(0.9999);
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
@ -224,7 +226,7 @@ body {
width: 30px; width: 30px;
height: 5px; height: 5px;
border-radius: 2.5px; border-radius: 2.5px;
background-color: #fff; background-color: currentColor;
-webkit-transition: all 0.15s ease, background-color 0.8s ease; -webkit-transition: all 0.15s ease, background-color 0.8s ease;
transition: all 0.15s ease, background-color 0.8s ease; transition: all 0.15s ease, background-color 0.8s ease;
-webkit-transform-origin: 2.5px 50%; -webkit-transform-origin: 2.5px 50%;

View file

@ -261,6 +261,7 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
color: #fff;
button { button {
position: absolute; position: absolute;
@ -271,6 +272,7 @@ body {
border: 0; border: 0;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
color: currentColor;
transform: scale(.9999); transform: scale(.9999);
transition: all 0.2s ease; transition: all 0.2s ease;
z-index: 2; // above slides z-index: 2; // above slides
@ -291,7 +293,7 @@ body {
width: $length; width: $length;
height: $thickness; height: $thickness;
border-radius: $thickness/2; border-radius: $thickness/2;
background-color: #fff; background-color: currentColor;
transition: all 0.15s ease, background-color 0.8s ease; transition: all 0.15s ease, background-color 0.8s ease;
transform-origin: $thickness/2 50%; transform-origin: $thickness/2 50%;

View file

@ -255,9 +255,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #8b743d; }
background-color: #8b743d; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -251,9 +251,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #42affa; }
background-color: #42affa; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -254,9 +254,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #a23; }
background-color: #a23; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -257,9 +257,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #13DAEC; }
background-color: #13DAEC; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -255,9 +255,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #268bd2; }
background-color: #268bd2; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -249,9 +249,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #e7ad52; }
background-color: #e7ad52; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -251,9 +251,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #51483D; }
background-color: #51483D; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -254,9 +254,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #00008B; }
background-color: #00008B; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -258,9 +258,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #3b759e; }
background-color: #3b759e; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -255,9 +255,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #268bd2; }
background-color: #268bd2; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

View file

@ -297,9 +297,8 @@ body {
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: $linkColor;
background-color: $linkColor;
} }

View file

@ -251,9 +251,8 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls button:before, .reveal .controls {
.reveal .controls button:after { color: #2a76dd; }
background-color: #2a76dd; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR