diff options
author | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
commit | eeaddb27560d723ca7d61359744ceb2709fccd2d (patch) | |
tree | 04ddbc49ae7b73d5f5a9e1716d7227aecd3b9f85 /pyblackbird_cc/static/scss/_nav.scss | |
parent | 7a3044c859043837e6c7c95bb4894d04e9b2cbc2 (diff) |
Renamed from pyblackbird_cc to alphabetlearning - everywhere
Diffstat (limited to 'pyblackbird_cc/static/scss/_nav.scss')
-rw-r--r-- | pyblackbird_cc/static/scss/_nav.scss | 197 |
1 files changed, 0 insertions, 197 deletions
diff --git a/pyblackbird_cc/static/scss/_nav.scss b/pyblackbird_cc/static/scss/_nav.scss deleted file mode 100644 index ff073d3..0000000 --- a/pyblackbird_cc/static/scss/_nav.scss +++ /dev/null @@ -1,197 +0,0 @@ -// Base class -// -// Kickstart any navigation component with a set of style resets. Works with -// `<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}; - --#{$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; - margin-bottom: 0; - list-style: none; -} - -.nav-link { - display: block; - 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); - background: none; - border: 0; - @include transition($nav-link-transition); - - &:hover, - &:focus { - color: var(--#{$prefix}nav-link-hover-color); - text-decoration: if($link-hover-decoration == underline, none, null); - } - - &:focus-visible { - outline: 0; - box-shadow: $nav-link-focus-box-shadow; - } - - // Disabled state lightens text - &.disabled, - &:disabled { - color: var(--#{$prefix}nav-link-disabled-color); - pointer-events: none; - cursor: default; - } -} - -// -// Tabs -// - -.nav-tabs { - // 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(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list - 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: var(--#{$prefix}nav-tabs-link-hover-border-color); - } - } - - .nav-link.active, - .nav-item.show .nav-link { - 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(-1 * var(--#{$prefix}nav-tabs-border-width)); // 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); - } -} - - -// -// Pills -// - -.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 { - @include border-radius(var(--#{$prefix}nav-pills-border-radius)); - } - - .nav-link.active, - .show > .nav-link { - color: var(--#{$prefix}nav-pills-link-active-color); - @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg)); - } -} - - -// -// Underline -// - -.nav-underline { - // scss-docs-start nav-underline-css-vars - --#{$prefix}nav-underline-gap: #{$nav-underline-gap}; - --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width}; - --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color}; - // scss-docs-end nav-underline-css-vars - - gap: var(--#{$prefix}nav-underline-gap); - - .nav-link { - padding-right: 0; - padding-left: 0; - border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent; - - &:hover, - &:focus { - border-bottom-color: currentcolor; - } - } - - .nav-link.active, - .show > .nav-link { - font-weight: $font-weight-bold; - color: var(--#{$prefix}nav-underline-link-active-color); - border-bottom-color: currentcolor; - } -} - - -// -// Justified variants -// - -.nav-fill { - > .nav-link, - .nav-item { - flex: 1 1 auto; - text-align: center; - } -} - -.nav-justified { - > .nav-link, - .nav-item { - flex-basis: 0; - flex-grow: 1; - text-align: center; - } -} - -.nav-fill, -.nav-justified { - .nav-item .nav-link { - width: 100%; // Make sure button will grow - } -} - - -// Tabbable tabs -// -// Hide tabbable panes to start, show them when `.active` - -.tab-content { - > .tab-pane { - display: none; - } - > .active { - display: block; - } -} |