change css classes to SASS placeholders

This commit is contained in:
KDSBrowne 2017-10-03 11:00:04 -07:00
parent 67a621c6c5
commit 0838e21674
11 changed files with 20 additions and 20 deletions

View File

@ -150,7 +150,7 @@ Button.audioBtn:last-of-type {
}
.select {
@extend .customSelectFocus;
@extend %customSelectFocus;
background-color: $color-white;
border: 0;
border-bottom: 0.1rem solid $color-text;

View File

@ -37,7 +37,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
* ==========
*/
.button {
@extend .btnFocus;
@extend %btnFocus;
font-weight: $btn-font-weight;
line-height: 1.5;
@ -75,7 +75,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
}
.buttonWrapper {
@extend .btnFocus;
@extend %btnFocus;
&,
&:active {

View File

@ -42,7 +42,7 @@
}
.input {
@extend .customInputFocus;
@extend %customInputFocus;
flex: 1;
background: #fff;
border: $border-size solid $color-gray-lighter;

View File

@ -18,7 +18,7 @@
flex-shrink: 0;
a {
@extend .customLinkFocus;
@extend %customLinkFocus;
text-decoration: none;
display: block;
}

View File

@ -37,7 +37,7 @@
}
.item {
@extend .customListItemFocus;
@extend %customListItemFocus;
flex: 1 1 100%;
padding: ($line-height-computed / 3) 0;
display: flex;

View File

@ -53,7 +53,7 @@
}
.select {
@extend .customSelectFocus;
@extend %customSelectFocus;
background-color: #fff;
border: $focus-border-size solid #fff;
border-radius: $focus-border-size;
@ -91,7 +91,7 @@
}
.swatch {
@extend .customSelectFocus;
@extend %customSelectFocus;
position: absolute;
float: right;
background: #fff;

View File

@ -1,7 +1,7 @@
@import "../styles.scss";
.chatListItem {
@extend .customChatItemFocus;
@extend %customChatItemFocus;
@extend %list-item;
cursor: pointer;
padding: 0;

View File

@ -7,5 +7,5 @@
}
.scrollableList {
@extend .customListFocus;
@extend %customListFocus;
}

View File

@ -11,7 +11,7 @@
.scrollableList {
@include scrollbox-vertical($user-list-bg);
@extend .customListFocus;
@extend %customListFocus;
}
.separator {

View File

@ -66,7 +66,7 @@
}
.userListItem {
@extend .customUserItemFocus;
@extend %customUserItemFocus;
@extend %list-item;
flex-flow: column;
flex-shrink: 0;

View File

@ -5,7 +5,7 @@ $user-list-bg: #F3F6F9;
$color-white: #FFF;
$list-item-bg-hover: darken($user-list-bg, 7%);
.customListFocus {
%customListFocus {
border: $focus-border-size solid $user-list-bg;
border-radius: $focus-border-size;
@ -15,8 +15,8 @@ $list-item-bg-hover: darken($user-list-bg, 7%);
}
}
.customUserItemFocus,
.customChatItemFocus {
%customUserItemFocus,
%customChatItemFocus {
border: $focus-border-size solid $user-list-bg;
border-radius: $focus-border-size;
@ -36,7 +36,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%);
}
}
.customListItemFocus {
%customListItemFocus {
position: relative;
display: inline-block;
border-right: $focus-border-size solid $color-white;
@ -52,9 +52,9 @@ $list-item-bg-hover: darken($user-list-bg, 7%);
}
}
.customInputFocus,
.customSelectFocus,
.customLinkFocus {
%customInputFocus,
%customSelectFocus,
%customLinkFocus {
border: $focus-border-size solid $color-white;
&,
@ -67,7 +67,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%);
}
}
.btnFocus {
%btnFocus {
border: none;
position: relative;
overflow: visible;