From 6bdd1c4c0ea567c45fdecb1e858a99ee5da246ad Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Mon, 13 Apr 2020 19:13:39 +0800
Subject: Initial commit
---
assets/sass/@primer/css/buttons/button.scss | 201 ++++++++++++++++++++++++++++
1 file changed, 201 insertions(+)
create mode 100644 assets/sass/@primer/css/buttons/button.scss
(limited to 'assets/sass/@primer/css/buttons/button.scss')
diff --git a/assets/sass/@primer/css/buttons/button.scss b/assets/sass/@primer/css/buttons/button.scss
new file mode 100644
index 0000000..5bdd90a
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/button.scss
@@ -0,0 +1,201 @@
+// 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 `` 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,
+.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