Я добавляю новую цветовую тему в свой Bootstrap SASS.
У меня есть собственный файл с моими модами и новым цветом (GOLD).
После прочтения и МНОГО поисков мне удалось создать новую тему и почти все элементы, включая фон и границы.
Т.е.: text-gold, border-gold, btn-gold, bg-gold и т. д.Но даже следуя примерам и документации BS, я не могу создавать классы «тонкий» и «акцент».
Нет «border-gold-subtle, text-gold-emphasis, bg- gold-subtle и т. д.»
Есть ли способ добиться этого?
Мой код (я удалил другие блоки кода, не связанные с цветовой темой )
@import "functions";
$primary: #2B4261 !default;
$secondary: #9FA6B2 !default;
$success: #14A44D !default;
$info: #54B4D3 !default;
$warning: #E4A11B !default;
$danger: #DC4C64 !default;
$light: #FBFBFB !default;
$dark: #332D2D !default;
$gold: #AC863C !default;
$gold-bg-subtle: tint-color($gold, 80%) !default;
$gold-border-subtle: tint-color($gold, 60%) !default;
$gold-bg-subtle-dark: shade-color($danger, 80%) !default;
$gold-border-subtle-dark: shade-color($primary, 40%) !default;
@import "variables";
@import "variables-dark";
$custom-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"gold": $gold
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "maps";
@import "mixins";
@import "utilities";
$custom-colors-text: ("gold": $gold);
$custom-colors-bg-subtle: ("gold": $gold-bg-subtle);
$custom-colors-border-subtle: ("gold": $gold-border-subtle);
$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
$custom-colors-text-dark: ("gold": $gold);
$custom-colors-bg-subtle-dark: ("gold": $gold-bg-subtle-dark);
$custom-colors-border-subtle-dark: ("gold": $gold-border-subtle-dark);
$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
@import "bootstrap";
Подробнее здесь: https://stackoverflow.com/questions/790 ... theme-sass
Классы Subtle и Emphasis в новой цветовой теме Bootstrap 5.3 SASS ⇐ CSS
Разбираемся в CSS
-
Anonymous
1727929101
Anonymous
Я добавляю новую цветовую тему в свой Bootstrap SASS.
У меня есть собственный файл с моими модами и новым цветом (GOLD).
После прочтения и МНОГО поисков мне удалось создать новую тему и почти все элементы, включая фон и границы.
Т.е.: text-gold, border-gold, btn-gold, bg-gold и т. д.Но даже следуя примерам и документации BS, я не могу создавать классы «тонкий» и «акцент».
Нет «border-gold-subtle, text-gold-emphasis, bg- gold-subtle и т. д.»
Есть ли способ добиться этого?
Мой код (я удалил другие блоки кода, не связанные с цветовой темой )
@import "functions";
$primary: #2B4261 !default;
$secondary: #9FA6B2 !default;
$success: #14A44D !default;
$info: #54B4D3 !default;
$warning: #E4A11B !default;
$danger: #DC4C64 !default;
$light: #FBFBFB !default;
$dark: #332D2D !default;
$gold: #AC863C !default;
$gold-bg-subtle: tint-color($gold, 80%) !default;
$gold-border-subtle: tint-color($gold, 60%) !default;
$gold-bg-subtle-dark: shade-color($danger, 80%) !default;
$gold-border-subtle-dark: shade-color($primary, 40%) !default;
@import "variables";
@import "variables-dark";
$custom-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"gold": $gold
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "maps";
@import "mixins";
@import "utilities";
$custom-colors-text: ("gold": $gold);
$custom-colors-bg-subtle: ("gold": $gold-bg-subtle);
$custom-colors-border-subtle: ("gold": $gold-border-subtle);
$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
$custom-colors-text-dark: ("gold": $gold);
$custom-colors-bg-subtle-dark: ("gold": $gold-bg-subtle-dark);
$custom-colors-border-subtle-dark: ("gold": $gold-border-subtle-dark);
$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
@import "bootstrap";
Подробнее здесь: [url]https://stackoverflow.com/questions/79048994/subtle-and-emphasis-classes-on-bootstrap-5-3-new-color-theme-sass[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия