primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-29 00:58:31 +03:00
Code Issues Projects Releases Wiki Activity

Move some of the exotic buttons to /misc

Browse Source
This commit is contained in:
simurai 2019-10-24 12:57:56 +09:00
parent 4de965062f
commit efbed684ee
3 changed files with 71 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/buttons/button.scss
View File

@ -94,75 +94,6 @@
border-radius: 6px;
}
// Hidden text button
//
// Use `.hidden-text-expander` to indicate and expand hidden text.
.hidden-text-expander {
display: block;
&.inline {
position: relative;
top: -1px;
display: inline-block;
margin-left: 5px;
line-height: 0;
}
}
.hidden-text-expander a,
.ellipsis-expander {
display: inline-block;
height: 12px;
padding: 0 5px 5px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
line-height: 6px;
color: $gray-700;
text-decoration: none;
vertical-align: middle;
background: lighten($gray-300, 5%);
border: 0;
border-radius: 1px;
&:hover {
text-decoration: none;
background-color: darken($gray-300, 4%);
}
&:active {
color: $text-white;
background-color: $blue-400;
}
}
// Social count bubble
//
// A container that is used for social bubbles counts.
.social-count {
float: left;
padding: 3px 10px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
border: 1px solid transparentize($black, 0.8); // match with .btn
border-left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: $text-blue;
cursor: pointer;
}
}
// Full-width button
//
// These buttons expand to the full width of their parent container

1
src/buttons/index.scss
View File

@ -1,3 +1,4 @@
@import "../support/index.scss";
@import "./button.scss";
@import "./button-group.scss";
@import "./misc.scss";

70
src/buttons/misc.scss Normal file
View File

@ -0,0 +1,70 @@
// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
// Hidden text button
//
// Use `.hidden-text-expander` to indicate and expand hidden text.
.hidden-text-expander {
display: block;
&.inline {
position: relative;
top: -1px;
display: inline-block;
margin-left: 5px;
line-height: 0;
}
}
.hidden-text-expander a,
.ellipsis-expander {
display: inline-block;
height: 12px;
padding: 0 5px 5px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
line-height: 6px;
color: $gray-700;
text-decoration: none;
vertical-align: middle;
background: lighten($gray-300, 5%);
border: 0;
border-radius: 1px;
&:hover {
text-decoration: none;
background-color: darken($gray-300, 4%);
}
&:active {
color: $text-white;
background-color: $blue-400;
}
}
// Social count bubble
//
// A container that is used for social bubbles counts.
.social-count {
float: left;
padding: 3px 10px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
border: 1px solid transparentize($black, 0.8); // match with .btn
border-left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: $text-blue;
cursor: pointer;
}
}