Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/icons.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/docs/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'docs/assets/scss')
-rw-r--r--docs/assets/scss/_ads.scss2
-rw-r--r--docs/assets/scss/_buttons.scss64
-rw-r--r--docs/assets/scss/_clipboard-js.scss6
-rw-r--r--docs/assets/scss/_footer.scss6
-rw-r--r--docs/assets/scss/_navbar.scss67
-rw-r--r--docs/assets/scss/_skippy.scss4
-rw-r--r--docs/assets/scss/_syntax.scss4
-rw-r--r--docs/assets/scss/_variables.scss27
-rw-r--r--docs/assets/scss/docs.scss78
9 files changed, 177 insertions, 81 deletions
diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
index cdf13c55a..1251ec5e3 100644
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@@ -5,7 +5,7 @@
margin-right: auto;
margin-left: auto;
overflow: auto;
- background-color: $gray-100;
+ background-color: var(--bs-gray-100);
border-radius: .25rem;
@media (min-width: 992px) {
diff --git a/docs/assets/scss/_buttons.scss b/docs/assets/scss/_buttons.scss
index 25bcbbd4b..13bd6e48a 100644
--- a/docs/assets/scss/_buttons.scss
+++ b/docs/assets/scss/_buttons.scss
@@ -2,36 +2,44 @@
//
// Custom buttons for the docs.
+// scss-docs-start btn-css-vars-example
.btn-bd-primary {
- font-weight: 600;
- color: $bd-purple-bright;
- border-color: $bd-purple-bright;
-
- &:hover,
- &:active {
- color: $white;
- background-color: $bd-purple-bright;
- border-color: $bd-purple-bright;
- }
-
- &:focus {
- box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
- }
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bs-white);
+ --bs-btn-bg: var(--bd-violet);
+ --bs-btn-border-color: var(--bd-violet);
+ --bs-btn-border-radius: .5rem;
+ --bs-btn-hover-color: var(--bs-white);
+ --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+ --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+ --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}
+// scss-docs-end btn-css-vars-example
-.btn-bd-download {
- font-weight: 600;
- color: $bd-download;
- border-color: $bd-download;
-
- &:hover,
- &:active {
- color: $bd-dark;
- background-color: $bd-download;
- border-color: $bd-download;
- }
+.btn-bd-accent {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bd-accent);
+ --bs-btn-border-color: var(--bd-accent);
+ --bs-btn-hover-color: var(--bd-dark);
+ --bs-btn-hover-bg: var(--bd-accent);
+ --bs-btn-hover-border-color: var(--bd-accent);
+ --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: var(--bs-btn-hover-bg);
+ --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+}
- &:focus {
- box-shadow: 0 0 0 3px rgba($bd-download, .25);
- }
+.btn-bd-light {
+ --bs-btn-color: var(--bs-gray-600);
+ --bs-btn-border-color: var(--bs-gray-400);
+ --bs-btn-hover-color: var(--bd-violet);
+ --bs-btn-hover-border-color: var(--bd-violet);
+ --bs-btn-active-color: var(--bd-violet);
+ --bs-btn-active-bg: var(--bs-white);
+ --bs-btn-active-border-color: var(--bd-violet);
+ --bs-btn-focus-border-color: var(--bd-violet);
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
index fa6e9e161..5d4cbba44 100644
--- a/docs/assets/scss/_clipboard-js.scss
+++ b/docs/assets/scss/_clipboard-js.scss
@@ -24,12 +24,12 @@
display: block;
padding: .5em .75em .625em;
line-height: 1;
- color: $gray-900;
- background-color: $gray-100;
+ color: var(--bs-gray-900);
+ background-color: var(--bs-gray-100);
border: 0;
border-radius: .25rem;
&:hover {
- color: $primary;
+ color: var(--bs-primary);
}
}
diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
index 297c31135..22d20c969 100644
--- a/docs/assets/scss/_footer.scss
+++ b/docs/assets/scss/_footer.scss
@@ -4,15 +4,15 @@
.bd-footer {
font-size: .875rem;
- color: #63707c;
+ color: var(--bs-gray-600);
a {
font-weight: 600;
- color: $gray-700;
+ color: var(--bs-gray-700);
&:hover,
&:focus {
- color: $blue;
+ color: var(--bs-primary);
}
}
diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
index 954304c3f..481d489f4 100644
--- a/docs/assets/scss/_navbar.scss
+++ b/docs/assets/scss/_navbar.scss
@@ -1,37 +1,64 @@
.bd-navbar {
padding: .75rem 0;
- background-color: $bd-purple-bright;
+ background-color: transparent;
+ background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+ box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
.navbar-toggler {
padding: 0;
+ margin-right: -.5rem;
border: 0;
+ &:first-child {
+ margin-left: -.5rem;
+ }
+
.bi {
- width: 2rem;
- fill: currentColor;
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ &:focus {
+ box-shadow: none;
}
}
- .navbar-nav {
- .nav-link {
- padding-right: $spacer / 4;
- padding-left: $spacer / 4;
- color: rgba($white, .85);
-
- &:hover,
- &:focus {
- color: $white;
- }
-
- &.active {
- font-weight: 600;
- color: $white;
- }
+ .navbar-brand {
+ transition: .2s ease-in-out transform;
+
+ &:hover {
+ transform: rotate(-5deg) scale(1.1);
+ }
+ }
+
+ .navbar-toggler,
+ .nav-link {
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
+ color: rgba($white, .85);
+
+ &:hover,
+ &:focus {
+ color: $white;
+ }
+
+ &.active {
+ font-weight: 600;
+ color: $white;
}
}
.navbar-nav-svg {
- width: 1rem;
- height: 1rem;
+ display: inline-block;
+ vertical-align: -.125rem;
+ }
+
+ .offcanvas-lg {
+ background-color: var(--bd-violet);
+ border-left: 0;
+
+ @media (max-width: 992px) {
+ box-shadow: $box-shadow-lg;
+ }
}
}
diff --git a/docs/assets/scss/_skippy.scss b/docs/assets/scss/_skippy.scss
index ab59339d0..459c203a5 100644
--- a/docs/assets/scss/_skippy.scss
+++ b/docs/assets/scss/_skippy.scss
@@ -1,13 +1,13 @@
.skippy {
display: block;
padding: 1em;
- color: $white;
+ color: #fff;
text-align: center;
background-color: $bd-purple;
outline: 0;
&:hover {
- color: $white;
+ color: #fff;
}
}
diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss
index 258519799..43cb79199 100644
--- a/docs/assets/scss/_syntax.scss
+++ b/docs/assets/scss/_syntax.scss
@@ -1,4 +1,4 @@
-// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern
+// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations
/* Background .chroma { background-color: #f0f0f0; } */
/* Other .chroma .x { } */
@@ -88,7 +88,7 @@
.language-bash,
.language-sh {
&::before {
- color: $gray-500;
+ color: var(--bs-gray-600);
content: "$ ";
user-select: none;
}
diff --git a/docs/assets/scss/_variables.scss b/docs/assets/scss/_variables.scss
index d4b484334..167b89df1 100644
--- a/docs/assets/scss/_variables.scss
+++ b/docs/assets/scss/_variables.scss
@@ -1,16 +1,15 @@
-$white: #fff;
-$blue: #007bff;
-$gray-100: #f8f9fa;
-$gray-500: #adb5bd;
-$gray-700: #495057;
-$gray-900: #212529;
-$primary: #0d6efd;
-$teal-100: #d2f4ea;
-
// Local docs variables
-$bd-purple: #563d7c;
-$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // #7952b3
-$bd-dark: #2a2730;
-$bd-download: #ffe484;
+$bd-purple: #4c0bce;
+$bd-violet: lighten(saturate($bd-purple, 5%), 15%);
+$bd-accent: #ffe484;
+$bd-gutter-x: 3rem;
-$spacer: 1rem;
+:root {
+ --bd-purple: #{$bd-purple};
+ --bd-violet: #{$bd-violet};
+ --bd-accent: #{$bd-accent};
+ --bd-violet-rgb: #{to-rgb($bd-violet)};
+ --bd-accent-rgb: #{to-rgb($bd-accent)};
+ --bd-pink-rgb: #{to-rgb($pink-500)};
+ --bd-teal-rgb: #{to-rgb($teal-500)};
+}
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index cafa4406d..1e83c2eb7 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1,3 +1,42 @@
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/maps";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+// @import "bootstrap/card";
+// @import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+// @import "bootstrap/pagination";
+// @import "bootstrap/badge";
+// @import "bootstrap/alert";
+// @import "bootstrap/progress";
+// @import "bootstrap/list-group";
+@import "bootstrap/close";
+// @import "bootstrap/toasts";
+// @import "bootstrap/modal";
+// @import "bootstrap/tooltip";
+// @import "bootstrap/popover";
+// @import "bootstrap/carousel";
+// @import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+// @import "bootstrap/placeholders";
+@import "bootstrap/helpers";
+@import "bootstrap/utilities/api";
+
@import "variables";
@import "buttons";
@import "clipboard-js";
@@ -8,9 +47,14 @@
@import "ads";
@import "home";
+.bd-gutter {
+ --bs-gutter-x: #{$bd-gutter-x};
+}
+
.bi {
display: inline-block;
vertical-align: -.125em;
+ fill: currentcolor;
}
.hero-notice {
@@ -24,13 +68,15 @@
.highlight {
padding: 1.25rem;
margin-bottom: 1.5rem;
- background-color: $gray-100;
- border-radius: .25rem;
+ background-color: var(--bs-gray-100);
+ border-radius: .5rem;
pre {
margin-bottom: 0;
scrollbar-width: none;
+ &:focus { outline: 0; }
+
&::-webkit-scrollbar {
display: none;
}
@@ -72,15 +118,31 @@
}
.hero {
- border-bottom: 1px solid rgba(0, 0, 0, .05);
+ border-bottom: 1px solid rgba(0, 0, 0, .075);
- .highlight pre {
- padding-right: 4em;
+ .highlight {
margin-bottom: 0;
- border-radius: .5rem;
+ color: var(--bs-gray-200);
+ background-color: var(--bs-gray-800);
+
+ pre {
+ margin-bottom: 0;
+
+ @media (min-width: 768px) {
+ padding-right: 4em;
+ }
+ }
}
+
.btn-clipboard {
top: .625em;
+ color: var(--bs-gray-200);
+ background-color: var(--bs-gray-800);
+ }
+
+ .btn {
+ padding: 1rem 1.25rem;
+ border-radius: .5rem;
}
hr {
@@ -113,10 +175,10 @@
padding: 100px 2rem;
margin-right: 15px;
margin-left: 15px;
- color: $gray-500;
+ color: var(--bs-gray-500);
text-align: center;
content: "Nothing found, try searching again.";
- background-color: $gray-100;
+ background-color: var(--bs-gray-100);
border-radius: .5rem;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-01 02:48:32 +0300