Skip to content

Commit

Permalink
Vertical Tabs: Sass variable namespace [amends #570]
Browse files Browse the repository at this point in the history
  • Loading branch information
@francisrupert
francisrupert committed Feb 15, 2022
1 parent c94b997 commit cedc3fd
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 39 deletions.
74 changes: 74 additions & 0 deletions src/content-tabs--vertical-rwd.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>

<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Page Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/fsa-style.min.css" media="all">
<link rel="stylesheet" href="css/fsa-style-docs.min.css" media="all">
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.js"></script>
<script src="js/vendor/selectivizr-min.js"></script>
<script src="js/vendor/rem.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fsa-p--xl">
<div class="fsa-m-b--m">
<div class="fsa-content-tabs fsa-content-tabs--vertical-left@s">
<ul class="fsa-content-tabs__list">
<li class="fsa-content-tabs__item">
<a class="fsa-content-tabs__label" href="/link.html">
<span class="fsa-content-tabs__label-text">
<svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path></svg>
Account
</span>
</a>
</li>
<li class="fsa-content-tabs__item">
<a class="fsa-content-tabs__label fsa-content-tabs__label--active" aria-current="step" href="/link.html">
<span class="fsa-content-tabs__label-text">
<svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></svg>
Notifications
</span>
</a>
</li>
<li class="fsa-content-tabs__item">
<a class="fsa-content-tabs__label" href="/link.html">
<span class="fsa-content-tabs__label-text">
<svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path></svg>
Security
</span>
</a>
</li>
<li class="fsa-content-tabs__item">
<a class="fsa-content-tabs__label" href="/link.html">
<span class="fsa-content-tabs__label-text">
<svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></svg>
Permissions
</span>
</a>
</li>
<li class="fsa-content-tabs__item">
<a class="fsa-content-tabs__label" href="/link.html">
<span class="fsa-content-tabs__label-text">
No icon
</span>
</a>
</li>
</ul>
<div class="fsa-content-tabs__aside">(Optional aside)</div>
</div>
<div class="fsa-text-align--center fsa-p--xxl fsa-bg--yellow-100" style="padding-top: 84px; padding-bottom: 106px;">
(Tab Target below)
</div>
</div>
</div>
<script src="js/fsa-style-docs.min.js"></script>
</body>
</html>
80 changes: 41 additions & 39 deletions src/stylesheets/components/_fsa.content-tabs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
.fsa-content-tabs {
$contentTabs: #{$contentTabs};

.#{$contentTabs} {

$tab-padding: $size-small;

& {

&:not(.fsa-content-tabs--vertical-left):not(.fsa-content-tabs--vertical-right) {
&:not(.#{$contentTabs}--vertical-left):not(.#{$contentTabs}--vertical-right) {
@include overflow-gradient();
}

Expand Down Expand Up @@ -69,20 +71,20 @@
margin-left: 0;
}

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
display: block;
margin-left: 0;
}

// scss-lint:disable SelectorFormat
.fsa-content-tabs--justified & {
.#{$contentTabs}--justified & {
@include breakpoint(L) {
width: 100%;
}
}

.fsa-content-tabs--justified-equal & {
.#{$contentTabs}--justified-equal & {
@include breakpoint(L) {
width: 100%;
table-layout: fixed;
Expand All @@ -100,22 +102,22 @@
text-align: right;
}

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
margin-top: $size-default;
text-align: initial;
}

.fsa-content-tabs--vertical-left & {
.#{$contentTabs}--vertical-left & {
padding-right: $tab-padding * 1.5;
}
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-right & {
padding-left: $tab-padding * 1.5;
}

// scss-lint:disable SelectorFormat
.fsa-content-tabs--justified &,
.fsa-content-tabs--justified-equal & {
.#{$contentTabs}--justified &,
.#{$contentTabs}--justified-equal & {
@include breakpoint(L) {
display: none;
}
Expand All @@ -133,8 +135,8 @@
display: table-cell;
vertical-align: bottom;

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
display: block;
}

Expand All @@ -155,8 +157,8 @@
white-space: nowrap;
}

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
padding-right: 0;
padding-left: 0;
white-space: normal;
Expand All @@ -175,14 +177,14 @@
white-space: normal;
}

