summaryrefslogtreecommitdiffstats
path: root/assets/sass/@primer/css/buttons
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/@primer/css/buttons')
-rw-r--r--assets/sass/@primer/css/buttons/README.md25
-rw-r--r--assets/sass/@primer/css/buttons/button-group.scss91
-rw-r--r--assets/sass/@primer/css/buttons/button.scss201
-rw-r--r--assets/sass/@primer/css/buttons/index.scss4
-rw-r--r--assets/sass/@primer/css/buttons/misc.scss90
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;
- }
-}