Tweak Flat skin.
Artem Sapegin
parent
d09459f632
commit
6b2b33b4c7
|
|
@ -111,7 +111,6 @@ tweak-inverted-text() {
|
|||
display:none;
|
||||
position:relative;
|
||||
font-weight:normal;
|
||||
cursor:default;
|
||||
}
|
||||
&_ready &__counter,
|
||||
&__counter_single {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,16 @@
|
|||
@import 'font/social-likes'
|
||||
|
||||
light_gray = #999;
|
||||
margin=.5em;
|
||||
margin = .5em;
|
||||
|
||||
button-colors(button, color) {
|
||||
.social-likes__widget_{button} {
|
||||
background:color;
|
||||
}
|
||||
.social-likes_light .social-likes__button_{button} {
|
||||
color:color;
|
||||
}
|
||||
}
|
||||
|
||||
.social-likes {
|
||||
&,
|
||||
|
|
@ -17,14 +26,14 @@ margin=.5em;
|
|||
|
||||
&,
|
||||
&__button_single {
|
||||
font-size:15px; // Base font size
|
||||
font-size:14px; // Base font size
|
||||
}
|
||||
|
||||
&__widget {
|
||||
margin:margin;
|
||||
line-height:1.5;
|
||||
background:#fff;
|
||||
border:0;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
&__button,
|
||||
|
|
@ -32,12 +41,12 @@ margin=.5em;
|
|||
box-sizing:border-box;
|
||||
font-family:"Helvetica Neue", Arial, sans-serif;
|
||||
vertical-align:middle;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding:.025em .7em .2em 1.65em;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
-moz-osx-font-smoothing:grayscale;
|
||||
}
|
||||
|
|
@ -55,9 +64,9 @@ margin=.5em;
|
|||
}
|
||||
|
||||
&__counter {
|
||||
padding:0 .5em;
|
||||
padding-right:.5em;
|
||||
font-weight:normal;
|
||||
color:#000;
|
||||
font-size:.85em;
|
||||
}
|
||||
|
||||
&__close {
|
||||
|
|
@ -71,24 +80,22 @@ margin=.5em;
|
|||
|
||||
// Vertical mode
|
||||
&_vertical {
|
||||
margin:-1em -.5em;
|
||||
.social-likes__widget {
|
||||
margin:1em .5em;
|
||||
}
|
||||
.social-likes__button {
|
||||
min-width:11em;
|
||||
min-width:13em;
|
||||
}
|
||||
.social-likes__counter {
|
||||
min-width:3em;
|
||||
text-align:right;
|
||||
float:right;
|
||||
margin-top:.3em;
|
||||
}
|
||||
}
|
||||
|
||||
// Light mode
|
||||
&_light .social-likes__widget {
|
||||
background:none;
|
||||
}
|
||||
&_light .social-likes__button,
|
||||
&_single-light + .social-likes__button {
|
||||
min-width:0;
|
||||
background:none;
|
||||
font-weight:normal;
|
||||
text-decoration:underline;
|
||||
-webkit-font-smoothing:subpixel-antialiased;
|
||||
|
|
@ -96,9 +103,8 @@ margin=.5em;
|
|||
}
|
||||
&_light .social-likes__counter,
|
||||
&_single-light + .social-likes__button + .social-likes__counter {
|
||||
min-width:0;
|
||||
padding-left:0;
|
||||
text-align:left;
|
||||
float:none;
|
||||
margin-top:0;
|
||||
color:light_gray;
|
||||
}
|
||||
|
||||
|
|
@ -122,8 +128,8 @@ margin=.5em;
|
|||
|
||||
// Single button mode
|
||||
&_single {
|
||||
top:-.5em;
|
||||
left:-.5em;
|
||||
top:(-(margin));
|
||||
left:(-(margin));
|
||||
padding:.35em .5em .25em;
|
||||
background:#fff;
|
||||
border:1px solid #ddd;
|
||||
|
|
@ -134,26 +140,22 @@ margin=.5em;
|
|||
}
|
||||
|
||||
// Single button
|
||||
.social-likes__button_single {
|
||||
.social-likes__widget_single {
|
||||
line-height:1.2;
|
||||
background:#87c44d;
|
||||
.social-likes_single-light + & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
.social-likes__counter_single {
|
||||
font-size:.75em;
|
||||
// font-size:.75em;
|
||||
}
|
||||
.social-likes__icon_single {
|
||||
top:.25em;
|
||||
top:.07em;
|
||||
}
|
||||
|
||||
// Facebook
|
||||
.social-likes__button_facebook {
|
||||
background:#3d5b95;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('facebook', #3d5b95);
|
||||
.social-likes__icon_facebook {
|
||||
left:.38em;
|
||||
.social-likes_notext & {
|
||||
|
|
@ -162,12 +164,7 @@ margin=.5em;
|
|||
}
|
||||
|
||||
// Twitter
|
||||
.social-likes__button_twitter {
|
||||
background:#24aadd;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('twitter', #24aadd);
|
||||
.social-likes__icon_twitter {
|
||||
top:.1em;
|
||||
.social-likes_light & {
|
||||
|
|
@ -176,12 +173,7 @@ margin=.5em;
|
|||
}
|
||||
|
||||
// Google+
|
||||
.social-likes__button_plusone {
|
||||
background:#d23e30;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('plusone', #d23e30);
|
||||
.social-likes__icon_plusone {
|
||||
.social-likes_notext & {
|
||||
margin-left:0;
|
||||
|
|
@ -192,12 +184,7 @@ margin=.5em;
|
|||
}
|
||||
|
||||
// Mail.ru
|
||||
.social-likes__button_mailru {
|
||||
background:#00468c;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('mailru', #00468c);
|
||||
.social-likes__icon_mailru {
|
||||
.social-likes_light & {
|
||||
left:.1em;
|
||||
|
|
@ -208,24 +195,14 @@ margin=.5em;
|
|||
}
|
||||
|
||||
// Vkontakte
|
||||
.social-likes__button_vkontakte {
|
||||
background:#587e9f;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('vkontakte', #587e9f);
|
||||
.social-likes__icon_vkontakte {
|
||||
top:.2em;
|
||||
left:.2em;
|
||||
}
|
||||
|
||||
// Odnoklassniki
|
||||
.social-likes__button_odnoklassniki {
|
||||
background:#f59310;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('odnoklassniki', #f59310);
|
||||
.social-likes__icon_odnoklassniki {
|
||||
left:.4em;
|
||||
.social-likes_light & {
|
||||
|
|
@ -234,12 +211,7 @@ margin=.5em;
|
|||
}
|
||||
|
||||
// Pinterest
|
||||
.social-likes__button_pinterest {
|
||||
background:#cb132d;
|
||||
.social-likes_light & {
|
||||
color:@background;
|
||||
}
|
||||
}
|
||||
button-colors('pinterest', #cb132d);
|
||||
.social-likes__icon_pinterest {
|
||||
.social-likes_light & {
|
||||
left:.1em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue