Skip to content

Commit 64ad597

Browse files
Mr-TechXMr-TechX
authored
Add files via upload
1 parent 41e61fb commit 64ad597

90 files changed

Lines changed: 9732 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎scss/bootstrap/_alert.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
//
2+
// Base styles
3+
//
4+
5+
.alert {
6+
position: relative;
7+
padding: $alert-padding-y $alert-padding-x;
8+
margin-bottom: $alert-margin-bottom;
9+
border: $alert-border-width solid transparent;
10+
@include border-radius($alert-border-radius);
11+
}
12+
13+
// Headings for larger alerts
14+
.alert-heading {
15+
// Specified to prevent conflicts of changing $headings-color
16+
color: inherit;
17+
}
18+
19+
// Provide class for links that match alerts
20+
.alert-link {
21+
font-weight: $alert-link-font-weight;
22+
}
23+
24+
25+
// Dismissible alerts
26+
//
27+
// Expand the right padding and account for the close button's positioning.
28+
29+
.alert-dismissible {
30+
padding-right: $close-font-size + $alert-padding-x * 2;
31+
32+
// Adjust close link position
33+
.close {
34+
position: absolute;
35+
top: 0;
36+
right: 0;
37+
padding: $alert-padding-y $alert-padding-x;
38+
color: inherit;
39+
}
40+
}
41+
42+
43+
// Alternate styles
44+
//
45+
// Generate contextual modifier classes for colorizing the alert.
46+
47+
@each $color, $value in $theme-colors {
48+
.alert-#{$color} {
49+
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
50+
}
51+
}

‎scss/bootstrap/_badge.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Base class
2+
//
3+
// Requires one of the contextual, color modifier classes for `color` and
4+
// `background-color`.
5+
6+
.badge {
7+
display: inline-block;
8+
padding: $badge-padding-y $badge-padding-x;
9+
@include font-size($badge-font-size);
10+
font-weight: $badge-font-weight;
11+
line-height: 1;
12+
text-align: center;
13+
white-space: nowrap;
14+
vertical-align: baseline;
15+
@include border-radius($badge-border-radius);
16+
@include transition($badge-transition);
17+
18+
@at-root a#{&} {
19+
@include hover-focus {
20+
text-decoration: none;
21+
}
22+
}
23+
24+
// Empty badges collapse automatically
25+
&:empty {
26+
display: none;
27+
}
28+
}
29+
30+
// Quick fix for badges in buttons
31+
.btn .badge {
32+
position: relative;
33+
top: -1px;
34+
}
35+
36+
// Pill badges
37+
//
38+
// Make them extra rounded with a modifier to replace v3's badges.
39+
40+
.badge-pill {
41+
padding-right: $badge-pill-padding-x;
42+
padding-left: $badge-pill-padding-x;
43+
@include border-radius($badge-pill-border-radius);
44+
}
45+
46+
// Colors
47+
//
48+
// Contextual variations (linked badges get darker on :hover).
49+
50+
@each $color, $value in $theme-colors {
51+
.badge-#{$color} {
52+
@include badge-variant($value);
53+
}
54+
}

‎scss/bootstrap/_breadcrumb.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.breadcrumb {
2+
display: flex;
3+
flex-wrap: wrap;
4+
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5+
margin-bottom: $breadcrumb-margin-bottom;
6+
list-style: none;
7+
background-color: $breadcrumb-bg;
8+
@include border-radius($breadcrumb-border-radius);
9+
}
10+
11+
.breadcrumb-item {
12+
// The separator between breadcrumbs (by default, a forward-slash: "/")
13+
+ .breadcrumb-item {
14+
padding-left: $breadcrumb-item-padding;
15+
16+
&::before {
17+
display: inline-block; // Suppress underlining of the separator in modern browsers
18+
padding-right: $breadcrumb-item-padding;
19+
color: $breadcrumb-divider-color;
20+
content: $breadcrumb-divider;
21+
}
22+
}
23+
24+
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
25+
// without `<ul>`s. The `::before` pseudo-element generates an element
26+
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
27+
//
28+
// To trick IE into suppressing the underline, we give the pseudo-element an
29+
// underline and then immediately remove it.
30+
+ .breadcrumb-item:hover::before {
31+
text-decoration: underline;
32+
}
33+
// stylelint-disable-next-line no-duplicate-selectors
34+
+ .breadcrumb-item:hover::before {
35+
text-decoration: none;
36+
}
37+
38+
&.active {
39+
color: $breadcrumb-active-color;
40+
}
41+
}

