primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-14 23:12:03 +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 // Default flash
// stylelint-disable selector-max-type // stylelint-disable selector-max-type
.flash { .flash {
min-height: $size-7;
position: relative; position: relative;
min-height: $size-7;
// stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3; padding: 12px $spacer-3;
// stylelint-disable-next-line primer/colors // stylelint-disable-next-line primer/colors
color: $blue-800; color: $blue-800;

39
src/avatars/avatar.scss
View File

@ -1,15 +1,10 @@
.avatar { .avatar {
display: inline-block; display: inline-block;
max-width: 100%;
overflow: hidden; // Ensure page layout in Firefox should images fail to load overflow: hidden; // Ensure page layout in Firefox should images fail to load
line-height: $lh-condensed-ultra; line-height: $lh-condensed-ultra;
vertical-align: middle; vertical-align: middle;
border-radius: $border-radius; border-radius: $border-radius;
max-width: 100%;
}
.avatar-small {
// stylelint-disable-next-line primer/borders
border-radius: $border-radius / 2;
} }
.avatar-link { .avatar-link {
@ -24,13 +19,27 @@
margin-bottom: 3px; margin-bottom: 3px;
} }
// sizes // Border radius
.avatar-1 { width: $size-1; height: $size-1; border-radius: $border-radius / 2; } .avatar-1,
.avatar-2 { width: $size-2; height: $size-2; border-radius: $border-radius / 2; } .avatar-2,
.avatar-3 { width: $size-3; height: $size-3; } .avatar-small {
.avatar-4 { width: $size-4; height: $size-4; } // stylelint-disable-next-line primer/borders
.avatar-5 { width: $size-5; height: $size-5; } border-radius: $border-radius / 2;
.avatar-6 { width: $size-6; height: $size-6; } }
.avatar-7 { width: $size-7; height: $size-7; }
.avatar-8 { width: $size-8; height: $size-8; } // 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 { .btn {
position: relative; position: relative;
display: inline-block; display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 0 $spacer-3; padding: 0 $spacer-3;
font-size: $body-font-size; font-size: $body-font-size;
font-weight: $font-weight-semibold; 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; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -268,12 +268,13 @@
// //
// Tweak `line-height` to make them smaller. // Tweak `line-height` to make them smaller.
.btn-sm { .btn-sm {
// stylelint-disable-next-line primer/spacing
padding-left: 12px;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding-right: 12px; padding-right: 12px;
// stylelint-disable-next-line primer/spacing
padding-left: 12px;
font-size: $font-size-small; 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> // 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 // stylelint-disable-next-line primer/spacing
padding: 0 12px; padding: 0 12px;
font-size: $body-font-size; 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; color: $text-gray-dark;
vertical-align: middle; vertical-align: middle;
background-color: $bg-white; background-color: $bg-white;
@ -94,13 +95,14 @@ textarea.form-control {
// Mini inputs, to match .minibutton // Mini inputs, to match .minibutton
.input-sm { .input-sm {
font-size: $font-size-small; 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 // Large inputs
.input-lg { .input-lg {
padding-left: $spacer-3;
padding-right: $spacer-3; padding-right: $spacer-3;
padding-left: $spacer-3;
font-size: $h4-size; font-size: $h4-size;
} }

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

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

2
src/labels/labels.scss
View File

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

5
src/labels/mixins.scss
View File

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

5
src/labels/states.scss
View File

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

4
src/navigation/subnav.scss
View File

@ -20,10 +20,10 @@
.subnav-item { .subnav-item {
position: relative; position: relative;
float: left; float: left;
// stylelint-disable-next-line primer/spacing
padding: 0 $spacer-3; padding: 0 $spacer-3;
font-weight: $font-weight-semibold; 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; color: $text-gray-dark;
border: $border; 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 // Removes top/bottom border from the total height
@function heightWithoutBorder($height) { @function height-without-border($height) {
@return $height - ($border-width * 2); @return $height - ($border-width * 2);
} }