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

104 lines
1.5 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;
width: auto;
}
& > .link.link > a {
padding: 0 8px;
}
&,
& > 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;
}
& + & {
margin-left: 8px;
}
& > .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 16px;
margin: 0 8px;
transition: all 100ms linear;
& > .text {
margin-left: 4px;
}
&:hover,
&:focus {
background: $base-panel;
box-shadow: $shadow3;
}
}
// Collapse
& > .link:first-child > a {
margin-left: 0;
}
& > .link:last-child > a {
margin-right: 0;
}
}