.fsa-content-tabs__item:first-child & {
.#{$contentTabs}__item:first-child & {
padding-left: 0;
@include breakpoint(L) {
padding-left: 0;
}
}

.fsa-content-tabs__item:last-child & {
.#{$contentTabs}__item:last-child & {
@include breakpoint(L) {
padding-right: 0;
}
Expand All @@ -209,7 +211,7 @@
}

// scss-lint:disable SelectorFormat
.fsa-content-tabs--justified:not(.fsa-content-tabs--vertical-left):not(.fsa-content-tabs--vertical-right) & {
.#{$contentTabs}--justified:not(.#{$contentTabs}--vertical-left):not(.#{$contentTabs}--vertical-right) & {
@include breakpoint(L) {
padding-left: ($tab-padding / 2);
padding-right: ($tab-padding / 2);
Expand All @@ -230,12 +232,12 @@
position: relative;
}

.fsa-content-tabs--vertical-left & {
.#{$contentTabs}--vertical-left & {
padding-top: ($tab-padding / 2);
padding-bottom: ($tab-padding / 2);
padding-right: $tab-padding * 1.5;
}
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-right & {
padding-top: ($tab-padding / 2);
padding-bottom: ($tab-padding / 2);
padding-left: $tab-padding * 1.5;
Expand All @@ -250,20 +252,20 @@
box-shadow: 0 (-$size-base / 2) 0 0 $color-fsa-tertiary-300 inset;
}

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
justify-content: initial;
}

// scss-lint:disable SelectorFormat
.fsa-content-tabs__label--active & {
.#{$contentTabs}__label--active & {

box-shadow: 0 (-$size-base) 0 0 $color-fsa-secondary inset;

.fsa-content-tabs--vertical-left & {
.#{$contentTabs}--vertical-left & {
box-shadow: (-$size-base) 0 0 0 $color-fsa-secondary inset;
}
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-right & {
box-shadow: ($size-base) 0 0 0 $color-fsa-secondary inset;
}

Expand All @@ -275,52 +277,52 @@

}

.fsa-content-tabs__label--small & {
.#{$contentTabs}__label--small & {

padding-top: ($tab-padding - $size-base);
padding-bottom: $tab-padding;

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
padding-top: ($tab-padding / 2);
padding-bottom: ($tab-padding / 2);
}

}

.fsa-content-tabs__label--large & {
.#{$contentTabs}__label--large & {

.fsa-content-tabs--vertical-left &,
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-left &,
.#{$contentTabs}--vertical-right & {
padding-top: 0;
padding-bottom: 0;
}

}

.fsa-content-tabs__label--unsaved &:after {
.#{$contentTabs}__label--unsaved &:after {
content: '\2022';
color: $color-fsa-red;
font-size: $size-medium;
line-height: $line-height-flat;
}

.fsa-content-tabs__label:hover & {
.#{$contentTabs}__label:hover & {
box-shadow: 0 (-$size-base) 0 0 $color-fsa-tertiary-300 inset;
.fsa-content-tabs--vertical-left & {
.#{$contentTabs}--vertical-left & {
box-shadow: (-$size-base) 0 0 0 $color-fsa-tertiary-300 inset;
}
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-right & {
box-shadow: ($size-base) 0 0 0 $color-fsa-tertiary-300 inset;
}
}

.fsa-content-tabs__label:active & {
.#{$contentTabs}__label:active & {
box-shadow: 0 (-$size-base) 0 0 $color-fsa-secondary inset;
.fsa-content-tabs--vertical-left & {
.#{$contentTabs}--vertical-left & {
box-shadow: (-$size-base) 0 0 0 $color-fsa-secondary inset;
}
.fsa-content-tabs--vertical-right & {
.#{$contentTabs}--vertical-right & {
box-shadow: (4$size-base) 0 0 0 $color-fsa-secondary inset;
}

Expand Down

0 comments on commit cedc3fd

Please sign in to comment.