Skip to content

Commit 615b26f

Browse files
sbates-idrcsbates-idrc
committed
Add Bootstrap type and buttons
1 parent 31e7f6d commit 615b26f

10 files changed

Lines changed: 574 additions & 1 deletion

File tree

‎src/index.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,28 @@ $theme-colors: (
1919
'command-block--none': #F8F8F8
2020
);
2121

22-
/* Bootstrap Reboot */
22+
/* Bootstrap reboot */
2323

2424
@import 'vendor/bootstrap-4.6.2/scss/functions';
2525
@import 'vendor/bootstrap-4.6.2/scss/variables';
2626
@import 'vendor/bootstrap-4.6.2/scss/vendor/rfs';
2727
@import 'vendor/bootstrap-4.6.2/scss/mixins/hover';
2828
@import 'vendor/bootstrap-4.6.2/scss/reboot';
2929

30+
/* Bootstrap type */
31+
32+
@import 'vendor/bootstrap-4.6.2/scss/mixins/lists';
33+
@import 'vendor/bootstrap-4.6.2/scss/type';
34+
35+
/* Bootstrap buttons */
36+
37+
@import 'vendor/bootstrap-4.6.2/scss/mixins/buttons';
38+
@import 'vendor/bootstrap-4.6.2/scss/mixins/border-radius';
39+
@import 'vendor/bootstrap-4.6.2/scss/mixins/box-shadow';
40+
@import 'vendor/bootstrap-4.6.2/scss/mixins/gradients';
41+
@import 'vendor/bootstrap-4.6.2/scss/mixins/transition';
42+
@import 'vendor/bootstrap-4.6.2/scss/buttons';
43+
3044
/* Bootstrap utilities/screenreaders */
3145

3246
@import 'vendor/bootstrap-4.6.2/scss/mixins/screen-reader';

‎src/vendor/bootstrap-4.6.2/README.txt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@ Subset of Bootstrap
33
Sources:
44

55
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/LICENSE
6+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/_buttons.scss
67
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/_functions.scss
78
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/_reboot.scss
9+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/_type.scss
810
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/_variables.scss
11+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_border-radius.scss
12+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_box-shadow.scss
13+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_buttons.scss
14+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_gradients.scss
915
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_hover.scss
16+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_lists.scss
1017
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_screen-reader.scss
18+
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/mixins/_transition.scss
1119
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/utilities/_screenreaders.scss
1220
https://github.com/twbs/bootstrap/raw/refs/tags/v4.6.2/scss/vendor/_rfs.scss

