mirror of
https://github.com/Shopify/liquid.git
synced 2026-09-20 19:30:47 -07:00
Sidebar work: added collapsing categories
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
This commit is contained in:
Tetsuro
+9
-165
@@ -1,172 +1,16 @@
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// Our variables
|
||||
$base-font-family: 'Droid Sans', sans-serif;
|
||||
$base-font-size: 16px;
|
||||
$small-font-size: $base-font-size * 0.875;
|
||||
$base-line-height: 1.5;
|
||||
$spacing-unit: 40px;
|
||||
@import "partials/defaults";
|
||||
@import "partials/colors";
|
||||
@import "partials/helpers";
|
||||
|
||||
// Liquid Docs Blues. 1 --> 5, lightest --> darkest.
|
||||
@import "modules/base";
|
||||
@import "modules/layout";
|
||||
@import "modules/buttons";
|
||||
@import "modules/home-banner";
|
||||
@import "modules/page-content";
|
||||
|
||||
$color-blue-1: #E8F8FF;
|
||||
$color-blue-2: #B4DCED;
|
||||
$color-blue-3: #91C9E8;
|
||||
$color-blue-4: #67B8DE;
|
||||
$color-blue-5: #3399CC;
|
||||
$color-white: #ffffff;
|
||||
$color-slate: #5E5E5E;
|
||||
|
||||
/*
|
||||
$grey-color: #828282;
|
||||
$grey-color-light: lighten($grey-color, 40%);
|
||||
$grey-color-dark: darken($grey-color, 25%);
|
||||
*/
|
||||
|
||||
// Width of the cont s sent area
|
||||
$sidebar-width: 250px;
|
||||
$content-width: 900px;
|
||||
$on-palm: 600px;
|
||||
$on-laptop: 900px;
|
||||
|
||||
// Using media queries with like this:
|
||||
// @include media-query($on-palm) {
|
||||
// .wrapper {
|
||||
// padding-right: $spacing-unit / 2;
|
||||
// padding-left: $spacing-unit / 2;
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin media-query($device) {
|
||||
@media screen and (max-width: $device) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Import partials from `sass_dir` (defaults to `_sass`)
|
||||
@import
|
||||
"modules/base",
|
||||
"vendors/syntax-highlighting"
|
||||
;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** Clearfix */
|
||||
%clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: $content-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-unit;
|
||||
padding-left: $spacing-unit;
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
/*============================================================================
|
||||
Sidebar
|
||||
==============================================================================*/
|
||||
|
||||
.sidebar {
|
||||
background: $color-blue-5;
|
||||
//flex: 0 0 250px;
|
||||
width: $sidebar-width;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.sidebar--logo {
|
||||
font-size: $base-font-size * 2;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: $spacing-unit;
|
||||
border-bottom: 1px solid $color-blue-4;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar--nav {
|
||||
padding: $spacing-unit/2 $spacing-unit;
|
||||
font-weight: bold;
|
||||
|
||||
//First Level Links
|
||||
> ul {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
margin-bottom: $spacing-unit / 2;
|
||||
}
|
||||
|
||||
// Second Level Links
|
||||
ul {
|
||||
margin-left: $spacing-unit/2;
|
||||
font-weight: normal;
|
||||
font-size: 0.9em;
|
||||
|
||||
li {
|
||||
margin-top: $spacing-unit/4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Styles for both First and SecondLevel Links
|
||||
li {
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@import "vendors/syntax-highlighting";
|
||||
|
||||
|
||||
/*============================================================================
|
||||
Content & Markdown Styles
|
||||
==============================================================================*/
|
||||
|
||||
.content {
|
||||
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
background: $color-blue-5;
|
||||
padding: $spacing-unit/4 $spacing-unit/2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn:visited {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*============================================================================
|
||||
Index
|
||||
==============================================================================*/
|
||||
|
||||
.home--banner {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset some basic elements
|
||||
*/
|
||||
@@ -169,4 +173,4 @@ table {
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
.btn {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
background: $color-blue-5;
|
||||
padding: $spacing-unit/4 $spacing-unit/2;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: $color-blue-4;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:visited {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn:not(:first-child) {
|
||||
margin-left: $spacing-unit / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin-right: $spacing-unit / 4;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.home--banner {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
|
||||
$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;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
td {
|
||||
code {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// I got the blues, man.
|
||||
// 1 --> 5, lightest --> darkest.
|
||||
|
||||
$color-blue-1: #E8F8FF;
|
||||
$color-blue-2: #B4DCED;
|
||||
$color-blue-3: #91C9E8;
|
||||
$color-blue-4: #67B8DE;
|
||||
$color-blue-5: #3399CC;
|
||||
$color-white: #ffffff;
|
||||
$color-slate: #5E5E5E;
|
||||
@@ -0,0 +1,6 @@
|
||||
$base-font-family: 'Droid Sans', sans-serif;
|
||||
$base-font-size: 16px;
|
||||
$small-font-size: $base-font-size * 0.875;
|
||||
$base-line-height: 1.5;
|
||||
$spacing-unit: 40px;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
%clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user