Skip to content

Commit

Permalink
feat(Sidebar): add Sidebar component and styles
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
Remove SideNav and replace with new Sidebar components
  • Loading branch information
@pauljeter
Ben Biggs authored and pauljeter committed Apr 1, 2019
1 parent 80080aa commit 7cee1cf
Show file tree
Hide file tree
Showing 48 changed files with 2,494 additions and 494 deletions.
1 change: 1 addition & 0 deletions core/scss/components/components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
@import 'radio';
@import 'search-input';
@import 'select';
@import 'sidebar';
@import 'side-nav';
@import 'slider';
@import 'social-list';
Expand Down
375 changes: 375 additions & 0 deletions core/scss/components/sidebar.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,375 @@
/**
* @name Sidebar
* @category layout
* @component sidebar
*/
@import '../settings/colors';
@import '../settings/fonts';

@include exports('cui-sidebar') {
.#{$prefix}-sidebar {
width: rem-calc(200);
height: 100%;
background-color: $white;
z-index: $zindex-sidebar;
@include flex($fd: column, $ai: flex-start);

&--expanded {
display: block;
}

&--collapsed {
display: none;
}

&--topbar {
padding-top: $top-bar__height--desktop;
}

&__footer,
&__header {
width: 100%;
@include flex($fd: column);
}

&--fixed {
top: 0;
left: 0;
position: fixed;
}

&--indented {
background-color: $black-08;
.#{$prefix}-sidebar {
&-nav {
&__group {
&--primary {
.cui-list-item {
height: rem-calc(40);
font-size: rem-calc(14);

&__left {
font-size: rem-calc(16);
}

@include list-item-color(
$active-bgrd-color: $black-08,
$active-color: $black,
$background-color: transparent,
$color: $black,
$focus-color: $black-04,
$header-color: $black,
$hover-bgrd-color: $black-04,
$includeFocus: false,
$subheader-color: $black
);
}

.#{$prefix}-sidebar-nav__group--secondary {
.cui-list-item {
padding-left: rem-calc(56);

@include list-item-color(
$active-bgrd-color: $black-08,
$active-color: $black,
$background-color: transparent,
$color: $gray-1,
$focus-color: $black-04,
$hover-bgrd-color: $black-04,
$includeFocus: false,
$section-left-color: $gray-1,
$section-right-color: $gray-1
);
}

.#{$prefix}-sidebar-nav__group--tertiary {
.cui-list-item {
padding-left: rem-calc(68);
}
}
}
}
}
}
}
}

&--nested {
width: rem-calc(240);

.#{$prefix}-sidebar {
&-nav {
&__group {
&--primary {
.cui-list-item {
height: rem-calc(44);
padding: 0 rem-calc(20);
font-size: rem-calc(16);

&__left {
font-size: rem-calc(20);
}

@include list-item-color(
$active-bgrd-color: $black-08,
$active-color: $black,
$background-color: transparent,
$color: $gray-1,
$focus-color: $black-04,
$hover-bgrd-color: $black-04,
$includeFocus: false,
$section-left-color: $gray-1,
$section-right-color: $gray-1,
);
}
}
}
}
}
}

&--topbar {
padding-top: $top-bar__height--desktop;
}

&__body {
flex-basis: auto;
flex-grow: 1;
overflow-y: scroll;
width: 100%;
}

.cui-list-item {
&:focus {
box-shadow: none;
}
}

