mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
remove - vars, update docs to generate from data yml files, update mixins, and generate card, button, bg, and color classes from the sass map
This commit is contained in:
Mark Otto
parent
74f1d002b4
commit
597e9f8618
11 changed files with 72 additions and 165 deletions
|
|
@ -86,7 +86,7 @@
|
|||
.bd-example-container-header {
|
||||
height: 3rem;
|
||||
margin-bottom: .5rem;
|
||||
background-color: lighten($brand-primary, 50%);
|
||||
background-color: lighten($blue, 50%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
float: right;
|
||||
width: 4rem;
|
||||
height: 8rem;
|
||||
background-color: lighten($brand-warning, 25%);
|
||||
background-color: lighten($blue, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
color: #333;
|
||||
}
|
||||
.bd-featurette-img:hover {
|
||||
color: $brand-primary;
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
.bd-featurette-img img {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
color: #99979c;
|
||||
|
||||
&:hover {
|
||||
color: $brand-primary;
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
|||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<h3 class="card-header">Featured</h3>
|
||||
<h4 class="card-header">Featured</h4>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
|
|
@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
|||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
|
@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
|||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
|
@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
|
|||
{% example html %}
|
||||
<div class="card w-75">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
|
|
@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
|
|||
|
||||
<div class="card w-50">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
|
|
@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
|
|||
{% example html %}
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
|
@ -376,7 +376,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
|
|||
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,37 +7,22 @@ toc: true
|
|||
---
|
||||
|
||||
{% example html %}
|
||||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-gray-dark">Eget risus varius blandit sit ultricies vehicula amet non magna.</p>
|
||||
<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
|
||||
{% for color in site.data.theme-colors %}
|
||||
<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="text-muted">Muted link</a>
|
||||
<a href="#" class="text-primary">Primary link</a>
|
||||
<a href="#" class="text-success">Success link</a>
|
||||
<a href="#" class="text-info">Info link</a>
|
||||
<a href="#" class="text-warning">Warning link</a>
|
||||
<a href="#" class="text-danger">Danger link</a>
|
||||
{% for color in site.data.theme-colors %}
|
||||
<p><a href="#" class="text-{{ color.name }}{% if color.name == "white" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
|
||||
|
||||
{% example html %}
|
||||
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
|
||||
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
|
||||
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
|
||||
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
|
||||
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
|
||||
<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
|
||||
<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
|
||||
{% for color in site.data.theme-colors %}
|
||||
<div class="p-3 bg-{{ color.name }} {% if color.name == "white" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
{% callout info %}
|
||||
|
|
|
|||
|
|
@ -50,43 +50,16 @@ fieldset[disabled] a.btn {
|
|||
// Alternate buttons
|
||||
//
|
||||
|
||||
.btn-primary {
|
||||
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
|
||||
}
|
||||
.btn-secondary {
|
||||
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
|
||||
}
|
||||
.btn-info {
|
||||
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
|
||||
}
|
||||
.btn-success {
|
||||
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
|
||||
}
|
||||
.btn-warning {
|
||||
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
|
||||
}
|
||||
.btn-danger {
|
||||
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove all backgrounds
|
||||
.btn-outline-primary {
|
||||
@include button-outline-variant($btn-primary-bg, $btn-primary-color);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
@include button-outline-variant($btn-secondary-border-color, $btn-secondary-color);
|
||||
}
|
||||
.btn-outline-info {
|
||||
@include button-outline-variant($btn-info-bg, $btn-info-color);
|
||||
}
|
||||
.btn-outline-success {
|
||||
@include button-outline-variant($btn-success-bg, $btn-success-color);
|
||||
}
|
||||
.btn-outline-warning {
|
||||
@include button-outline-variant($btn-warning-bg, $btn-warning-color);
|
||||
}
|
||||
.btn-outline-danger {
|
||||
@include button-outline-variant($btn-danger-bg, $btn-danger-color);
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-outline-variant($value, #fff);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -105,42 +105,19 @@
|
|||
// Background variations
|
||||
//
|
||||
|
||||
.card-primary {
|
||||
@include card-variant($brand-primary, $brand-primary);
|
||||
}
|
||||
.card-success {
|
||||
@include card-variant($brand-success, $brand-success);
|
||||
}
|
||||
.card-info {
|
||||
@include card-variant($brand-info, $brand-info);
|
||||
}
|
||||
.card-warning {
|
||||
@include card-variant($brand-warning, $brand-warning);
|
||||
}
|
||||
.card-danger {
|
||||
@include card-variant($brand-danger, $brand-danger);
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-#{$color} {
|
||||
@include card-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove all backgrounds
|
||||
.card-outline-primary {
|
||||
@include card-outline-variant($btn-primary-bg);
|
||||
}
|
||||
.card-outline-secondary {
|
||||
@include card-outline-variant($btn-secondary-border-color);
|
||||
}
|
||||
.card-outline-info {
|
||||
@include card-outline-variant($btn-info-bg);
|
||||
}
|
||||
.card-outline-success {
|
||||
@include card-outline-variant($btn-success-bg);
|
||||
}
|
||||
.card-outline-warning {
|
||||
@include card-outline-variant($btn-warning-bg);
|
||||
}
|
||||
.card-outline-danger {
|
||||
@include card-outline-variant($btn-danger-bg);
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-outline-#{$color} {
|
||||
@include card-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inverse text within a card for use with dark backgrounds
|
||||
//
|
||||
|
|
|
|||
|
|
@ -119,14 +119,6 @@ $gray-light: #636c72 !default;
|
|||
$gray-lighter: #eceeef !default;
|
||||
$gray-lightest: #f7f7f9 !default;
|
||||
|
||||
// Reassign color vars to semantic color scheme
|
||||
$brand-primary: $blue !default;
|
||||
$brand-success: $green !default;
|
||||
$brand-info: $teal !default;
|
||||
$brand-warning: $orange !default;
|
||||
$brand-danger: $red !default;
|
||||
$brand-inverse: $gray-dark !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
|
|
@ -176,7 +168,7 @@ $body-color: $gray-dark !default;
|
|||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: $brand-primary !default;
|
||||
$link-color: theme-color("primary") !default;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
|
|
@ -240,7 +232,7 @@ $border-radius-lg: .3rem !default;
|
|||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
$component-active-bg: theme-color("primary") !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
|
|
@ -360,11 +352,11 @@ $input-btn-line-height-lg: 1.5 !default;
|
|||
|
||||
$btn-font-weight: $font-weight-normal !default;
|
||||
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
|
||||
$btn-focus-box-shadow: 0 0 0 3px rgba($brand-primary, .25) !default;
|
||||
$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
||||
|
||||
$btn-primary-color: $white !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-bg: theme-color("primary") !default;
|
||||
$btn-primary-border-color: $btn-primary-bg !default;
|
||||
|
||||
$btn-secondary-color: $gray-dark !default;
|
||||
|
|
@ -372,19 +364,19 @@ $btn-secondary-bg: $white !default;
|
|||
$btn-secondary-border-color: #ccc !default;
|
||||
|
||||
$btn-info-color: $white !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-bg: theme-color("info") !default;
|
||||
$btn-info-border-color: $btn-info-bg !default;
|
||||
|
||||
$btn-success-color: $white !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-bg: theme-color("success") !default;
|
||||
$btn-success-border-color: $btn-success-bg !default;
|
||||
|
||||
$btn-warning-color: $white !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-bg: theme-color("warning") !default;
|
||||
$btn-warning-border-color: $btn-warning-bg !default;
|
||||
|
||||
$btn-danger-color: $white !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-bg: theme-color("danger") !default;
|
||||
$btn-danger-border-color: $btn-danger-bg !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
|
@ -414,7 +406,7 @@ $input-border-radius-lg: $border-radius-lg !default;
|
|||
$input-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$input-focus-bg: $input-bg !default;
|
||||
$input-focus-border-color: lighten($brand-primary, 25%) !default;
|
||||
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default;
|
||||
$input-focus-color: $input-color !default;
|
||||
|
||||
|
|
@ -461,19 +453,19 @@ $custom-control-indicator-disabled-bg: $gray-lighter !default;
|
|||
$custom-control-description-disabled-color: $gray-light !default;
|
||||
|
||||
$custom-control-indicator-checked-color: $white !default;
|
||||
$custom-control-indicator-checked-bg: $brand-primary !default;
|
||||
$custom-control-indicator-checked-bg: theme-color("primary") !default;
|
||||
$custom-control-indicator-checked-box-shadow: none !default;
|
||||
|
||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
|
||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
|
||||
|
||||
$custom-control-indicator-active-color: $white !default;
|
||||
$custom-control-indicator-active-bg: lighten($brand-primary, 35%) !default;
|
||||
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
|
||||
$custom-control-indicator-active-box-shadow: none !default;
|
||||
|
||||
$custom-checkbox-border-radius: $border-radius !default;
|
||||
$custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-checkbox-indeterminate-bg: $brand-primary !default;
|
||||
$custom-checkbox-indeterminate-bg: theme-color("primary") !default;
|
||||
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
||||
$custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-checkbox-indeterminate-box-shadow: none !default;
|
||||
|
|
@ -497,7 +489,7 @@ $custom-select-border-width: $input-btn-border-width !default;
|
|||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
|
||||
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
|
||||
$custom-select-font-size-sm: 75% !default;
|
||||
|
|
@ -505,7 +497,7 @@ $custom-select-height-sm: $input-height-sm !default;
|
|||
|
||||
$custom-file-height: 2.5rem !default;
|
||||
$custom-file-width: 14rem !default;
|
||||
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
|
||||
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
|
||||
|
||||
$custom-file-padding-y: 1rem !default;
|
||||
$custom-file-padding-x: .5rem !default;
|
||||
|
|
@ -529,8 +521,8 @@ $custom-file-text: (
|
|||
|
||||
|
||||
// Form validation
|
||||
$form-feedback-valid-color: $brand-success !default;
|
||||
$form-feedback-invalid-color: $brand-danger !default;
|
||||
$form-feedback-valid-color: theme-color("success") !default;
|
||||
$form-feedback-invalid-color: theme-color("danger") !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
|
|
@ -642,8 +634,8 @@ $pagination-hover-bg: $gray-lighter !default;
|
|||
$pagination-hover-border-color: #ddd !default;
|
||||
|
||||
$pagination-active-color: $white !default;
|
||||
$pagination-active-bg: $brand-primary !default;
|
||||
$pagination-active-border-color: $brand-primary !default;
|
||||
$pagination-active-bg: theme-color("primary") !default;
|
||||
$pagination-active-border-color: theme-color("primary") !default;
|
||||
|
||||
$pagination-disabled-color: $gray-light !default;
|
||||
$pagination-disabled-bg: $white !default;
|
||||
|
|
@ -745,11 +737,11 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau
|
|||
// Badges
|
||||
|
||||
$badge-default-bg: $gray-light !default;
|
||||
$badge-primary-bg: $brand-primary !default;
|
||||
$badge-success-bg: $brand-success !default;
|
||||
$badge-info-bg: $brand-info !default;
|
||||
$badge-warning-bg: $brand-warning !default;
|
||||
$badge-danger-bg: $brand-danger !default;
|
||||
$badge-primary-bg: theme-color("primary") !default;
|
||||
$badge-success-bg: theme-color("success") !default;
|
||||
$badge-info-bg: theme-color("info") !default;
|
||||
$badge-warning-bg: theme-color("warning") !default;
|
||||
$badge-danger-bg: theme-color("danger") !default;
|
||||
|
||||
$badge-color: $white !default;
|
||||
$badge-link-hover-color: $white !default;
|
||||
|
|
@ -831,7 +823,7 @@ $progress-bg: $gray-lighter !default;
|
|||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
$progress-bar-bg: theme-color("primary") !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
$progress-bar-transition: width .6s ease !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,21 +3,22 @@
|
|||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
$active-background: darken($background, 10%);
|
||||
$active-border: darken($border, 12%);
|
||||
@mixin button-variant($background, $border) {
|
||||
$active-background: darken($background, 7.5%);
|
||||
$active-border: darken($border, 10%);
|
||||
|
||||
color: $color;
|
||||
@include color-yiq($background);
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
// Hover and focus styles are shared
|
||||
@include hover {
|
||||
color: $color;
|
||||
&:hover {
|
||||
@include color-yiq($background);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
|
|
@ -38,7 +39,6 @@
|
|||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
border-color: $active-border;
|
||||
|
|
|
|||
|
|
@ -6,14 +6,6 @@
|
|||
background-color: darken($body-bg, 3%);
|
||||
}
|
||||
|
||||
@include bg-variant('.bg-primary', $brand-primary);
|
||||
|
||||
@include bg-variant('.bg-success', $brand-success);
|
||||
|
||||
@include bg-variant('.bg-info', $brand-info);
|
||||
|
||||
@include bg-variant('.bg-warning', $brand-warning);
|
||||
|
||||
@include bg-variant('.bg-danger', $brand-danger);
|
||||
|
||||
@include bg-variant('.bg-inverse', $brand-inverse);
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-variant('.bg-#{$color}', $value);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,21 +38,9 @@
|
|||
color: #fff !important;
|
||||
}
|
||||
|
||||
@include text-emphasis-variant('.text-muted', $text-muted);
|
||||
|
||||
@include text-emphasis-variant('.text-primary', $brand-primary);
|
||||
|
||||
@include text-emphasis-variant('.text-success', $brand-success);
|
||||
|
||||
@include text-emphasis-variant('.text-info', $brand-info);
|
||||
|
||||
@include text-emphasis-variant('.text-warning', $brand-warning);
|
||||
|
||||
@include text-emphasis-variant('.text-danger', $brand-danger);
|
||||
|
||||
// Font color
|
||||
|
||||
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
|
||||
@each $color, $value in $theme-colors {
|
||||
@include text-emphasis-variant('.text-#{$color}', $value);
|
||||
}
|
||||
|
||||
// Misc
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue