mirror of
https://github.com/Shopify/liquid.git
synced 2026-09-16 09:20:42 -07:00
Tetsuro
0ca571f58c
Big refactoring of SCSS active state for sidebar links update gitignore for node_modules folder removing node_modules from index Sticky Liquid link in sidebar Cleaned up index page Adding fixed width to buttons Refactoring Converted sidebar to use Collections Refactor sidebar CSS
105 lines
1.8 KiB
SCSS
105 lines
1.8 KiB
SCSS
|
|
$sidebar-width: 225px;
|
|
$logo-height: 130px;
|
|
$wrapper-width: 800px;
|
|
|
|
/*============================================================================
|
|
Content Area
|
|
==============================================================================*/
|
|
|
|
.content {
|
|
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
|
|
width: 100%;
|
|
}
|
|
|
|
.wrapper {
|
|
max-width: $wrapper-width;
|
|
margin: 0 auto;
|
|
padding: 0 $spacing-unit;
|
|
@extend %clearfix;
|
|
}
|
|
|
|
/*============================================================================
|
|
Sidebar
|
|
==============================================================================*/
|
|
|
|
.sidebar {
|
|
background: $color-blue-5;
|
|
width: $sidebar-width;
|
|
height: 100vh;
|
|
position: fixed;
|
|
}
|
|
|
|
.sidebar--logo {
|
|
font-size: $base-font-size * 2;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
height: $logo-height;
|
|
line-height: $logo-height;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid $color-blue-4;
|
|
|
|
a {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.sidebar--nav {
|
|
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
|
|
font-weight: bold;
|
|
max-height: 100%;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
list-style: none;
|
|
|
|
a {
|
|
color: $color-white;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin: 0px;
|
|
|
|
> li {
|
|
margin-bottom: $spacing-unit / 2;
|
|
|
|
&:last-child {
|
|
margin-bottom: $spacing-unit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section__header {
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
color: $color-white;
|
|
margin-bottom: $spacing-unit / 4;
|
|
}
|
|
|
|
.section__links {
|
|
margin-left: $spacing-unit / 2;
|
|
font-weight: normal;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.section__link {
|
|
display: inline-block;
|
|
margin-top: $spacing-unit/4;
|
|
opacity: 0.75;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.section__link--is-active {
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
}
|