jekyll-theme-lydde 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +79 -0
- data/_includes/breadcrumb.liquid +20 -0
- data/_includes/footer.liquid +60 -0
- data/_includes/header.liquid +124 -0
- data/_includes/info.liquid +15 -0
- data/_includes/menu.liquid +26 -0
- data/_includes/post-author.liquid +59 -0
- data/_includes/post-categories.liquid +13 -0
- data/_includes/post-share.liquid +26 -0
- data/_includes/post-tags.liquid +16 -0
- data/_includes/post-toc.liquid +86 -0
- data/_includes/scripts.liquid +15 -0
- data/_layouts/default.html +33 -0
- data/_layouts/home.html +6 -0
- data/_layouts/page.html +10 -0
- data/_layouts/post.html +33 -0
- data/_sass/bootstrap/_accordion.scss +158 -0
- data/_sass/bootstrap/_alert.scss +68 -0
- data/_sass/bootstrap/_badge.scss +38 -0
- data/_sass/bootstrap/_breadcrumb.scss +40 -0
- data/_sass/bootstrap/_button-group.scss +142 -0
- data/_sass/bootstrap/_buttons.scss +207 -0
- data/_sass/bootstrap/_card.scss +239 -0
- data/_sass/bootstrap/_carousel.scss +244 -0
- data/_sass/bootstrap/_close.scss +63 -0
- data/_sass/bootstrap/_containers.scss +41 -0
- data/_sass/bootstrap/_dropdown.scss +250 -0
- data/_sass/bootstrap/_forms.scss +9 -0
- data/_sass/bootstrap/_functions.scss +302 -0
- data/_sass/bootstrap/_grid.scss +39 -0
- data/_sass/bootstrap/_helpers.scss +12 -0
- data/_sass/bootstrap/_images.scss +42 -0
- data/_sass/bootstrap/_list-group.scss +197 -0
- data/_sass/bootstrap/_maps.scss +174 -0
- data/_sass/bootstrap/_mixins.scss +42 -0
- data/_sass/bootstrap/_modal.scss +237 -0
- data/_sass/bootstrap/_nav.scss +209 -0
- data/_sass/bootstrap/_navbar.scss +289 -0
- data/_sass/bootstrap/_offcanvas.scss +146 -0
- data/_sass/bootstrap/_pagination.scss +109 -0
- data/_sass/bootstrap/_placeholders.scss +51 -0
- data/_sass/bootstrap/_popover.scss +196 -0
- data/_sass/bootstrap/_progress.scss +68 -0
- data/_sass/bootstrap/_reboot.scss +610 -0
- data/_sass/bootstrap/_root.scss +184 -0
- data/_sass/bootstrap/_spinners.scss +85 -0
- data/_sass/bootstrap/_tables.scss +171 -0
- data/_sass/bootstrap/_toasts.scss +73 -0
- data/_sass/bootstrap/_tooltip.scss +119 -0
- data/_sass/bootstrap/_transitions.scss +27 -0
- data/_sass/bootstrap/_type.scss +106 -0
- data/_sass/bootstrap/_utilities.scss +806 -0
- data/_sass/bootstrap/_variables-dark.scss +85 -0
- data/_sass/bootstrap/_variables.scss +1743 -0
- data/_sass/bootstrap/bootstrap-grid.scss +62 -0
- data/_sass/bootstrap/bootstrap-reboot.scss +10 -0
- data/_sass/bootstrap/bootstrap-utilities.scss +19 -0
- data/_sass/bootstrap/bootstrap.scss +52 -0
- data/_sass/bootstrap/forms/_floating-labels.scss +94 -0
- data/_sass/bootstrap/forms/_form-check.scss +188 -0
- data/_sass/bootstrap/forms/_form-control.scss +214 -0
- data/_sass/bootstrap/forms/_form-range.scss +91 -0
- data/_sass/bootstrap/forms/_form-select.scss +80 -0
- data/_sass/bootstrap/forms/_form-text.scss +11 -0
- data/_sass/bootstrap/forms/_input-group.scss +132 -0
- data/_sass/bootstrap/forms/_labels.scss +36 -0
- data/_sass/bootstrap/forms/_validation.scss +12 -0
- data/_sass/bootstrap/helpers/_clearfix.scss +3 -0
- data/_sass/bootstrap/helpers/_color-bg.scss +8 -0
- data/_sass/bootstrap/helpers/_colored-links.scss +30 -0
- data/_sass/bootstrap/helpers/_focus-ring.scss +5 -0
- data/_sass/bootstrap/helpers/_icon-link.scss +25 -0
- data/_sass/bootstrap/helpers/_position.scss +36 -0
- data/_sass/bootstrap/helpers/_ratio.scss +26 -0
- data/_sass/bootstrap/helpers/_stacks.scss +15 -0
- data/_sass/bootstrap/helpers/_stretched-link.scss +15 -0
- data/_sass/bootstrap/helpers/_text-truncation.scss +7 -0
- data/_sass/bootstrap/helpers/_visually-hidden.scss +8 -0
- data/_sass/bootstrap/helpers/_vr.scss +8 -0
- data/_sass/bootstrap/mixins/_alert.scss +18 -0
- data/_sass/bootstrap/mixins/_backdrop.scss +14 -0
- data/_sass/bootstrap/mixins/_banner.scss +7 -0
- data/_sass/bootstrap/mixins/_border-radius.scss +78 -0
- data/_sass/bootstrap/mixins/_box-shadow.scss +18 -0
- data/_sass/bootstrap/mixins/_breakpoints.scss +127 -0
- data/_sass/bootstrap/mixins/_buttons.scss +70 -0
- data/_sass/bootstrap/mixins/_caret.scss +69 -0
- data/_sass/bootstrap/mixins/_clearfix.scss +9 -0
- data/_sass/bootstrap/mixins/_color-mode.scss +21 -0
- data/_sass/bootstrap/mixins/_color-scheme.scss +7 -0
- data/_sass/bootstrap/mixins/_container.scss +11 -0
- data/_sass/bootstrap/mixins/_deprecate.scss +10 -0
- data/_sass/bootstrap/mixins/_forms.scss +153 -0
- data/_sass/bootstrap/mixins/_gradients.scss +47 -0
- data/_sass/bootstrap/mixins/_grid.scss +151 -0
- data/_sass/bootstrap/mixins/_image.scss +16 -0
- data/_sass/bootstrap/mixins/_list-group.scss +26 -0
- data/_sass/bootstrap/mixins/_lists.scss +7 -0
- data/_sass/bootstrap/mixins/_pagination.scss +10 -0
- data/_sass/bootstrap/mixins/_reset-text.scss +17 -0
- data/_sass/bootstrap/mixins/_resize.scss +6 -0
- data/_sass/bootstrap/mixins/_table-variants.scss +24 -0
- data/_sass/bootstrap/mixins/_text-truncate.scss +8 -0
- data/_sass/bootstrap/mixins/_transition.scss +26 -0
- data/_sass/bootstrap/mixins/_utilities.scss +97 -0
- data/_sass/bootstrap/mixins/_visually-hidden.scss +33 -0
- data/_sass/bootstrap/tests/jasmine.js +16 -0
- data/_sass/bootstrap/tests/mixins/_color-modes.test.scss +69 -0
- data/_sass/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
- data/_sass/bootstrap/tests/mixins/_utilities.test.scss +393 -0
- data/_sass/bootstrap/tests/sass-true/register.js +14 -0
- data/_sass/bootstrap/tests/sass-true/runner.js +17 -0
- data/_sass/bootstrap/tests/utilities/_api.test.scss +75 -0
- data/_sass/bootstrap/utilities/_api.scss +47 -0
- data/_sass/bootstrap/vendor/_rfs.scss +348 -0
- data/_sass/code.scss +80 -0
- data/_sass/html.scss +26 -0
- data/_sass/variables.scss +29 -0
- data/_sass/website.scss +31 -0
- data/assets/images/_default.jpeg +0 -0
- data/assets/images/categories.jpeg +0 -0
- data/assets/images/home.jpeg +0 -0
- data/assets/images/koubyak.jpeg +0 -0
- data/assets/images/news.jpeg +0 -0
- data/assets/images/page.jpeg +0 -0
- data/assets/images/pages.jpeg +0 -0
- data/assets/images/post.jpeg +0 -0
- data/assets/images/posts.jpeg +0 -0
- data/assets/images/tags.jpeg +0 -0
- data/assets/logo.png +0 -0
- data/assets/lydde.png +0 -0
- data/assets/resources/site/404.md +11 -0
- data/assets/resources/site/humans.txt +31 -0
- data/assets/resources/site/robots.txt +7 -0
- data/assets/resources/site/site.webmanifest +36 -0
- data/assets/resources/site/sitemap.md +36 -0
- data/assets/resources/site/sitemap.xml +52 -0
- data/assets/scripts/bootstrap/bootstrap.bundle.js +6306 -0
- data/assets/scripts/bootstrap/bootstrap.bundle.js.map +1 -0
- data/assets/scripts/bootstrap/bootstrap.bundle.min.js +7 -0
- data/assets/scripts/bootstrap/bootstrap.bundle.min.js.map +1 -0
- data/assets/scripts/bootstrap/bootstrap.esm.js +4439 -0
- data/assets/scripts/bootstrap/bootstrap.esm.js.map +1 -0
- data/assets/scripts/bootstrap/bootstrap.esm.min.js +7 -0
- data/assets/scripts/bootstrap/bootstrap.esm.min.js.map +1 -0
- data/assets/scripts/bootstrap/bootstrap.js +4486 -0
- data/assets/scripts/bootstrap/bootstrap.js.map +1 -0
- data/assets/scripts/bootstrap/bootstrap.min.js +7 -0
- data/assets/scripts/bootstrap/bootstrap.min.js.map +1 -0
- data/assets/scripts/main.js +7 -0
- data/assets/styles/main.scss +23 -0
- metadata +209 -0
data/_layouts/post.html
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
{% assign item = page %}
|
5
|
+
<div id="post" class="row">
|
6
|
+
<section class="col-lg-9 mb-2 mb-sm-0 pb-sm-5">
|
7
|
+
<header>
|
8
|
+
<div class="border-bottom py-3 mb-3 row">
|
9
|
+
<div class="col-12 col-sm-6">
|
10
|
+
{% include info.liquid %}
|
11
|
+
</div>
|
12
|
+
<div class="col py-3 py-sm-0">
|
13
|
+
{% include post-author.liquid format="list" class="nav justify-content-md-end" %}
|
14
|
+
</div>
|
15
|
+
|
16
|
+
</div>
|
17
|
+
</header>
|
18
|
+
<main>
|
19
|
+
<article data-bs-spy="scroll" data-bs-target="#tocSpyScroll" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">{{ content }}</article>
|
20
|
+
</main>
|
21
|
+
<footer>
|
22
|
+
{%- include post-share.liquid -%}
|
23
|
+
{%- include post-author.liquid -%}
|
24
|
+
</footer>
|
25
|
+
</section>
|
26
|
+
<aside class="col-lg-3">
|
27
|
+
<section class="sticky-top pt-3">
|
28
|
+
{%- include post-categories.liquid -%}
|
29
|
+
{%- include post-tags.liquid -%}
|
30
|
+
{%- include post-toc.liquid title="Content" html=content id="tocScrollSpy" class="nav nav-pills flex-column" item_class="nav-item" anchor_class="nav-link" submenu_class="nav flex-column" -%}
|
31
|
+
</section>
|
32
|
+
</aside>
|
33
|
+
</div>
|
@@ -0,0 +1,158 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.accordion {
|
6
|
+
// scss-docs-start accordion-css-vars
|
7
|
+
--#{$prefix}accordion-color: #{$accordion-color};
|
8
|
+
--#{$prefix}accordion-bg: #{$accordion-bg};
|
9
|
+
--#{$prefix}accordion-transition: #{$accordion-transition};
|
10
|
+
--#{$prefix}accordion-border-color: #{$accordion-border-color};
|
11
|
+
--#{$prefix}accordion-border-width: #{$accordion-border-width};
|
12
|
+
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
|
13
|
+
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
|
14
|
+
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
|
15
|
+
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
|
16
|
+
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
|
17
|
+
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
|
18
|
+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
|
19
|
+
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
|
20
|
+
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
|
21
|
+
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
|
22
|
+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
|
23
|
+
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
|
24
|
+
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
|
25
|
+
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
|
26
|
+
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
|
27
|
+
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
|
28
|
+
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
|
29
|
+
// scss-docs-end accordion-css-vars
|
30
|
+
}
|
31
|
+
|
32
|
+
.accordion-button {
|
33
|
+
position: relative;
|
34
|
+
display: flex;
|
35
|
+
align-items: center;
|
36
|
+
width: 100%;
|
37
|
+
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
|
38
|
+
@include font-size($font-size-base);
|
39
|
+
color: var(--#{$prefix}accordion-btn-color);
|
40
|
+
text-align: left; // Reset button style
|
41
|
+
background-color: var(--#{$prefix}accordion-btn-bg);
|
42
|
+
border: 0;
|
43
|
+
@include border-radius(0);
|
44
|
+
overflow-anchor: none;
|
45
|
+
@include transition(var(--#{$prefix}accordion-transition));
|
46
|
+
|
47
|
+
&:not(.collapsed) {
|
48
|
+
color: var(--#{$prefix}accordion-active-color);
|
49
|
+
background-color: var(--#{$prefix}accordion-active-bg);
|
50
|
+
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
|
51
|
+
|
52
|
+
&::after {
|
53
|
+
background-image: var(--#{$prefix}accordion-btn-active-icon);
|
54
|
+
transform: var(--#{$prefix}accordion-btn-icon-transform);
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
// Accordion icon
|
59
|
+
&::after {
|
60
|
+
flex-shrink: 0;
|
61
|
+
width: var(--#{$prefix}accordion-btn-icon-width);
|
62
|
+
height: var(--#{$prefix}accordion-btn-icon-width);
|
63
|
+
margin-left: auto;
|
64
|
+
content: "";
|
65
|
+
background-image: var(--#{$prefix}accordion-btn-icon);
|
66
|
+
background-repeat: no-repeat;
|
67
|
+
background-size: var(--#{$prefix}accordion-btn-icon-width);
|
68
|
+
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
|
69
|
+
}
|
70
|
+
|
71
|
+
&:hover {
|
72
|
+
z-index: 2;
|
73
|
+
}
|
74
|
+
|
75
|
+
&:focus {
|
76
|
+
z-index: 3;
|
77
|
+
border-color: var(--#{$prefix}accordion-btn-focus-border-color);
|
78
|
+
outline: 0;
|
79
|
+
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
.accordion-header {
|
84
|
+
margin-bottom: 0;
|
85
|
+
}
|
86
|
+
|
87
|
+
.accordion-item {
|
88
|
+
color: var(--#{$prefix}accordion-color);
|
89
|
+
background-color: var(--#{$prefix}accordion-bg);
|
90
|
+
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
|
91
|
+
|
92
|
+
&:first-of-type {
|
93
|
+
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
|
94
|
+
|
95
|
+
.accordion-button {
|
96
|
+
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
&:not(:first-of-type) {
|
101
|
+
border-top: 0;
|
102
|
+
}
|
103
|
+
|
104
|
+
// Only set a border-radius on the last item if the accordion is collapsed
|
105
|
+
&:last-of-type {
|
106
|
+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
|
107
|
+
|
108
|
+
.accordion-button {
|
109
|
+
&.collapsed {
|
110
|
+
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
.accordion-collapse {
|
115
|
+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
.accordion-body {
|
121
|
+
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
|
122
|
+
}
|
123
|
+
|
124
|
+
|
125
|
+
// Flush accordion items
|
126
|
+
//
|
127
|
+
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
128
|
+
|
129
|
+
.accordion-flush {
|
130
|
+
.accordion-collapse {
|
131
|
+
border-width: 0;
|
132
|
+
}
|
133
|
+
|
134
|
+
.accordion-item {
|
135
|
+
border-right: 0;
|
136
|
+
border-left: 0;
|
137
|
+
@include border-radius(0);
|
138
|
+
|
139
|
+
&:first-child { border-top: 0; }
|
140
|
+
&:last-child { border-bottom: 0; }
|
141
|
+
|
142
|
+
.accordion-button {
|
143
|
+
&,
|
144
|
+
&.collapsed {
|
145
|
+
@include border-radius(0);
|
146
|
+
}
|
147
|
+
}
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
@if $enable-dark-mode {
|
152
|
+
@include color-mode(dark) {
|
153
|
+
.accordion-button::after {
|
154
|
+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
|
155
|
+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
156
|
+
}
|
157
|
+
}
|
158
|
+
}
|
@@ -0,0 +1,68 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.alert {
|
6
|
+
// scss-docs-start alert-css-vars
|
7
|
+
--#{$prefix}alert-bg: transparent;
|
8
|
+
--#{$prefix}alert-padding-x: #{$alert-padding-x};
|
9
|
+
--#{$prefix}alert-padding-y: #{$alert-padding-y};
|
10
|
+
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
|
11
|
+
--#{$prefix}alert-color: inherit;
|
12
|
+
--#{$prefix}alert-border-color: transparent;
|
13
|
+
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
|
14
|
+
--#{$prefix}alert-border-radius: #{$alert-border-radius};
|
15
|
+
--#{$prefix}alert-link-color: inherit;
|
16
|
+
// scss-docs-end alert-css-vars
|
17
|
+
|
18
|
+
position: relative;
|
19
|
+
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
|
20
|
+
margin-bottom: var(--#{$prefix}alert-margin-bottom);
|
21
|
+
color: var(--#{$prefix}alert-color);
|
22
|
+
background-color: var(--#{$prefix}alert-bg);
|
23
|
+
border: var(--#{$prefix}alert-border);
|
24
|
+
@include border-radius(var(--#{$prefix}alert-border-radius));
|
25
|
+
}
|
26
|
+
|
27
|
+
// Headings for larger alerts
|
28
|
+
.alert-heading {
|
29
|
+
// Specified to prevent conflicts of changing $headings-color
|
30
|
+
color: inherit;
|
31
|
+
}
|
32
|
+
|
33
|
+
// Provide class for links that match alerts
|
34
|
+
.alert-link {
|
35
|
+
font-weight: $alert-link-font-weight;
|
36
|
+
color: var(--#{$prefix}alert-link-color);
|
37
|
+
}
|
38
|
+
|
39
|
+
|
40
|
+
// Dismissible alerts
|
41
|
+
//
|
42
|
+
// Expand the right padding and account for the close button's positioning.
|
43
|
+
|
44
|
+
.alert-dismissible {
|
45
|
+
padding-right: $alert-dismissible-padding-r;
|
46
|
+
|
47
|
+
// Adjust close link position
|
48
|
+
.btn-close {
|
49
|
+
position: absolute;
|
50
|
+
top: 0;
|
51
|
+
right: 0;
|
52
|
+
z-index: $stretched-link-z-index + 1;
|
53
|
+
padding: $alert-padding-y * 1.25 $alert-padding-x;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
|
58
|
+
// scss-docs-start alert-modifiers
|
59
|
+
// Generate contextual modifier classes for colorizing the alert
|
60
|
+
@each $state in map-keys($theme-colors) {
|
61
|
+
.alert-#{$state} {
|
62
|
+
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
63
|
+
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
64
|
+
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
65
|
+
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
|
66
|
+
}
|
67
|
+
}
|
68
|
+
// scss-docs-end alert-modifiers
|
@@ -0,0 +1,38 @@
|
|
1
|
+
// Base class
|
2
|
+
//
|
3
|
+
// Requires one of the contextual, color modifier classes for `color` and
|
4
|
+
// `background-color`.
|
5
|
+
|
6
|
+
.badge {
|
7
|
+
// scss-docs-start badge-css-vars
|
8
|
+
--#{$prefix}badge-padding-x: #{$badge-padding-x};
|
9
|
+
--#{$prefix}badge-padding-y: #{$badge-padding-y};
|
10
|
+
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
|
11
|
+
--#{$prefix}badge-font-weight: #{$badge-font-weight};
|
12
|
+
--#{$prefix}badge-color: #{$badge-color};
|
13
|
+
--#{$prefix}badge-border-radius: #{$badge-border-radius};
|
14
|
+
// scss-docs-end badge-css-vars
|
15
|
+
|
16
|
+
display: inline-block;
|
17
|
+
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
|
18
|
+
@include font-size(var(--#{$prefix}badge-font-size));
|
19
|
+
font-weight: var(--#{$prefix}badge-font-weight);
|
20
|
+
line-height: 1;
|
21
|
+
color: var(--#{$prefix}badge-color);
|
22
|
+
text-align: center;
|
23
|
+
white-space: nowrap;
|
24
|
+
vertical-align: baseline;
|
25
|
+
@include border-radius(var(--#{$prefix}badge-border-radius));
|
26
|
+
@include gradient-bg();
|
27
|
+
|
28
|
+
// Empty badges collapse automatically
|
29
|
+
&:empty {
|
30
|
+
display: none;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// Quick fix for badges in buttons
|
35
|
+
.btn .badge {
|
36
|
+
position: relative;
|
37
|
+
top: -1px;
|
38
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
.breadcrumb {
|
2
|
+
// scss-docs-start breadcrumb-css-vars
|
3
|
+
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
4
|
+
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
5
|
+
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
|
6
|
+
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
|
7
|
+
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
|
8
|
+
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
|
9
|
+
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
10
|
+
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
|
11
|
+
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
|
12
|
+
// scss-docs-end breadcrumb-css-vars
|
13
|
+
|
14
|
+
display: flex;
|
15
|
+
flex-wrap: wrap;
|
16
|
+
padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
|
17
|
+
margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
|
18
|
+
@include font-size(var(--#{$prefix}breadcrumb-font-size));
|
19
|
+
list-style: none;
|
20
|
+
background-color: var(--#{$prefix}breadcrumb-bg);
|
21
|
+
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
|
22
|
+
}
|
23
|
+
|
24
|
+
.breadcrumb-item {
|
25
|
+
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
26
|
+
+ .breadcrumb-item {
|
27
|
+
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
|
28
|
+
|
29
|
+
&::before {
|
30
|
+
float: left; // Suppress inline spacings and underlining of the separator
|
31
|
+
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
|
32
|
+
color: var(--#{$prefix}breadcrumb-divider-color);
|
33
|
+
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
&.active {
|
38
|
+
color: var(--#{$prefix}breadcrumb-item-active-color);
|
39
|
+
}
|
40
|
+
}
|
@@ -0,0 +1,142 @@
|
|
1
|
+
// Make the div behave like a button
|
2
|
+
.btn-group,
|
3
|
+
.btn-group-vertical {
|
4
|
+
position: relative;
|
5
|
+
display: inline-flex;
|
6
|
+
vertical-align: middle; // match .btn alignment given font-size hack above
|
7
|
+
|
8
|
+
> .btn {
|
9
|
+
position: relative;
|
10
|
+
flex: 1 1 auto;
|
11
|
+
}
|
12
|
+
|
13
|
+
// Bring the hover, focused, and "active" buttons to the front to overlay
|
14
|
+
// the borders properly
|
15
|
+
> .btn-check:checked + .btn,
|
16
|
+
> .btn-check:focus + .btn,
|
17
|
+
> .btn:hover,
|
18
|
+
> .btn:focus,
|
19
|
+
> .btn:active,
|
20
|
+
> .btn.active {
|
21
|
+
z-index: 1;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
// Optional: Group multiple button groups together for a toolbar
|
26
|
+
.btn-toolbar {
|
27
|
+
display: flex;
|
28
|
+
flex-wrap: wrap;
|
29
|
+
justify-content: flex-start;
|
30
|
+
|
31
|
+
.input-group {
|
32
|
+
width: auto;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
.btn-group {
|
37
|
+
@include border-radius($btn-border-radius);
|
38
|
+
|
39
|
+
// Prevent double borders when buttons are next to each other
|
40
|
+
> :not(.btn-check:first-child) + .btn,
|
41
|
+
> .btn-group:not(:first-child) {
|
42
|
+
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
|
43
|
+
}
|
44
|
+
|
45
|
+
// Reset rounded corners
|
46
|
+
> .btn:not(:last-child):not(.dropdown-toggle),
|
47
|
+
> .btn.dropdown-toggle-split:first-child,
|
48
|
+
> .btn-group:not(:last-child) > .btn {
|
49
|
+
@include border-end-radius(0);
|
50
|
+
}
|
51
|
+
|
52
|
+
// The left radius should be 0 if the button is:
|
53
|
+
// - the "third or more" child
|
54
|
+
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
|
55
|
+
// - part of a btn-group which isn't the first child
|
56
|
+
> .btn:nth-child(n + 3),
|
57
|
+
> :not(.btn-check) + .btn,
|
58
|
+
> .btn-group:not(:first-child) > .btn {
|
59
|
+
@include border-start-radius(0);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
// Sizing
|
64
|
+
//
|
65
|
+
// Remix the default button sizing classes into new ones for easier manipulation.
|
66
|
+
|
67
|
+
.btn-group-sm > .btn { @extend .btn-sm; }
|
68
|
+
.btn-group-lg > .btn { @extend .btn-lg; }
|
69
|
+
|
70
|
+
|
71
|
+
//
|
72
|
+
// Split button dropdowns
|
73
|
+
//
|
74
|
+
|
75
|
+
.dropdown-toggle-split {
|
76
|
+
padding-right: $btn-padding-x * .75;
|
77
|
+
padding-left: $btn-padding-x * .75;
|
78
|
+
|
79
|
+
&::after,
|
80
|
+
.dropup &::after,
|
81
|
+
.dropend &::after {
|
82
|
+
margin-left: 0;
|
83
|
+
}
|
84
|
+
|
85
|
+
.dropstart &::before {
|
86
|
+
margin-right: 0;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
90
|
+
.btn-sm + .dropdown-toggle-split {
|
91
|
+
padding-right: $btn-padding-x-sm * .75;
|
92
|
+
padding-left: $btn-padding-x-sm * .75;
|
93
|
+
}
|
94
|
+
|
95
|
+
.btn-lg + .dropdown-toggle-split {
|
96
|
+
padding-right: $btn-padding-x-lg * .75;
|
97
|
+
padding-left: $btn-padding-x-lg * .75;
|
98
|
+
}
|
99
|
+
|
100
|
+
|
101
|
+
// The clickable button for toggling the menu
|
102
|
+
// Set the same inset shadow as the :active state
|
103
|
+
.btn-group.show .dropdown-toggle {
|
104
|
+
@include box-shadow($btn-active-box-shadow);
|
105
|
+
|
106
|
+
// Show no shadow for `.btn-link` since it has no other button styles.
|
107
|
+
&.btn-link {
|
108
|
+
@include box-shadow(none);
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
|
113
|
+
//
|
114
|
+
// Vertical button groups
|
115
|
+
//
|
116
|
+
|
117
|
+
.btn-group-vertical {
|
118
|
+
flex-direction: column;
|
119
|
+
align-items: flex-start;
|
120
|
+
justify-content: center;
|
121
|
+
|
122
|
+
> .btn,
|
123
|
+
> .btn-group {
|
124
|
+
width: 100%;
|
125
|
+
}
|
126
|
+
|
127
|
+
> .btn:not(:first-child),
|
128
|
+
> .btn-group:not(:first-child) {
|
129
|
+
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
|
130
|
+
}
|
131
|
+
|
132
|
+
// Reset rounded corners
|
133
|
+
> .btn:not(:last-child):not(.dropdown-toggle),
|
134
|
+
> .btn-group:not(:last-child) > .btn {
|
135
|
+
@include border-bottom-radius(0);
|
136
|
+
}
|
137
|
+
|
138
|
+
> .btn ~ .btn,
|
139
|
+
> .btn-group:not(:first-child) > .btn {
|
140
|
+
@include border-top-radius(0);
|
141
|
+
}
|
142
|
+
}
|
@@ -0,0 +1,207 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.btn {
|
6
|
+
// scss-docs-start btn-css-vars
|
7
|
+
--#{$prefix}btn-padding-x: #{$btn-padding-x};
|
8
|
+
--#{$prefix}btn-padding-y: #{$btn-padding-y};
|
9
|
+
--#{$prefix}btn-font-family: #{$btn-font-family};
|
10
|
+
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
|
11
|
+
--#{$prefix}btn-font-weight: #{$btn-font-weight};
|
12
|
+
--#{$prefix}btn-line-height: #{$btn-line-height};
|
13
|
+
--#{$prefix}btn-color: #{$btn-color};
|
14
|
+
--#{$prefix}btn-bg: transparent;
|
15
|
+
--#{$prefix}btn-border-width: #{$btn-border-width};
|
16
|
+
--#{$prefix}btn-border-color: transparent;
|
17
|
+
--#{$prefix}btn-border-radius: #{$btn-border-radius};
|
18
|
+
--#{$prefix}btn-hover-border-color: transparent;
|
19
|
+
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
|
20
|
+
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
|
21
|
+
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
|
22
|
+
// scss-docs-end btn-css-vars
|
23
|
+
|
24
|
+
display: inline-block;
|
25
|
+
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
|
26
|
+
font-family: var(--#{$prefix}btn-font-family);
|
27
|
+
@include font-size(var(--#{$prefix}btn-font-size));
|
28
|
+
font-weight: var(--#{$prefix}btn-font-weight);
|
29
|
+
line-height: var(--#{$prefix}btn-line-height);
|
30
|
+
color: var(--#{$prefix}btn-color);
|
31
|
+
text-align: center;
|
32
|
+
text-decoration: if($link-decoration == none, null, none);
|
33
|
+
white-space: $btn-white-space;
|
34
|
+
vertical-align: middle;
|
35
|
+
cursor: if($enable-button-pointers, pointer, null);
|
36
|
+
user-select: none;
|
37
|
+
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
|
38
|
+
@include border-radius(var(--#{$prefix}btn-border-radius));
|
39
|
+
@include gradient-bg(var(--#{$prefix}btn-bg));
|
40
|
+
@include box-shadow(var(--#{$prefix}btn-box-shadow));
|
41
|
+
@include transition($btn-transition);
|
42
|
+
|
43
|
+
&:hover {
|
44
|
+
color: var(--#{$prefix}btn-hover-color);
|
45
|
+
text-decoration: if($link-hover-decoration == underline, none, null);
|
46
|
+
background-color: var(--#{$prefix}btn-hover-bg);
|
47
|
+
border-color: var(--#{$prefix}btn-hover-border-color);
|
48
|
+
}
|
49
|
+
|
50
|
+
.btn-check + &:hover {
|
51
|
+
// override for the checkbox/radio buttons
|
52
|
+
color: var(--#{$prefix}btn-color);
|
53
|
+
background-color: var(--#{$prefix}btn-bg);
|
54
|
+
border-color: var(--#{$prefix}btn-border-color);
|
55
|
+
}
|
56
|
+
|
57
|
+
&:focus-visible {
|
58
|
+
color: var(--#{$prefix}btn-hover-color);
|
59
|
+
@include gradient-bg(var(--#{$prefix}btn-hover-bg));
|
60
|
+
border-color: var(--#{$prefix}btn-hover-border-color);
|
61
|
+
outline: 0;
|
62
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
63
|
+
@if $enable-shadows {
|
64
|
+
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
65
|
+
} @else {
|
66
|
+
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
.btn-check:focus-visible + & {
|
71
|
+
border-color: var(--#{$prefix}btn-hover-border-color);
|
72
|
+
outline: 0;
|
73
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
74
|
+
@if $enable-shadows {
|
75
|
+
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
76
|
+
} @else {
|
77
|
+
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
.btn-check:checked + &,
|
82
|
+
:not(.btn-check) + &:active,
|
83
|
+
&:first-child:active,
|
84
|
+
&.active,
|
85
|
+
&.show {
|
86
|
+
color: var(--#{$prefix}btn-active-color);
|
87
|
+
background-color: var(--#{$prefix}btn-active-bg);
|
88
|
+
// Remove CSS gradients if they're enabled
|
89
|
+
background-image: if($enable-gradients, none, null);
|
90
|
+
border-color: var(--#{$prefix}btn-active-border-color);
|
91
|
+
@include box-shadow(var(--#{$prefix}btn-active-shadow));
|
92
|
+
|
93
|
+
&:focus-visible {
|
94
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
95
|
+
@if $enable-shadows {
|
96
|
+
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
97
|
+
} @else {
|
98
|
+
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
&:disabled,
|
104
|
+
&.disabled,
|
105
|
+
fieldset:disabled & {
|
106
|
+
color: var(--#{$prefix}btn-disabled-color);
|
107
|
+
pointer-events: none;
|
108
|
+
background-color: var(--#{$prefix}btn-disabled-bg);
|
109
|
+
background-image: if($enable-gradients, none, null);
|
110
|
+
border-color: var(--#{$prefix}btn-disabled-border-color);
|
111
|
+
opacity: var(--#{$prefix}btn-disabled-opacity);
|
112
|
+
@include box-shadow(none);
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
|
117
|
+
//
|
118
|
+
// Alternate buttons
|
119
|
+
//
|
120
|
+
|
121
|
+
// scss-docs-start btn-variant-loops
|
122
|
+
@each $color, $value in $theme-colors {
|
123
|
+
.btn-#{$color} {
|
124
|
+
@if $color == "light" {
|
125
|
+
@include button-variant(
|
126
|
+
$value,
|
127
|
+
$value,
|
128
|
+
$hover-background: shade-color($value, $btn-hover-bg-shade-amount),
|
129
|
+
$hover-border: shade-color($value, $btn-hover-border-shade-amount),
|
130
|
+
$active-background: shade-color($value, $btn-active-bg-shade-amount),
|
131
|
+
$active-border: shade-color($value, $btn-active-border-shade-amount)
|
132
|
+
);
|
133
|
+
} @else if $color == "dark" {
|
134
|
+
@include button-variant(
|
135
|
+
$value,
|
136
|
+
$value,
|
137
|
+
$hover-background: tint-color($value, $btn-hover-bg-tint-amount),
|
138
|
+
$hover-border: tint-color($value, $btn-hover-border-tint-amount),
|
139
|
+
$active-background: tint-color($value, $btn-active-bg-tint-amount),
|
140
|
+
$active-border: tint-color($value, $btn-active-border-tint-amount)
|
141
|
+
);
|
142
|
+
} @else {
|
143
|
+
@include button-variant($value, $value);
|
144
|
+
}
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
@each $color, $value in $theme-colors {
|
149
|
+
.btn-outline-#{$color} {
|
150
|
+
@include button-outline-variant($value);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
// scss-docs-end btn-variant-loops
|
154
|
+
|
155
|
+
|
156
|
+
//
|
157
|
+
// Link buttons
|
158
|
+
//
|
159
|
+
|
160
|
+
// Make a button look and behave like a link
|
161
|
+
.btn-link {
|
162
|
+
--#{$prefix}btn-font-weight: #{$font-weight-normal};
|
163
|
+
--#{$prefix}btn-color: #{$btn-link-color};
|
164
|
+
--#{$prefix}btn-bg: transparent;
|
165
|
+
--#{$prefix}btn-border-color: transparent;
|
166
|
+
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
|
167
|
+
--#{$prefix}btn-hover-border-color: transparent;
|
168
|
+
--#{$prefix}btn-active-color: #{$btn-link-hover-color};
|
169
|
+
--#{$prefix}btn-active-border-color: transparent;
|
170
|
+
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
|
171
|
+
--#{$prefix}btn-disabled-border-color: transparent;
|
172
|
+
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
|
173
|
+
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
|
174
|
+
|
175
|
+
text-decoration: $link-decoration;
|
176
|
+
@if $enable-gradients {
|
177
|
+
background-image: none;
|
178
|
+
}
|
179
|
+
|
180
|
+
&:hover,
|
181
|
+
&:focus-visible {
|
182
|
+
text-decoration: $link-hover-decoration;
|
183
|
+
}
|
184
|
+
|
185
|
+
&:focus-visible {
|
186
|
+
color: var(--#{$prefix}btn-color);
|
187
|
+
}
|
188
|
+
|
189
|
+
&:hover {
|
190
|
+
color: var(--#{$prefix}btn-hover-color);
|
191
|
+
}
|
192
|
+
|
193
|
+
// No need for an active state here
|
194
|
+
}
|
195
|
+
|
196
|
+
|
197
|
+
//
|
198
|
+
// Button Sizes
|
199
|
+
//
|
200
|
+
|
201
|
+
.btn-lg {
|
202
|
+
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
|
203
|
+
}
|
204
|
+
|
205
|
+
.btn-sm {
|
206
|
+
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
207
|
+
}
|