diff options
Diffstat (limited to 'assets/sass/@primer/css/buttons')
-rw-r--r-- | assets/sass/@primer/css/buttons/README.md | 25 | ||||
-rw-r--r-- | assets/sass/@primer/css/buttons/button-group.scss | 91 | ||||
-rw-r--r-- | assets/sass/@primer/css/buttons/button.scss | 201 | ||||
-rw-r--r-- | assets/sass/@primer/css/buttons/index.scss | 4 | ||||
-rw-r--r-- | assets/sass/@primer/css/buttons/misc.scss | 90 |
5 files changed, 0 insertions, 411 deletions
diff --git a/assets/sass/@primer/css/buttons/README.md b/assets/sass/@primer/css/buttons/README.md deleted file mode 100644 index 3489e3a..0000000 --- a/assets/sass/@primer/css/buttons/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "buttons" -generated: true ---- - -# Primer CSS: `buttons` bundle - -## Usage - -Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: - -```scss -@import "@primer/css/buttons/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/buttons.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/buttons/button-group.scss b/assets/sass/@primer/css/buttons/button-group.scss deleted file mode 100644 index 429fad9..0000000 --- a/assets/sass/@primer/css/buttons/button-group.scss +++ /dev/null @@ -1,91 +0,0 @@ -// Button group -// -// A button group is a series of buttons laid out next to each other, all part -// of one visual button, but separated by rules to be separate. - -.BtnGroup { - display: inline-block; - vertical-align: middle; - @include clearfix(); - - // Proper spacing for multiple button groups (a la, gollum editor) - + .BtnGroup, - + .btn { - margin-left: $spacer-1; - } -} - -.BtnGroup-item { - position: relative; - float: left; - border-right-width: 0; - border-radius: 0; - - &:first-child { - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; - } - - &:last-child { - border-right-width: $border-width; - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; - } - - &.selected, - &[aria-selected=true], - &:focus, - &:active, - &:hover { - border-right-width: $border-width; - - + .BtnGroup-item, - + .BtnGroup-parent .BtnGroup-item { - border-left-width: 0; - } - } -} - -.BtnGroup-parent { - float: left; - - &:first-child .BtnGroup-item { - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; - } - - &:last-child .BtnGroup-item { - border-right-width: $border-width; - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; - } - - .BtnGroup-item { - border-right-width: 0; - border-radius: 0; - } - - &.selected, - &[aria-selected=true], - &:focus, - &:active, - &:hover { - .BtnGroup-item { - border-right-width: $border-width; - } - - + .BtnGroup-item, - + .BtnGroup-parent .BtnGroup-item { - border-left-width: 0; - } - } -} - -// ensure that the focus ring sits above the adjacent buttons -.BtnGroup-item, -.BtnGroup-parent { - &:focus, - &:active { - z-index: 1; - } -} diff --git a/assets/sass/@primer/css/buttons/button.scss b/assets/sass/@primer/css/buttons/button.scss deleted file mode 100644 index 5bdd90a..0000000 --- a/assets/sass/@primer/css/buttons/button.scss +++ /dev/null @@ -1,201 +0,0 @@ -// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors - -// Base button styles -.btn { - position: relative; - display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 6px 12px; - font-size: $body-font-size; - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography - line-height: 20px; // Specifically not inherit our `<body>` default - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - user-select: none; - background-repeat: repeat-x; - background-position: -1px -1px; - background-size: 110% 110%; - border: $border-width $border-style $border-color-button; - // stylelint-disable-next-line primer/borders - border-radius: 0.25em; - appearance: none; // Corrects inability to style clickable `input` types in iOS. - - i { - font-style: normal; - font-weight: $font-weight-semibold; - opacity: 0.75; - } - - .octicon { - vertical-align: text-top; - } - - // Darken for just a tad more contrast against the button background - .Counter { - color: $text-gray; - text-shadow: none; - // stylelint-disable-next-line primer/colors - background-color: rgba($black, 0.1); - } - - &:hover { - text-decoration: none; - background-repeat: repeat-x; - } - - &:focus { - outline: 0; - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - cursor: default; - // Repeat `background-position` because `:hover` - background-position: 0 0; - } - - &:active, - &.selected, - &[aria-selected=true] { - background-image: none; - } -} - -.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); } -.btn-primary { @include btn-solid($text-white, $green-400, $green-500); } -.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); } -.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); } - -// Outline button -// -// For when we need a linky-action that's not too heavy in busier -// areas like conversation timelines. -.btn-outline { - @include btn-outline($text-blue); -} - -// Social button count -.btn-with-count { - float: left; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -// Minibutton overrides -// -// Tweak `line-height` to make them smaller. -.btn-sm { - // stylelint-disable-next-line primer/spacing - padding: 3px 10px; - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - line-height: 20px; -} - -// 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> -.btn-large { - padding: $em-spacer-6 1.25em; - font-size: inherit; - // stylelint-disable-next-line primer/borders - border-radius: 6px; -} - -// Full-width button -// -// These buttons expand to the full width of their parent container -.btn-block { - display: block; - width: 100%; - text-align: center; -} - -// Link-like buttons -// -// This class is for styling <button> and <input> elements to look like links -.btn-link { - display: inline-block; - padding: 0; - font-size: inherit; - color: $text-blue; - text-decoration: none; - white-space: nowrap; - cursor: pointer; - user-select: none; - background-color: transparent; - border: 0; - appearance: none; // Corrects inability to style clickable `input` types in iOS. - - &:hover { - text-decoration: underline; - } - - &:disabled, - &[aria-disabled=true] { - &, - &:hover { - // stylelint-disable-next-line primer/colors - color: rgba($gray-600, 0.5); - cursor: default; - } - } -} - -// Invisible button -// -// Typically used as a "cancel" button next to a .btn -.btn-invisible { - color: $text-blue; - background-color: $bg-white; // Reset default gradient backgrounds and colors - background-image: none; - border: 0; - - &:hover, - &:active, - &:focus, - &.selected, - &[aria-selected=true], - &.zeroclipboard-is-hover, - &.zeroclipboard-is-active { - color: $text-blue; - background: none; - outline: none; - box-shadow: none; - } -} - -// Octicon button -// -// Icon-only buttons -.btn-octicon { - display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 5px; - // stylelint-disable-next-line primer/spacing - margin-left: 5px; - line-height: $lh-condensed-ultra; - color: $text-gray; - vertical-align: middle; - - // For `<button>` elements - background: transparent; - border: 0; - - &:hover { color: $text-blue; } - - &.disabled, - &[aria-disabled=true] { - // stylelint-disable-next-line primer/colors - color: $gray-400; - cursor: default; - - // stylelint-disable-next-line primer/colors - &:hover { color: $gray-400; } - } -} - -.btn-octicon-danger:hover { - color: $text-red; -} diff --git a/assets/sass/@primer/css/buttons/index.scss b/assets/sass/@primer/css/buttons/index.scss deleted file mode 100644 index fcb71f3..0000000 --- a/assets/sass/@primer/css/buttons/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "../support/index.scss"; -@import "./button.scss"; -@import "./button-group.scss"; -@import "./misc.scss"; diff --git a/assets/sass/@primer/css/buttons/misc.scss b/assets/sass/@primer/css/buttons/misc.scss deleted file mode 100644 index dcf6f7b..0000000 --- a/assets/sass/@primer/css/buttons/misc.scss +++ /dev/null @@ -1,90 +0,0 @@ -// stylelint-disable selector-max-type - -// Close button -// -// Typically used with an octicon-x -.close-button { - padding: 0; - background: transparent; - border: 0; - outline: none; -} - -// 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; - // stylelint-disable-next-line primer/spacing - margin-left: 5px; - line-height: 0; - } -} - -.hidden-text-expander a, -.ellipsis-expander { - display: inline-block; - height: 12px; - // stylelint-disable-next-line primer/spacing - padding: 0 5px 5px; - font-size: $font-size-small; - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography - line-height: 6px; - // stylelint-disable-next-line primer/colors - color: $gray-700; - text-decoration: none; - vertical-align: middle; - // stylelint-disable-next-line primer/colors - background: lighten($gray-300, 5%); - border: 0; - // stylelint-disable-next-line primer/borders - border-radius: 1px; - - &:hover { - text-decoration: none; - // stylelint-disable-next-line primer/colors - background-color: darken($gray-300, 4%); - } - - &:active { - color: $text-white; - // stylelint-disable-next-line primer/colors - background-color: $blue-400; - } -} - -// Social count bubble -// -// A container that is used for social bubbles counts. -.social-count { - float: left; - // stylelint-disable-next-line primer/spacing - padding: 3px 10px; - font-size: $font-size-small; - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography - line-height: 20px; - color: $text-gray-dark; - vertical-align: middle; - background-color: $bg-white; - border: $border-width $border-style $border-color-button; - border-left: 0; - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; - - &:hover, - &:active { - text-decoration: none; - } - - &:hover { - color: $text-blue; - cursor: pointer; - } -} |