‎src/vendor/bootstrap-4.6.2/scss/_buttons.scss‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
// stylelint-disable selector-no-qualifying-type
2+
3+
//
4+
// Base styles
5+
//
6+
7+
.btn {
8+
display: inline-block;
9+
font-family: $btn-font-family;
10+
font-weight: $btn-font-weight;
11+
color: $body-color;
12+
text-align: center;
13+
text-decoration: if($link-decoration == none, null, none);
14+
white-space: $btn-white-space;
15+
vertical-align: middle;
16+
user-select: none;
17+
background-color: transparent;
18+
border: $btn-border-width solid transparent;
19+
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
20+
@include transition($btn-transition);
21+
22+
@include hover() {
23+
color: $body-color;
24+
text-decoration: none;
25+
}
26+
27+
&:focus,
28+
&.focus {
29+
outline: 0;
30+
box-shadow: $btn-focus-box-shadow;
31+
}
32+
33+
// Disabled comes first so active can properly restyle
34+
&.disabled,
35+
&:disabled {
36+
opacity: $btn-disabled-opacity;
37+
@include box-shadow(none);
38+
}
39+
40+
&:not(:disabled):not(.disabled) {
41+
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
42+
43+
&:active,
44+
&.active {
45+
@include box-shadow($btn-active-box-shadow);
46+
47+
&:focus {
48+
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
49+
}
50+
}
51+
}
52+
}
53+
54+
// Future-proof disabling of clicks on `<a>` elements
55+
a.btn.disabled,
56+
fieldset:disabled a.btn {
57+
pointer-events: none;
58+
}
59+
60+
61+
//
62+
// Alternate buttons
63+
//
64+
65+
@each $color, $value in $theme-colors {
66+
.btn-#{$color} {
67+
@include button-variant($value, $value);
68+
}
69+
}
70+
71+
@each $color, $value in $theme-colors {
72+
.btn-outline-#{$color} {
73+
@include button-outline-variant($value);
74+
}
75+
}
76+
77+
78+
//
79+
// Link buttons
80+
//
81+
82+
// Make a button look and behave like a link
83+
.btn-link {
84+
font-weight: $font-weight-normal;
85+
color: $link-color;
86+
text-decoration: $link-decoration;
87+
88+
@include hover() {
89+
color: $link-hover-color;
90+
text-decoration: $link-hover-decoration;
91+
}
92+
93+
&:focus,
94+
&.focus {
95+
text-decoration: $link-hover-decoration;
96+
}
97+
98+
&:disabled,
99+
&.disabled {
100+
color: $btn-link-disabled-color;
101+
pointer-events: none;
102+
}
103+
104+
// No need for an active state here
105+
}
106+
107+
108+
//
109+
// Button Sizes
110+
//
111+
112+
.btn-lg {
113+
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
114+
}
115+
116+
.btn-sm {
117+
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
118+
}
119+
120+
121+
//
122+
// Block button
123+
//
124+
125+
.btn-block {
126+
display: block;
127+
width: 100%;
128+
129+
// Vertically space out multiple block buttons
130+
+ .btn-block {
131+
margin-top: $btn-block-spacing-y;
132+
}
133+
}
134+
135+
// Specificity overrides
136+
input[type="submit"],
137+
input[type="reset"],
138+
input[type="button"] {
139+
&.btn-block {
140+
width: 100%;
141+
}
142+
}

‎src/vendor/bootstrap-4.6.2/scss/_type.scss‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// stylelint-disable selector-list-comma-newline-after
2+
3+
//
4+
// Headings
5+
//
6+
7+
h1, h2, h3, h4, h5, h6,
8+
.h1, .h2, .h3, .h4, .h5, .h6 {
9+
margin-bottom: $headings-margin-bottom;
10+
font-family: $headings-font-family;
11+
font-weight: $headings-font-weight;
12+
line-height: $headings-line-height;
13+
color: $headings-color;
14+
}
15+
16+
h1, .h1 { @include font-size($h1-font-size); }
17+
h2, .h2 { @include font-size($h2-font-size); }
18+
h3, .h3 { @include font-size($h3-font-size); }
19+
h4, .h4 { @include font-size($h4-font-size); }
20+
h5, .h5 { @include font-size($h5-font-size); }
21+
h6, .h6 { @include font-size($h6-font-size); }
22+
23+
.lead {
24+
@include font-size($lead-font-size);
25+
font-weight: $lead-font-weight;
26+
}
27+
28+
// Type display classes
29+
.display-1 {
30+
@include font-size($display1-size);
31+
font-weight: $display1-weight;
32+
line-height: $display-line-height;
33+
}
34+
.display-2 {
35+
@include font-size($display2-size);
36+
font-weight: $display2-weight;
37+
line-height: $display-line-height;
38+
}
39+
.display-3 {
40+
@include font-size($display3-size);
41+
font-weight: $display3-weight;
42+
line-height: $display-line-height;
43+
}
44+
.display-4 {
45+
@include font-size($display4-size);
46+
font-weight: $display4-weight;
47+
line-height: $display-line-height;
48+
}
49+
50+
51+
//
52+
// Horizontal rules
53+
//
54+
55+
hr {
56+
margin-top: $hr-margin-y;
57+
margin-bottom: $hr-margin-y;
58+
border: 0;
59+
border-top: $hr-border-width solid $hr-border-color;
60+
}
61+
62+
63+
//
64+
// Emphasis
65+
//
66+
67+
small,
68+
.small {
69+
@include font-size($small-font-size);
70+
font-weight: $font-weight-normal;
71+
}
72+
73+
mark,
74+
.mark {
75+
padding: $mark-padding;
76+
background-color: $mark-bg;
77+
}
78+
79+
80+
//
81+
// Lists
82+
//
83+
84+
.list-unstyled {
85+
@include list-unstyled();
86+
}
87+
88+
// Inline turns list items into inline-block
89+
.list-inline {
90+
@include list-unstyled();
91+
}
92+
.list-inline-item {
93+
display: inline-block;
94+
95+
&:not(:last-child) {
96+
margin-right: $list-inline-padding;
97+
}
98+
}
99+
100+
101+
//
102+
// Misc
103+
//
104+
105+
// Builds on `abbr`
106+
.initialism {
107+
@include font-size(90%);
108+
text-transform: uppercase;
109+
}
110+
111+
// Blockquotes
112+
.blockquote {
113+
margin-bottom: $spacer;
114+
@include font-size($blockquote-font-size);
115+
}
116+
117+
.blockquote-footer {
118+
display: block;
119+
@include font-size($blockquote-small-font-size);
120+
color: $blockquote-small-color;
121+
122+
&::before {
123+
content: "\2014\00A0"; // em dash, nbsp
124+
}
125+
}