&-nav {
padding-top: rem-calc(56);
&--header {
padding-top: rem-calc(24);
}
&__header {
color: $gray-2;
height: rem-calc(36);
font-size: rem-calc(12);
text-transform: uppercase;
line-height: rem-calc(16);
padding: 0 rem-calc(24);
border-bottom: 1px solid $black-08;
margin-bottom: rem-calc(8);
@include flex($jc: start);
}

&__group {
&--expanded {
display: block;
}

&--collapsed {
display: none;
}

width: 100%;

&--primary {
.cui-list-item {
padding: 0 rem-calc(24);

@include list-item-color(
$active-bgrd-color: transparent,
$active-color: $blue-dark-press,
$active-section-right-color: $black-60,
$background-color: transparent,
$color: $black,
$header-color: $black,
$hover-color: $blue-dark-hover,
$hover-bgrd-color: transparent,
$includeFocus: false,
$section-right-color: $black-60,
$subheader-color: $black
);
}

.#{$prefix}-sidebar-nav__group--secondary {
padding-bottom: rem-calc(8);

.cui-list-item {
height: rem-calc(36);
font-size: rem-calc(14);

@include list-item-color(
$active-bgrd-color: transparent,
$active-color: $blue-dark-press,
$active-section-right-color: $black-60,
$background-color: transparent,
$color: $gray-2,
$header-color: $gray-2,
$hover-color: $blue-dark-hover,
$hover-bgrd-color: transparent,
$includeFocus: false,
$section-right-color: $black-60,
$subheader-color: $gray-2
);
}

.#{$prefix}-sidebar-nav__group--tertiary {
padding-top: rem-calc(4);

.cui-list-item {
padding-left: rem-calc(36);
height: rem-calc(32);
font-size: rem-calc(12);

@include list-item-color(
$active-bgrd-color: transparent,
$active-color: $blue-dark-press,
$active-section-right-color: $black-60,
$background-color: transparent,
$color: $gray-1,
$header-color: $gray-1,
$hover-color: $blue-dark-hover,
$hover-bgrd-color: transparent,
$includeFocus: false,
$section-right-color: $black-60,
$subheader-color: $gray-1
);

&:before {
position: absolute;
content: '';
height: rem-calc(32);
width: 2px;
box-shadow: -12px 0 0 0 $black-12;
}

&:only-child {
&:before {
height: 100%;
}
}

&:first-of-type:not(:only-child) {
&:before {
height: calc(100% - 16%);
bottom: 0;
}
}

&:last-of-type:not(:only-child) {
&:before {
top: 0;
height: calc(100% - 16%);
}
}

&:focus {
&:after {
position: absolute;
content: '';
height: calc(100% - 33%);
width: 2px;
box-shadow: -12px 0 0 0 $blue-dark-hover;
}
}

&:hover {
&:after {
position: absolute;
content: '';
height: calc(100% - 33%);
width: 2px;
box-shadow: -12px 0 0 0 $blue-dark-hover;
}
}

&:active,
&.active {
&:after {
position: absolute;
content: '';
height: calc(100% - 33%);
width: 2px;
box-shadow: -12px 0 0 0 $blue-dark-press;
}
}
}
}
}
}
}
}

&--dark.#{$prefix}-sidebar {
background-color: $gray-1;
.#{$prefix}-sidebar {

&-nav {
&__group {
&--primary {
.cui-list-item {
@include list-item-color(
$active-bgrd-color: rgba(0, 115, 149, 0.56),
$active-color: $white,
$active-section-left-color: $white,
$active-section-right-color: $white,
$background-color: transparent,
$color: $white,
$focus-color: $white,
$header-color: $white,
$hover-color: $white,
$hover-bgrd-color: rgba(0, 115, 149, 0.4),
$includeFocus: false,
$section-left-color: $white,
$section-right-color: $white,
$subheader-color: $white,
);
}

& .#{$prefix}-sidebar-nav__group--secondary {
.cui-list-item {
@include list-item-color(
$active-bgrd-color: rgba(0, 115, 149, 0.56),
$active-color: $white,
$active-section-left-color: $white,
$active-section-right-color: $white,
$background-color: transparent,
$color: $white-80,
$focus-color: $white-80,
$header-color: $white-80,
$hover-color: $white-80,
$hover-bgrd-color: rgba(0, 115, 149, 0.4),
$includeFocus: false,
$section-left-color: $white,
$section-right-color: $white,
$subheader-color: $white-80,
);
}

& .#{$prefix}-sidebar-nav__group--tertiary {
.cui-list-item {
@include list-item-color(
$active-bgrd-color: transparent,
$active-color: $blue-press,
$background-color: transparent,
$color: $white-80,
$focus-color: $blue-dark-hover,
$hover-color: $blue-dark-hover,
$hover-bgrd-color: transparent,
$includeFocus: false,
);

&:before {
box-shadow: -12px 0 0 0 $white-12;
}
}
}
}
}
}
}
}
}
}
}
7 changes: 4 additions & 3 deletions core/scss/settings/z-index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$zindex-top-bar: 1000;
$zindex-close: 1005;
$zindex-popover: 1010;
$zindex-sidebar: 1000;
$zindex-top-bar: 1005;
$zindex-close: 1015;
$zindex-popover: 1020;
$zindex-tooltip: 1030;
$zindex-top-bar-fixed: 1030;
$zindex-modal-background: 1040;
Expand Down
Loading

0 comments on commit 7cee1cf

Please sign in to comment.