‎scss/bootstrap/_button-group.scss‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// stylelint-disable selector-no-qualifying-type
2+
3+
// Make the div behave like a button
4+
.btn-group,
5+
.btn-group-vertical {
6+
position: relative;
7+
display: inline-flex;
8+
vertical-align: middle; // match .btn alignment given font-size hack above
9+
10+
> .btn {
11+
position: relative;
12+
flex: 1 1 auto;
13+
14+
// Bring the hover, focused, and "active" buttons to the front to overlay
15+
// the borders properly
16+
@include hover {
17+
z-index: 1;
18+
}
19+
&:focus,
20+
&:active,
21+
&.active {
22+
z-index: 1;
23+
}
24+
}
25+
}
26+
27+
// Optional: Group multiple button groups together for a toolbar
28+
.btn-toolbar {
29+
display: flex;
30+
flex-wrap: wrap;
31+
justify-content: flex-start;
32+
33+
.input-group {
34+
width: auto;
35+
}
36+
}
37+
38+
.btn-group {
39+
// Prevent double borders when buttons are next to each other
40+
> .btn:not(:first-child),
41+
> .btn-group:not(:first-child) {
42+
margin-left: -$btn-border-width;
43+
}
44+
45+
// Reset rounded corners
46+
> .btn:not(:last-child):not(.dropdown-toggle),
47+
> .btn-group:not(:last-child) > .btn {
48+
@include border-right-radius(0);
49+
}
50+
51+
> .btn:not(:first-child),
52+
> .btn-group:not(:first-child) > .btn {
53+
@include border-left-radius(0);
54+
}
55+
}
56+
57+
// Sizing
58+
//
59+
// Remix the default button sizing classes into new ones for easier manipulation.
60+
61+
.btn-group-sm > .btn { @extend .btn-sm; }
62+
.btn-group-lg > .btn { @extend .btn-lg; }
63+
64+
65+
//
66+
// Split button dropdowns
67+
//
68+
69+
.dropdown-toggle-split {
70+
padding-right: $btn-padding-x * .75;
71+
padding-left: $btn-padding-x * .75;
72+
73+
&::after,
74+
.dropup &::after,
75+
.dropright &::after {
76+
margin-left: 0;
77+
}
78+
79+
.dropleft &::before {
80+
margin-right: 0;
81+
}
82+
}
83+
84+
.btn-sm + .dropdown-toggle-split {
85+
padding-right: $btn-padding-x-sm * .75;
86+
padding-left: $btn-padding-x-sm * .75;
87+
}
88+
89+
.btn-lg + .dropdown-toggle-split {
90+
padding-right: $btn-padding-x-lg * .75;
91+
padding-left: $btn-padding-x-lg * .75;
92+
}
93+
94+
95+
// The clickable button for toggling the menu
96+
// Set the same inset shadow as the :active state
97+
.btn-group.show .dropdown-toggle {
98+
@include box-shadow($btn-active-box-shadow);
99+
100+
// Show no shadow for `.btn-link` since it has no other button styles.
101+
&.btn-link {
102+
@include box-shadow(none);
103+
}
104+
}
105+
106+
107+
//
108+
// Vertical button groups
109+
//
110+
111+
.btn-group-vertical {
112+
flex-direction: column;
113+
align-items: flex-start;
114+
justify-content: center;
115+
116+
> .btn,
117+
> .btn-group {
118+
width: 100%;
119+
}
120+
121+
> .btn:not(:first-child),
122+
> .btn-group:not(:first-child) {
123+
margin-top: -$btn-border-width;
124+
}
125+
126+
// Reset rounded corners
127+
> .btn:not(:last-child):not(.dropdown-toggle),
128+
> .btn-group:not(:last-child) > .btn {
129+
@include border-bottom-radius(0);
130+
}
131+
132+
> .btn:not(:first-child),
133+
> .btn-group:not(:first-child) > .btn {
134+
@include border-top-radius(0);
135+
}
136+
}
137+
138+
139+
// Checkbox and radio options
140+
//
141+
// In order to support the browser's form validation feedback, powered by the
142+
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
143+
// `display: none;` or `visibility: hidden;` as that also hides the popover.
144+
// Simply visually hiding the inputs via `opacity` would leave them clickable in
145+
// certain cases which is prevented by using `clip` and `pointer-events`.
146+
// This way, we ensure a DOM element is visible to position the popover from.
147+
//
148+
// See https://github.com/twbs/bootstrap/pull/12794 and
149+
// https://github.com/twbs/bootstrap/pull/14559 for more information.
150+
151+
.btn-group-toggle {
152+
> .btn,
153+
> .btn-group > .btn {
154+
margin-bottom: 0; // Override default `<label>` value
155+
156+
input[type="radio"],
157+
input[type="checkbox"] {
158+
position: absolute;
159+
clip: rect(0, 0, 0, 0);
160+
pointer-events: none;
161+
}
162+
}
163+
}

0 commit comments

Comments
 (0)