primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-14 06:44:38 +03:00
Code Issues Projects Releases Wiki Activity

Lint

Browse Source
This commit is contained in:
simurai 2020-03-02 17:07:59 +09:00
parent eec4f29e52
commit 8f0e32114e
10 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/alerts/flash.scss
View File

@ -1,8 +1,9 @@
// Default flash
// stylelint-disable selector-max-type
.flash {
min-height: $size-7;
position: relative;
min-height: $size-7;
// stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3;
// stylelint-disable-next-line primer/colors
color: $blue-800;

39
src/avatars/avatar.scss
View File

@ -1,15 +1,10 @@
.avatar {
display: inline-block;
max-width: 100%;
overflow: hidden; // Ensure page layout in Firefox should images fail to load
line-height: $lh-condensed-ultra;
vertical-align: middle;
border-radius: $border-radius;
max-width: 100%;
}
.avatar-small {
// stylelint-disable-next-line primer/borders
border-radius: $border-radius / 2;
}
.avatar-link {
@ -24,13 +19,27 @@
margin-bottom: 3px;
}
// sizes
// Border radius
.avatar-1 { width: $size-1; height: $size-1; border-radius: $border-radius / 2; }
.avatar-2 { width: $size-2; height: $size-2; border-radius: $border-radius / 2; }
.avatar-3 { width: $size-3; height: $size-3; }
.avatar-4 { width: $size-4; height: $size-4; }
.avatar-5 { width: $size-5; height: $size-5; }
.avatar-6 { width: $size-6; height: $size-6; }
.avatar-7 { width: $size-7; height: $size-7; }
.avatar-8 { width: $size-8; height: $size-8; }
.avatar-1,
.avatar-2,
.avatar-small {
// stylelint-disable-next-line primer/borders
border-radius: $border-radius / 2;
}
// Sizes
@mixin avatar-size( $size ) {
width: $size;
height: $size;
}
.avatar-1 { @include avatar-size( $size-1 ); }
.avatar-2 { @include avatar-size( $size-2 ); }
.avatar-3 { @include avatar-size( $size-3 ); }
.avatar-4 { @include avatar-size( $size-4 ); }
.avatar-5 { @include avatar-size( $size-5 ); }
.avatar-6 { @include avatar-size( $size-6 ); }
.avatar-7 { @include avatar-size( $size-7 ); }
.avatar-8 { @include avatar-size( $size-8 ); }

11
src/buttons/button.scss
View File

@ -4,11 +4,11 @@
.btn {
position: relative;
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 0 $spacer-3;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
line-height: heightWithoutBorder($size-5);
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-5);
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
@ -268,12 +268,13 @@
//
// Tweak `line-height` to make them smaller.
.btn-sm {
// stylelint-disable-next-line primer/spacing
padding-left: 12px;
// stylelint-disable-next-line primer/spacing
padding-right: 12px;
// stylelint-disable-next-line primer/spacing
padding-left: 12px;
font-size: $font-size-small;
line-height: heightWithoutBorder($size-4);
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-4);
}
// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>

8
src/forms/form-control.scss
View File

@ -20,7 +20,8 @@ label {
// stylelint-disable-next-line primer/spacing
padding: 0 12px;
font-size: $body-font-size;
line-height: heightWithoutBorder($size-5);
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-5);
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
@ -94,13 +95,14 @@ textarea.form-control {
// Mini inputs, to match .minibutton
.input-sm {
font-size: $font-size-small;
line-height: heightWithoutBorder($size-4);
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-4);
}
// Large inputs
.input-lg {
padding-left: $spacer-3;
padding-right: $spacer-3;
padding-left: $spacer-3;
font-size: $h4-size;
}

4
src/forms/form-select.scss
View File

@ -4,6 +4,7 @@
.form-select {
display: inline-block;
max-width: 100%;
// stylelint-disable-next-line primer/typography
height: $size-5;
padding-right: $spacer-4;
background-color: $bg-white;
@ -27,7 +28,8 @@
height: $size-4;
min-height: $size-4;
font-size: $font-size-small;
line-height: heightWithoutBorder($size-4);
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-4);
&[multiple] {
height: auto;

2
src/labels/labels.scss
View File

@ -10,8 +10,8 @@
.label, // TODO: Deprecte
.Label {
@include labels-base;
border-color: $border-color;
background-color: transparent !important; // TODO: Remove again
border-color: $border-color;
&:hover {
text-decoration: none;

5
src/labels/mixins.scss
View File

@ -10,14 +10,13 @@
font-size: $font-size-small;
font-weight: $font-weight-semibold;
line-height: 18px;
// stylelint-disable-next-line primer/borders
border: $border-width $border-style transparent;
border-radius: 2em;
}
@mixin labels-large {
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
line-height: 22px;
}
@ -28,6 +27,6 @@
@mixin labels--inline {
display: inline;
padding: 0.1667em 0.5em;
font-size: 0.9em;
padding: .1667em .5em;
}

5
src/labels/states.scss
View File

@ -12,9 +12,11 @@
.state, // TODO: Deprecate
.State {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 0 12px;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: $size-5;
color: $text-white;
text-align: center;
@ -41,9 +43,10 @@
// Small
.State--small {
padding-left: $spacer-2;
padding-right: $spacer-2;
padding-left: $spacer-2;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: $size-3;
.octicon {

4
src/navigation/subnav.scss
View File

@ -20,10 +20,10 @@
.subnav-item {
position: relative;
float: left;
// stylelint-disable-next-line primer/spacing
padding: 0 $spacer-3;
font-weight: $font-weight-semibold;
line-height: heightWithoutBorder($size-5);
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-5);
color: $text-gray-dark;
border: $border;

4
src/support/mixins/typography.scss
View File

@ -1,7 +1,7 @@
// heightWithoutBorder
// height-without-border
//
// Removes top/bottom border from the total height
@function heightWithoutBorder($height) {
@function height-without-border($height) {
@return $height - ($border-width * 2);
}