summaryrefslogtreecommitdiffstats
path: root/assets/sass/@primer/css/support/mixins
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/@primer/css/support/mixins')
-rw-r--r--assets/sass/@primer/css/support/mixins/buttons.scss167
-rw-r--r--assets/sass/@primer/css/support/mixins/layout.scss58
-rw-r--r--assets/sass/@primer/css/support/mixins/misc.scss29
-rw-r--r--assets/sass/@primer/css/support/mixins/typography.scss84
4 files changed, 0 insertions, 338 deletions
diff --git a/assets/sass/@primer/css/support/mixins/buttons.scss b/assets/sass/@primer/css/support/mixins/buttons.scss
deleted file mode 100644
index 4b6cbb3..0000000
--- a/assets/sass/@primer/css/support/mixins/buttons.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-// Button color generator for primary and themed buttons
-
-// New button hotness
-@mixin btn-solid($color, $bg, $bg2) {
- color: $color;
- background-color: $bg2;
- background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
- @if $bg == $gray-000 {
- &:focus,
- &.focus {
- box-shadow: $btn-input-focus-shadow;
- }
-
- &:hover,
- &.hover {
- background-color: darken($bg2, 3%);
- background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
- background-position: 0 -$em-spacer-5;
- border-color: rgba($black, 0.35);
- }
-
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- background-color: darken(desaturate($bg, 10%), 6%);
- background-image: none;
- border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
- box-shadow: $btn-active-shadow;
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: rgba($color, 0.4);
- background-color: $bg2;
- background-image: none;
- border-color: $border-color-button;
- box-shadow: none;
- }
-
- }
- @else {
- &:focus,
- &.focus {
- box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
- }
-
- &:hover,
- &.hover {
- background-color: darken($bg2, 2%);
- background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
- background-position: 0 -$em-spacer-5;
- border-color: $black-fade-50;
- }
-
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- background-color: darken(mix($bg, $bg2, 50%), 7%);
- background-image: none;
- border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
- box-shadow: $btn-active-shadow;
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: rgba($color, 0.75);
- background-color: mix($bg2, $white, 50%);
- background-image: none;
- border-color: $border-color-button;
- box-shadow: none;
- }
-
- .Counter {
- color: darken($bg, 8%);
- background-color: $white;
- }
- }
-}
-
-// Inverse button hover style
-@mixin btn-inverse($color, $bg, $bg2) {
- color: $color;
- background-color: $bg;
- background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
- &:focus {
- box-shadow: 0 0 0 0.2em rgba($color, 0.4);
- }
-
- &:hover {
- color: $text-white;
- background-color: $color;
- background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
- border-color: $black-fade-50;
-
- .Counter {
- color: $text-white;
- }
- }
-
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- color: $text-white;
- background-color: darken($color, 5%);
- background-image: none;
- border-color: $black-fade-50;
- box-shadow: $btn-active-shadow;
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: rgba($color, 0.4);
- background-color: $bg2;
- background-image: none;
- border-color: $border-color-button;
- box-shadow: none;
- }
-}
-
-// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
-@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
- color: $text-color;
- background-color: $bg-color;
- background-image: none;
-
- .Counter {
- background-color: rgba($black, 0.07);
- }
-
- &:hover,
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- color: $bg-color;
- background-color: $text-color;
- background-image: none;
- border-color: $text-color;
-
- .Counter {
- color: $text-color;
- background-color: $bg-color;
- }
- }
-
- &:focus {
- border-color: $text-color;
- box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: $black-fade-30;
- background-color: $bg-white;
- border-color: $black-fade-15;
- box-shadow: none;
- }
-}
diff --git a/assets/sass/@primer/css/support/mixins/layout.scss b/assets/sass/@primer/css/support/mixins/layout.scss
deleted file mode 100644
index a6d30cf..0000000
--- a/assets/sass/@primer/css/support/mixins/layout.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-// Responsive media queries
-
-@mixin breakpoint($breakpoint) {
- @if $breakpoint == "" {
- @content;
- }
-
- @else {
- // Retrieves the value from the key
- $value: map-get($breakpoints, $breakpoint);
-
- // If the key exists in the map
- @if $value != null {
- // Prints a media query based on the value
- @media (min-width: $value) {
- @content;
- }
- }
-
- // If the key doesn't exist in the map
- @else {
- @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
- + "Please make sure it is defined in `$breakpoints` map.";
- }
- }
-}
-
-// Retina media query
-
-@mixin retina-media-query {
- @media
- only screen and (-webkit-min-device-pixel-ratio: 2),
- only screen and (min--moz-device-pixel-ratio: 2),
- only screen and (-moz-min-device-pixel-ratio: 2),
- only screen and (-o-min-device-pixel-ratio: 2/1),
- only screen and (min-device-pixel-ratio: 2),
- only screen and (min-resolution: 192dpi),
- only screen and (min-resolution: 2dppx) {
- @content;
- }
-}
-
-// Clearfix
-//
-// Clears floats via mixin.
-
-@mixin clearfix {
- &::before {
- display: table;
- content: "";
- }
-
- &::after {
- display: table;
- clear: both;
- content: "";
- }
-}
diff --git a/assets/sass/@primer/css/support/mixins/misc.scss b/assets/sass/@primer/css/support/mixins/misc.scss
deleted file mode 100644
index ebdd32d..0000000
--- a/assets/sass/@primer/css/support/mixins/misc.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// Generate a two-color caret for any element.
-@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
- &::after,
- &::before {
- position: absolute;
- top: 11px;
- right: 100%;
- left: -16px;
- display: block;
- width: 0;
- height: 0;
- pointer-events: none;
- content: " ";
- border-color: transparent;
- border-style: solid solid outset;
- }
-
- &::after {
- margin-top: 1px;
- margin-left: 2px;
- border-width: 7px;
- border-right-color: $foreground;
- }
-
- &::before {
- border-width: 8px;
- border-right-color: $background;
- }
-}
diff --git a/assets/sass/@primer/css/support/mixins/typography.scss b/assets/sass/@primer/css/support/mixins/typography.scss
deleted file mode 100644
index 23ec0e3..0000000
--- a/assets/sass/@primer/css/support/mixins/typography.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-// Text hiding for image based text replacement.
-// Higher performance than -9999px because it only renders
-// the size of the actual text, not a full 9999px box.
-@mixin hide-text() {
- overflow: hidden;
- text-indent: 100%;
- white-space: nowrap;
-}
-
-// Heading mixins for use within components
-// These match heading utilities in utilities/typography
-@mixin h1 {
- font-size: $h1-size;
- font-weight: $font-weight-bold;
-}
-
-@mixin h2 {
- font-size: $h2-size;
- font-weight: $font-weight-bold;
-}
-
-@mixin h3 {
- font-size: $h3-size;
- font-weight: $font-weight-bold;
-}
-
-@mixin h4 {
- font-size: $h4-size;
- font-weight: $font-weight-bold;
-}
-
-@mixin h5 {
- font-size: $h5-size;
- font-weight: $font-weight-bold;
-}
-
-@mixin h6 {
- font-size: $h6-size;
- font-weight: $font-weight-bold;
-}
-
-// Responsive heading mixins
-// There are no responsive mixins for h4-h6 because they are small
-// and don't need to be smaller on mobile.
-@mixin f1-responsive {
- font-size: $h1-size-mobile;
-
- // 32px on desktop
- @include breakpoint(md) { font-size: $h1-size; }
-
-}
-
-@mixin f2-responsive {
- font-size: $h2-size-mobile;
-
- // 24px on desktop
- @include breakpoint(md) { font-size: $h2-size; }
-}
-
-@mixin f3-responsive {
- font-size: $h3-size-mobile;
-
- // 20px on desktop
- @include breakpoint(md) { font-size: $h3-size; }
-
-}
-
-// These use the mixins from above for responsive heading sizes.
-// The following mixins can be used where it's convenient or necessary to
-// couple the responsive font-size with the font-weight.
-@mixin h1-responsive {
- @include f1-responsive;
- font-weight: $font-weight-bold;
-}
-
-@mixin h2-responsive {
- @include f2-responsive;
- font-weight: $font-weight-bold;
-}
-
-@mixin h3-responsive {
- @include f3-responsive;
- font-weight: $font-weight-bold;
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-18 07:18:59 +0000