aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/components/tabbed-navigation.scss
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/web-shared/src/styles/components/tabbed-navigation.scss')
-rw-r--r--old-apps/web-shared/src/styles/components/tabbed-navigation.scss133
1 files changed, 0 insertions, 133 deletions
diff --git a/old-apps/web-shared/src/styles/components/tabbed-navigation.scss b/old-apps/web-shared/src/styles/components/tabbed-navigation.scss
deleted file mode 100644
index 4090fca..0000000
--- a/old-apps/web-shared/src/styles/components/tabbed-navigation.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-@use '../base' as *;
-
-/* --------------------------------
-
-File#: _1_tabbed-navigation-v2
-Title: Tabbed Navigation v2
-Descr: Tabbed (secondary) navigation
-Usage: codyhouse.co/license
-
--------------------------------- */
-
-.tabs-nav-v2 {
- display: flex;
- flex-wrap: wrap;
-
- .tab-v2 {
- display: inline-block; // flexbox fallback
- display: inline-flex;
- align-items: center;
- }
-}
-
-.tabs-nav-v2__item {
- display: inline-block;
- padding: var(--space-xxs) var(--space-sm);
- color: inherit;
- white-space: nowrap;
- text-decoration: none;
-}
-
-.tabs-nav-v2__item--selected,
-.tabs-nav-v2__item[aria-selected="true"] {
- color: var(--color-bg);
- background-color: var(--color-contrast-higher);
-}
-
-@include breakpoint(md) {
- .tabs-nav-v2 {
- .tab-v2 {
- margin: 0;
- }
- }
-
- .tabs-nav-v2__item {
- background-color: transparent;
- margin: var(--space-xxs) var(--space-sm);
- padding: var(--space-xxxs) var(--space-xxs) !important;
- border-radius: var(--radius-md);
-
- &:hover {
- background-color: alpha(var(--color-primary), 0.035);
- color: var(--color-primary);
- }
- }
-
- .tabs-nav-v2__item--selected,
- .tabs-nav-v2__item[aria-selected="true"] {
-
- background-color: alpha(var(--color-primary), 0.075);
- color: var(--color-primary);
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- bottom: calc(var(--tabs-nav-border-width) * -1);
- left: 0;
- width: 100%;
- height: var(--tabs-nav-border-width);
- background-color: var(--color-bg);
- }
-
- &:hover {
- background-color: alpha(var(--color-primary), 0.075);
- }
- }
-}
-
-:root {
- --s-tabs-border-bottom-width: 1px;
- --s-tabs-selected-item-border-bottom-width: 1px;
-}
-
-.s-tabs {
- position: relative;
-
- &::after { /* gradient - truncate text */
- content: '';
- position: absolute;
- right: -1px;
- top: 0;
- height: calc(100% - var(--s-tabs-border-bottom-width));
- width: 2em;
- pointer-events: none;
- z-index: 1;
- }
-}
-
-.s-tabs__list {
- display: flex;
- overflow: auto;
- -webkit-overflow-scrolling: auto;
-
- &::after { /* border bottom */
- content: '';
- position: absolute;
- width: 100%;
- height: var(--s-tabs-border-bottom-width);
- left: 0;
- bottom: 0;
- background-color: var(--color-contrast-lower);
- }
-}
-
-.s-tabs__link {
- color: var(--color-contrast-medium);
- text-decoration: none;
- display: inline-block;
- padding: var(--space-xs) var(--space-sm);
- white-space: nowrap;
- border-bottom: var(--s-tabs-selected-item-border-bottom-width) solid transparent;
- z-index: 1;
-
- &:hover:not(.s-tabs__link--current) {
- color: var(--color-contrast-high);
- }
-}
-
-.s-tabs__link--current {
- position: relative;
- color: var(--color-primary);
- border-bottom-color: var(--color-primary);
-}