cheatsheets/_sass/2017/components/page-actions.scss

74 lines
1.1 KiB
SCSS

@mixin action-bar {
& {
height: 32px;
}
& > .link.link > a,
& > .link.link > a::before {
display: inline-block;
height: 32px;
line-height: 32px;
vertical-align: top;
}
&,
& > li {
margin: 0;
padding: 0;
list-style-type: none;
}
& > li > a,
& > li > a:visited {
color: $base-mute;
text-decoration: none;
}
& > li > a:hover,
& > li > a:focus {
color: $base-b3;
& > .text {
color: $base-b3;
}
}
& > li > a::before {
font-size: 16px;
text-align: center;
}
& > li > a > .text {
@include font-size(-1);
display: none;
}
& > li > a > .text.-visible {
display: inline;
}
}
.page-actions {
& {
@include action-bar;
}
& > .facebook > a::before {
@include ion-icon('logo-facebook');
}
& > .twitter > a::before {
@include ion-icon('logo-twitter');
}
& > .github > a::before {
@include ion-icon('logo-github');
}
& > .link.-button > a {
box-shadow: inset 0 0 0 1px $dark-line-color;
border-radius: 2px;
padding: 0 8px;
}
}