‎src/vendor/bootstrap-4.6.2/scss/mixins/_border-radius.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// stylelint-disable property-disallowed-list
2+
// Single side border-radius
3+
4+
// Helper function to replace negative values with 0
5+
@function valid-radius($radius) {
6+
$return: ();
7+
@each $value in $radius {
8+
@if type-of($value) == number {
9+
$return: append($return, max($value, 0));
10+
} @else {
11+
$return: append($return, $value);
12+
}
13+
}
14+
@return $return;
15+
}
16+
17+
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
18+
@if $enable-rounded {
19+
border-radius: valid-radius($radius);
20+
}
21+
@else if $fallback-border-radius != false {
22+
border-radius: $fallback-border-radius;
23+
}
24+
}
25+
26+
@mixin border-top-radius($radius) {
27+
@if $enable-rounded {
28+
border-top-left-radius: valid-radius($radius);
29+
border-top-right-radius: valid-radius($radius);
30+
}
31+
}
32+
33+
@mixin border-right-radius($radius) {
34+
@if $enable-rounded {
35+
border-top-right-radius: valid-radius($radius);
36+
border-bottom-right-radius: valid-radius($radius);
37+
}
38+
}
39+
40+
@mixin border-bottom-radius($radius) {
41+
@if $enable-rounded {
42+
border-bottom-right-radius: valid-radius($radius);
43+
border-bottom-left-radius: valid-radius($radius);
44+
}
45+
}
46+
47+
@mixin border-left-radius($radius) {
48+
@if $enable-rounded {
49+
border-top-left-radius: valid-radius($radius);
50+
border-bottom-left-radius: valid-radius($radius);
51+
}
52+
}
53+
54+
@mixin border-top-left-radius($radius) {
55+
@if $enable-rounded {
56+
border-top-left-radius: valid-radius($radius);
57+
}
58+
}
59+
60+
@mixin border-top-right-radius($radius) {
61+
@if $enable-rounded {
62+
border-top-right-radius: valid-radius($radius);
63+
}
64+
}
65+
66+
@mixin border-bottom-right-radius($radius) {
67+
@if $enable-rounded {
68+
border-bottom-right-radius: valid-radius($radius);
69+
}
70+
}
71+
72+
@mixin border-bottom-left-radius($radius) {
73+
@if $enable-rounded {
74+
border-bottom-left-radius: valid-radius($radius);
75+
}
76+
}

0 commit comments

Comments
 (0)