mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 01:21:49 +02:00
Code Issues Releases Wiki Activity

Train PR: CSS variables for accordion, cards, navs, and modals (#36071)

Browse Source 
* Convert accordion to CSS vars

* Update accordion.md

* Convert navs to CSS variables

* Split up CSS vars

* bundlewatch

* fix vars

* Convert cards to CSS vars

* Convert modals to CSS variables

* Bundlewatch

Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
This commit is contained in:
Mark Otto
2022-03-28 15:05:37 -07:00
committed by GitHub
parent 7f35bc5b65
commit e342142b61
10 changed files with 256 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
scss/_nav.scss
View File

@@ -4,6 +4,16 @@
// `<nav>`s, `<ul>`s or `<ol>`s.
.nav {
// scss-docs-start nav-css-vars
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; // stylelint-disable-line custom-property-empty-line-before
--#{$prefix}nav-link-color: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
// scss-docs-end nav-css-vars
display: flex;
flex-wrap: wrap;
padding-left: 0;
@@ -13,22 +23,22 @@
.nav-link {
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
@include font-size($nav-link-font-size);
font-weight: $nav-link-font-weight;
color: $nav-link-color;
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
@include font-size(var(--#{$prefix}nav-link-font-size));
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color);
text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition);
&:hover,
&:focus {
color: $nav-link-hover-color;
color: var(--#{$prefix}nav-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
color: var(--#{$prefix}nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
@@ -39,23 +49,33 @@
//
.nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
// scss-docs-start nav-tabs-css-vars
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
// scss-docs-end nav-tabs-css-vars
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link {
margin-bottom: calc($nav-tabs-border-width * -1); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list
background: none;
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
&:hover,
&:focus {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
border-color: $nav-tabs-link-hover-border-color;
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
}
&.disabled {
color: $nav-link-disabled-color;
color: var(--#{$prefix}nav-link-disabled-color);
background-color: transparent;
border-color: transparent;
}
@@ -63,14 +83,14 @@
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-tabs-link-active-color;
background-color: $nav-tabs-link-active-bg;
border-color: $nav-tabs-link-active-border-color;
color: var(--#{$prefix}nav-tabs-link-active-color);
background-color: var(--#{$prefix}nav-tabs-link-active-bg);
border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc($nav-tabs-border-width * -1); // stylelint-disable-line function-disallowed-list
margin-top: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
@@ -82,16 +102,22 @@
//
.nav-pills {
// scss-docs-start nav-pills-css-vars
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars
.nav-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius);
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
@include gradient-bg($nav-pills-link-active-bg);
color: var(--#{$prefix}nav-pills-link-active-color);
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
}
}