Skip to content

Commit

Permalink
added sass files
Browse files Browse the repository at this point in the history
  • Loading branch information
trentwintermeier authored Apr 23, 2024
1 parent 4a22aae commit 8a4e797
Show file tree
Hide file tree
Showing 29 changed files with 3,091 additions and 0 deletions.
7 changes: 7 additions & 0 deletions _sass/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# normalize.scss

Normalize.scss is an SCSS copy of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.

The [normalize.scss fork](https://github.com/guerrero/normalize.scss) of [normalize.css](http://necolas.github.io/normalize.css) was archived in 2014, and has not been updated since v0.1.0.

[View the normalize.css test file](http://necolas.github.io/normalize.css/latest/test.html)
27 changes: 27 additions & 0 deletions _sass/_buttons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// Colored button

@mixin btn-color($fg, $bg) {
color: $fg;
background-color: darken($bg, 2%);
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);

&:hover,
&.zeroclipboard-is-hover {
color: $fg;
background-color: darken($bg, 4%);
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
}

&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($bg, 5%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

&.selected:hover {
background-color: darken($bg, 10%);
}
}
239 changes: 239 additions & 0 deletions _sass/_colors.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
//
// Utility classes for colors
//

// Text colors

.text-grey-dk-000 {
color: $grey-dk-000 !important;
}

.text-grey-dk-100 {
color: $grey-dk-100 !important;
}

.text-grey-dk-200 {
color: $grey-dk-200 !important;
}

.text-grey-dk-250 {
color: $grey-dk-250 !important;
}

.text-grey-dk-300 {
color: $grey-dk-300 !important;
}

.text-grey-lt-000 {
color: $grey-lt-000 !important;
}

.text-grey-lt-100 {
color: $grey-lt-100 !important;
}

.text-grey-lt-200 {
color: $grey-lt-200 !important;
}

.text-grey-lt-300 {
color: $grey-lt-300 !important;
}

.text-blue-000 {
color: $blue-000 !important;
}

.text-blue-100 {
color: $blue-100 !important;
}

.text-blue-200 {
color: $blue-200 !important;
}

.text-blue-300 {
color: $blue-300 !important;
}

.text-green-000 {
color: $green-000 !important;
}

.text-green-100 {
color: $green-100 !important;
}

.text-green-200 {
color: $green-200 !important;
}

.text-green-300 {
color: $green-300 !important;
}

.text-purple-000 {
color: $purple-000 !important;
}

.text-purple-100 {
color: $purple-100 !important;
}

.text-purple-200 {
color: $purple-200 !important;
}

.text-purple-300 {
color: $purple-300 !important;
}

.text-yellow-000 {
color: $yellow-000 !important;
}

.text-yellow-100 {
color: $yellow-100 !important;
}

.text-yellow-200 {
color: $yellow-200 !important;
}

.text-yellow-300 {
color: $yellow-300 !important;
}

.text-red-000 {
color: $red-000 !important;
}

.text-red-100 {
color: $red-100 !important;
}

.text-red-200 {
color: $red-200 !important;
}

.text-red-300 {
color: $red-300 !important;
}

// Background colors

.bg-grey-dk-000 {
background-color: $grey-dk-000 !important;
}

.bg-grey-dk-100 {
background-color: $grey-dk-100 !important;
}

.bg-grey-dk-200 {
background-color: $grey-dk-200 !important;
}

.bg-grey-dk-250 {
background-color: $grey-dk-250 !important;
}

.bg-grey-dk-300 {
background-color: $grey-dk-300 !important;
}

.bg-grey-lt-000 {
background-color: $grey-lt-000 !important;
}

.bg-grey-lt-100 {
background-color: $grey-lt-100 !important;
}

.bg-grey-lt-200 {
background-color: $grey-lt-200 !important;
}

.bg-grey-lt-300 {
background-color: $grey-lt-300 !important;
}

.bg-blue-000 {
background-color: $blue-000 !important;
}

.bg-blue-100 {
background-color: $blue-100 !important;
}

.bg-blue-200 {
background-color: $blue-200 !important;
}

.bg-blue-300 {
background-color: $blue-300 !important;
}

.bg-green-000 {
background-color: $green-000 !important;
}

.bg-green-100 {
background-color: $green-100 !important;
}

.bg-green-200 {
background-color: $green-200 !important;
}

.bg-green-300 {
background-color: $green-300 !important;
}

.bg-purple-000 {
background-color: $purple-000 !important;
}

.bg-purple-100 {
background-color: $purple-100 !important;
}

.bg-purple-200 {
background-color: $purple-200 !important;
}

.bg-purple-300 {
background-color: $purple-300 !important;
}

.bg-yellow-000 {
background-color: $yellow-000 !important;
}

.bg-yellow-100 {
background-color: $yellow-100 !important;
}

.bg-yellow-200 {
background-color: $yellow-200 !important;
}

.bg-yellow-300 {
background-color: $yellow-300 !important;
}

.bg-red-000 {
background-color: $red-000 !important;
}

.bg-red-100 {
background-color: $red-100 !important;
}

.bg-red-200 {
background-color: $red-200 !important;
}

.bg-red-300 {
background-color: $red-300 !important;
}
9 changes: 9 additions & 0 deletions _sass/_functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@function rem($size, $unit: "") {
$remSize: $size / $root-font-size;

@if ($unit == false) {
@return #{$remSize};
} @else {
@return #{$remSize}rem;
}
}
95 changes: 95 additions & 0 deletions _sass/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
// stylelint-disable primer/selector-no-utility, primer/no-override
//
// Utility classes for layout
//

// Display

.d-block {
display: block !important;
}
.d-flex {
display: flex !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-none {
display: none !important;
}

@each $media-query in map-keys($media-queries) {
@for $i from 1 through length($spacers) {
@include mq($media-query) {
$size: #{map-get($spacers, sp-#{$i - 1})};
$scale: #{$i - 1};

// .d-sm-block, .d-md-none, .d-lg-inline
.d-#{$media-query}-block {
display: block !important;
}
.d-#{$media-query}-flex {
display: flex !important;
}
.d-#{$media-query}-inline {
display: inline !important;
}
.d-#{$media-query}-inline-block {
display: inline-block !important;
}
.d-#{$media-query}-none {
display: none !important;
}
}
}
}

// Horizontal alignment

.float-left {
float: left !important;
}

.float-right {
float: right !important;
}

.flex-justify-start {
justify-content: flex-start !important;
}

.flex-justify-end {
justify-content: flex-end !important;
}

.flex-justify-between {
justify-content: space-between !important;
}

.flex-justify-around {
justify-content: space-around !important;
}

// Vertical alignment

.v-align-baseline {
vertical-align: baseline !important;
}
.v-align-bottom {
vertical-align: bottom !important;
}
.v-align-middle {
vertical-align: middle !important;
}
.v-align-text-bottom {
vertical-align: text-bottom !important;
}
.v-align-text-top {
vertical-align: text-top !important;
}
.v-align-top {
vertical-align: top !important;
}
17 changes: 17 additions & 0 deletions _sass/_lists.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
//
// Utility classes for lists
//

// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type

.list-style-none {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;

li {
&::before {
display: none !important;
}
}
}
Loading

0 comments on commit 8a4e797

Please sign in to comment.