Initial new_styles styleguide
fixes CNVS-14529 What it does: - Adds feature flags for new styleguide styles - Strips out un-needed variable highcontrast (these will need to be set per element, not on the main color variables) - Changes gemfile to point to temporary dress_code repo: we need this so the dress_code generator strips out the parent tag Test plan: - get new gem: bundle install - get new styles: npm run compile-sass - regenerate styleguide: rake css:styleguide - Make sure new_styles is disabled. You can do this in rails console: Account.find(1).disable_feature!(:new_styles) - Go to /styleguide and it should look the same as it does now - Now turn on the feature flag. In rails console: Account.find(1).enable_feature!(:new_styles) - Refresh /styleguide and you should see are base starter styles for the new look and feel! Note: The new styleguide components are a wip and this request just adds in the layout and styles specifically for the /styleguide page to use while we work through all the components. You will notice some funky looking ui - that's normal. We will be attacking these components piece by piece. Change-Id: I952b36346df77f98ddb7bbc5e27ab9b45ab4d8ca Reviewed-on: https://gerrit.instructure.com/39600 Reviewed-by: Chris Hart <chart@instructure.com> Reviewed-by: Derek DeVries <ddevries@instructure.com> Product-Review: Colleen Palmer <colleen@instructure.com> Tested-by: Jenkins <jenkins@instructure.com> QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
This commit is contained in:
Colleen Palmer
parent
51c3a893e7
commit
837e130778
|
|
@ -1,5 +1,5 @@
|
|||
group :assets do
|
||||
gem 'dress_code', '1.0.2'
|
||||
gem 'dress_code', '1.0.2', :git => "git://github.com/colleenpalmer/dress_code.git"
|
||||
gem 'colored', '1.2'
|
||||
gem 'mustache', '0.99.5'
|
||||
gem 'pygments.rb', '0.5.4'
|
||||
|
|
|
|||
|
|
@ -30,27 +30,22 @@
|
|||
// color should use or be based off of one of these variables
|
||||
|
||||
$canvas-primary: #05a6ee; // light blue
|
||||
@if $use_high_contrast { $canvas-primary: #0576A3 }
|
||||
|
||||
$canvas-secondary: #05a6ee; // dark blue
|
||||
@if $use_high_contrast { $canvas-secondary: #5F707B }
|
||||
$canvas-secondary: #384a58; // dark blue
|
||||
|
||||
$canvas-success: #05a6ee; // green
|
||||
@if $use_high_contrast { $canvas-success: #14881E }
|
||||
$canvas-success: #1aB92a; // green
|
||||
|
||||
$canvas-neutral: #F7F7F7; // gray
|
||||
$canvas-neutral: #f7f7f7; // gray
|
||||
|
||||
$canvas-action: #ba3fa5; // magenta
|
||||
|
||||
$canvas-danger: #ad393a; // red
|
||||
|
||||
$canvas-alert: #d89919; // gold
|
||||
@if $use_high_contrast { $canvas-alert: #926711 }
|
||||
|
||||
$canvas-light: #ffffff; // white
|
||||
|
||||
$canvas-dark: #7D8F9A; // gray/blue
|
||||
@if $use_high_contrast { $canvas-alert: #5F707B }
|
||||
$canvas-dark: #7d8f9a; // gray/blue
|
||||
|
||||
// Bootstrap Color Variable Overwrites
|
||||
//=======================
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
/*
|
||||
@styleguide Autocomplete
|
||||
|
||||
A generic, accessible autocomplete widget.
|
||||
|
||||
```html
|
||||
<div class="ac">
|
||||
<div class="ac-input-box">
|
||||
|
|
@ -32,6 +30,12 @@ A generic, accessible autocomplete widget.
|
|||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="styleguide-section__component-notes">
|
||||
<h4 class="codeBlock__note-title">Notes</h4>
|
||||
<p class="codeBlock__note-description">A generic, accessible autocomplete widget.</p>
|
||||
</div>
|
||||
|
||||
*/
|
||||
|
||||
$border-color: #999;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,122 @@
|
|||
@import "base/environment";
|
||||
@if $use_new_styles {
|
||||
// Styleguide Typography
|
||||
//===============
|
||||
.styleguide-subheader {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#main {
|
||||
// Styleguide Layout
|
||||
//===============
|
||||
// We're using flex to put these elements in the order that we
|
||||
// want them to appear in
|
||||
.styleguide-section__component {
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
.styleguide-section__component-code {
|
||||
@extend %flex;
|
||||
flex-flow: row wrap;
|
||||
/* Then we define how is distributed the remaining space */
|
||||
justify-content: space-around;
|
||||
// Ordering
|
||||
.code-rendered { @extend %flex-order-1;}
|
||||
.highlight { @extend %flex-order-2;}
|
||||
.styleguide-section__component-notes { @extend %flex-order-3;}
|
||||
// Sizing
|
||||
.code-rendered { min-width: 101%;}
|
||||
.highlight { @extend %flex-2;}
|
||||
.styleguide-section__component-notes { @extend %flex-1;}
|
||||
}
|
||||
// end layout
|
||||
|
||||
/// Styleguide element styles
|
||||
//===============
|
||||
/// Note: some of these may become obsolete as we
|
||||
/// continue to put in more styles to our typography
|
||||
.code-rendered {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $canvas-neutral;
|
||||
}
|
||||
.highlight {
|
||||
pre {
|
||||
padding: 10px;
|
||||
background: lighten($canvas-primary, 60%);
|
||||
box-shadow: 0 0 8px lighten($canvas-dark, 10%);
|
||||
border-radius: 0;
|
||||
color: $canvas-dark;
|
||||
}
|
||||
}
|
||||
.styleguide-section__component-notes {
|
||||
padding: 0 0 0 25px;
|
||||
.codeBlock__note-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.codeBlock__note-description {
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
/// Temporary styles for new nav till real styles
|
||||
/// are in there. These only show up on new_styles styleguide
|
||||
.style-guide-nav-container {
|
||||
background: $canvas-secondary;
|
||||
}
|
||||
.style-guide-nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.canvasSidebar--menu__item {
|
||||
&.canvasSidebar--menu__item-title {
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
& {
|
||||
color: white;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
font-weight: 300;
|
||||
min-width: 180px;
|
||||
transition: background 0.5s ease-in-out;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: lighten($canvas-secondary, 5%);
|
||||
transition: background 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.canvasSidebar--menu__item--is-on {
|
||||
a {
|
||||
background: lighten($canvas-secondary, 5%);
|
||||
font-weight: 500;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/// end nav
|
||||
}
|
||||
@else {
|
||||
#main {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
|
|
@ -44,4 +160,4 @@
|
|||
border-left: solid 4px #0088cc;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +1,88 @@
|
|||
@if $use_new_styles {
|
||||
.err { color: $canvas-danger; background-color: #e3d2d2 } /* Error */
|
||||
.k { color: $canvas-dark; font-weight: bold } /* Keyword */
|
||||
.o { color: $canvas-dark; font-weight: bold } /* Operator */
|
||||
.gd { color: $canvas-dark; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.ge { color: $canvas-dark; font-style: italic } /* Generic.Emph */
|
||||
.gi { color: $canvas-dark; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.kc { color: $canvas-dark; font-weight: bold } /* Keyword.Constant */
|
||||
.kd { color: $canvas-dark; font-weight: bold } /* Keyword.Declaration */
|
||||
.kn { color: $canvas-dark; font-weight: bold } /* Keyword.Namespace */
|
||||
.kp { color: $canvas-dark; font-weight: bold } /* Keyword.Pseudo */
|
||||
.kr { color: $canvas-dark; font-weight: bold } /* Keyword.Reserved */
|
||||
.ow { color: $canvas-dark; font-weight: bold } /* Operator.Word */
|
||||
|
||||
.cp { color: darken($canvas-neutral, 20%); font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.cs { color: darken($canvas-neutral, 20%); font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.gh { color: darken($canvas-neutral, 20%) } /* Generic.Heading */
|
||||
.bp { color: darken($canvas-neutral, 20%) } /* Name.Builtin.Pseudo */
|
||||
|
||||
.c { color: $canvas-neutral; font-style: italic } /* Comment */
|
||||
.cm { color: $canvas-neutral; font-style: italic } /* Comment.Multiline */
|
||||
.c1 { color: $canvas-neutral; font-style: italic } /* Comment.Single */
|
||||
|
||||
|
||||
.gr { color: $canvas-danger } /* Generic.Error */
|
||||
.gt { color: $canvas-danger } /* Generic.Traceback */
|
||||
|
||||
.go { color: darken($canvas-neutral, 40%) } /* Generic.Output */
|
||||
|
||||
.gp { color: $canvas-dark } /* Generic.Prompt */
|
||||
|
||||
.gs { font-weight: bold } /* Generic.Strong */
|
||||
|
||||
.gu { color: lighten($canvas-dark, 10%) } /* Generic.Subheading */
|
||||
|
||||
.kt { color: darken($canvas-primary, 10%); font-weight: bold } /* Keyword.Type */
|
||||
.nc { color: darken($canvas-primary, 10%); font-weight: bold } /* Name.Class */
|
||||
|
||||
.m { color: $canvas-primary } /* Literal.Number */
|
||||
.mf { color: $canvas-primary } /* Literal.Number.Float */
|
||||
.mh { color: $canvas-primary } /* Literal.Number.Hex */
|
||||
.mi { color: $canvas-primary } /* Literal.Number.Integer */
|
||||
.mo { color: $canvas-primary } /* Literal.Number.Oct */
|
||||
.il { color: $canvas-primary } /* Literal.Number.Integer.Long */
|
||||
|
||||
.s { color: $canvas-action } /* Literal.String */
|
||||
|
||||
.na { color: darken($canvas-primary, 10%) } /* Name.Attribute */
|
||||
.no { color: darken($canvas-primary, 10%) } /* Name.Constant */
|
||||
.nt { color: darken($canvas-primary, 10%) } /* Name.Tag */
|
||||
.nv { color: darken($canvas-primary, 10%) } /* Name.Variable */
|
||||
.vc { color: darken($canvas-primary, 10%) } /* Name.Variable.Class */
|
||||
.vg { color: darken($canvas-primary, 10%) } /* Name.Variable.Global */
|
||||
.vi { color: darken($canvas-primary, 10%) } /* Name.Variable.Instance */
|
||||
|
||||
.nb { color: $canvas-primary } /* Name.Builtin */
|
||||
|
||||
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
||||
|
||||
.ni { color: darken($canvas-primary, 30%) } /* Name.Entity */
|
||||
|
||||
.ne { color: $canvas-danger; font-weight: bold } /* Name.Exception */
|
||||
.nf { color: $canvas-danger; font-weight: bold } /* Name.Function */
|
||||
.nl { color: $canvas-danger; font-weight: bold } /* Name.Label */
|
||||
|
||||
.nn { color: darken($canvas-neutral, 40%) } /* Name.Namespace */
|
||||
|
||||
.w { color: $canvas-neutral } /* Text.Whitespace */
|
||||
|
||||
.sb { color: $canvas-action} /* Literal.String.Backtick */
|
||||
.sc { color: $canvas-action} /* Literal.String.Char */
|
||||
.sd { color: $canvas-action} /* Literal.String.Doc */
|
||||
.s2 { color: $canvas-action} /* Literal.String.Double */
|
||||
.se { color: $canvas-action} /* Literal.String.Escape */
|
||||
.sh { color: $canvas-action} /* Literal.String.Heredoc */
|
||||
.si { color: $canvas-action} /* Literal.String.Interpol */
|
||||
.sx { color: $canvas-action} /* Literal.String.Other */
|
||||
.s1 { color: $canvas-action} /* Literal.String.Single */
|
||||
|
||||
.sr { color: $canvas-success } /* Literal.String.Regex */
|
||||
|
||||
.ss { color: $canvas-action } /* Literal.String.Symbol */
|
||||
|
||||
}
|
||||
@else {
|
||||
.hll { background-color: #ffffcc }
|
||||
.c { color: #999988; font-style: italic } /* Comment */
|
||||
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
|
|
@ -59,3 +144,4 @@
|
|||
.vg { color: #008080 } /* Name.Variable.Global */
|
||||
.vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
@import "base/environment";
|
||||
@import "vendor/_xflex.scss";
|
||||
@import "pages/styleguide/styleguide.scss";
|
||||
@import "pages/styleguide/syntax.scss";
|
||||
|
|
@ -0,0 +1,510 @@
|
|||
.flex,
|
||||
%flex {
|
||||
/* 2009 */
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
/*display: box;*/
|
||||
|
||||
/* 2011 */
|
||||
display: -moz-flexbox;
|
||||
display: -ms-flexbox;
|
||||
display: -o-flexbox;
|
||||
/*display: flexbox;*/
|
||||
|
||||
/* 2012 */
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inline-flex,
|
||||
%inline-flex {
|
||||
/* 2009 */
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
|
||||
/* 2011 */
|
||||
display: -moz-inline-flexbox;
|
||||
display: -ms-inline-flexbox;
|
||||
display: -o-inline-flexbox;
|
||||
|
||||
/* 2012 */
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.flex-row,
|
||||
%flex-row {
|
||||
/* 2009 */
|
||||
-webkit-box-direction: normal;
|
||||
-ms-box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
|
||||
/* 2011 */
|
||||
-webkit-flex-flow: row;
|
||||
-moz-flex-flow: row;
|
||||
-ms-flex-flow: row;
|
||||
-o-flex-flow: row;
|
||||
|
||||
/* 2012 */
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-row-reverse,
|
||||
%flex-row-reverse {
|
||||
/* 2009 */
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
|
||||
/* 2011 */
|
||||
-webkit-flex-flow: row-reverse;
|
||||
-moz-flex-flow: row-reverse;
|
||||
-ms-flex-flow: row-reverse;
|
||||
-o-flex-flow: row-reverse;
|
||||
|
||||
/* 2012 */
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.flex-column,
|
||||
%flex-column {
|
||||
/* 2009 */
|
||||
-webkit-box-direction: normal;
|
||||
-ms-box-orient: vertical;
|
||||
-webkit-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
|
||||
/* 2011 */
|
||||
-webkit-flex-flow: column;
|
||||
-moz-flex-flow: column;
|
||||
-ms-flex-flow: column;
|
||||
-o-flex-flow: column;
|
||||
|
||||
/* 2012 */
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-column-reverse,
|
||||
%flex-column-reverse {
|
||||
/* 2009 */
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-box-orient: vertical;
|
||||
-webkit-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
|
||||
/* 2011 */
|
||||
-webkit-flex-flow: column-reverse;
|
||||
-moz-flex-flow: column-reverse;
|
||||
-ms-flex-flow: column-reverse;
|
||||
-o-flex-flow: column-reverse;
|
||||
|
||||
/* 2012 */
|
||||
-webkit-flex-direction: column-reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flex-nowrap,
|
||||
%flex-nowrap {
|
||||
/* 2009 */
|
||||
-webkit-box-lines: single;
|
||||
-ms-box-lines: single;
|
||||
box-lines: single;
|
||||
|
||||
/* 2012 */
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap
|
||||
}
|
||||
|
||||
.flex-wrap,
|
||||
%flex-wrap {
|
||||
/* 2009 */
|
||||
-webkit-box-lines: multiple;
|
||||
-ms-box-lines: multiple;
|
||||
box-lines: multiple;
|
||||
|
||||
/* 2011 */
|
||||
-webkit-flex-flow: wrap;
|
||||
-moz-flex-flow: wrap;
|
||||
-ms-flex-flow: wrap;
|
||||
-o-flex-flow: wrap;
|
||||
flex-flow: wrap;
|
||||
/* flex-line-pack */
|
||||
|
||||
/* 2012 */
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-wrap-reverse,
|
||||
%flex-wrap-reverse {
|
||||
/* 2011 */
|
||||
-webkit-flex-flow: wrap-reverse;
|
||||
-moz-flex-flow: wrap-reverse;
|
||||
-ms-flex-flow: wrap-reverse;
|
||||
-o-flex-flow: wrap-reverse;
|
||||
flex-flow: wrap-reverse;
|
||||
|
||||
/* 2012 */
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.flex-initial,
|
||||
%flex-initial {
|
||||
-webkit-flex: initial;
|
||||
-webkit-box-flex: initial;
|
||||
-ms-flex: initial;
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
/* Align self */
|
||||
|
||||
.align-self-start,
|
||||
%align-self-start {
|
||||
-ms-flex-item-align: start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.align-self-end,
|
||||
%align-self-end {
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.align-self-center,
|
||||
%align-self-center {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.align-self-baseline,
|
||||
%align-self-baseline {
|
||||
-webkit-align-self: baseline;
|
||||
-ms-flex-item-align: baseline;
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.align-self-stretch,
|
||||
%align-self-stretch {
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/* Align items */
|
||||
|
||||
.align-items-start,
|
||||
%align-items-start {
|
||||
-webkit-align-items: flex-start;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-items-end,
|
||||
%align-items-end {
|
||||
-webkit-align-items: flex-end;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.align-items-center,
|
||||
%align-items-center {
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-items-baseline,
|
||||
%align-items-baseline {
|
||||
-webkit-box-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.align-items-stretch,
|
||||
%align-items-stretch {
|
||||
-webkit-box-align: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Justify content */
|
||||
|
||||
.justify-content-start,
|
||||
%justify-content-start {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-content-end,
|
||||
%justify-content-end {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-content-center,
|
||||
%justify-content-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-content-space-between,
|
||||
%justify-content-space-between {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-content-space-around,
|
||||
%justify-content-space-around {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
/* Align content */
|
||||
|
||||
.align-content-start,
|
||||
%align-content-start {
|
||||
-webkit-align-content: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-content-end,
|
||||
%align-content-end {
|
||||
-webkit-align-content: flex-end;
|
||||
-ms-flex-line-pack: end;
|
||||
align-content: flex-end;
|
||||
}
|
||||
|
||||
.align-content-center,
|
||||
%align-content-center {
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.align-content-space-between,
|
||||
%align-content-space-between {
|
||||
-webkit-align-content: space-between;
|
||||
-ms-flex-line-pack: justify;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
.align-content-space-between,
|
||||
%align-content-space-between {
|
||||
-webkit-align-content: space-around;
|
||||
-ms-flex-line-pack: distribute;
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.align-content-stretch,
|
||||
%align-content-stretch {
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
/* Flex proportion */
|
||||
|
||||
.flex-1,
|
||||
%flex-1 { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }
|
||||
|
||||
.flex-2,
|
||||
%flex-2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -ms-flex: 2; -webkit-flex: 2; flex: 2; }
|
||||
|
||||
.flex-3,
|
||||
%flex-3 { -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; -ms-flex: 3; -webkit-flex: 3; flex: 3; }
|
||||
|
||||
.flex-4,
|
||||
%flex-4 { -webkit-box-flex: 4; -moz-box-flex: 4; box-flex: 4; -ms-flex: 4; -webkit-flex: 4; flex: 4; }
|
||||
|
||||
.flex-5,
|
||||
%flex-5 { -webkit-box-flex: 5; -moz-box-flex: 5; box-flex: 5; -ms-flex: 5; -webkit-flex: 5; flex: 5; }
|
||||
|
||||
.flex-6,
|
||||
%flex-6 { -webkit-box-flex: 6; -moz-box-flex: 6; box-flex: 6; -ms-flex: 6; -webkit-flex: 6; flex: 6; }
|
||||
|
||||
.flex-7,
|
||||
%flex-7 { -webkit-box-flex: 7; -moz-box-flex: 7; box-flex: 7; -ms-flex: 7; -webkit-flex: 7; flex: 7; }
|
||||
|
||||
.flex-8,
|
||||
%flex-8 { -webkit-box-flex: 8; -moz-box-flex: 8; box-flex: 8; -ms-flex: 8; -webkit-flex: 8; flex: 8; }
|
||||
|
||||
.flex-9,
|
||||
%flex-9 { -webkit-box-flex: 9; -moz-box-flex: 9; box-flex: 9; -ms-flex: 9; -webkit-flex: 9; flex: 9; }
|
||||
|
||||
.flex-10,
|
||||
%flex-10 { -webkit-box-flex: 10; -moz-box-flex: 10; box-flex: 10; -ms-flex: 10; -webkit-flex: 10; flex: 10; }
|
||||
|
||||
.flex-11,
|
||||
%flex-11 { -webkit-box-flex: 11; -moz-box-flex: 11; box-flex: 11; -ms-flex: 11; -webkit-flex: 11; flex: 11; }
|
||||
|
||||
.flex-12,
|
||||
%flex-12 { -webkit-box-flex: 12; -moz-box-flex: 12; box-flex: 12; -ms-flex: 12; -webkit-flex: 12; flex: 12; }
|
||||
|
||||
.flex-order-1,
|
||||
%flex-order-1 {
|
||||
/* 2009 */
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
|
||||
/* 2011 */
|
||||
-webkit-flex-order: 1;
|
||||
-moz-flex-order: 1;
|
||||
-ms-flex-order: 1;
|
||||
-o-flex-order: 1;
|
||||
|
||||
/* 2012 */
|
||||
-webkit-order: 1;
|
||||
order: 1
|
||||
}
|
||||
.flex-order-2,
|
||||
%flex-order-2 {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-webkit-flex-order: 2;
|
||||
-moz-flex-order: 2;
|
||||
-ms-flex-order: 2;
|
||||
-o-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2
|
||||
}
|
||||
.flex-order-3,
|
||||
%flex-order-3 {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-webkit-flex-order: 3;
|
||||
-moz-flex-order: 3;
|
||||
-ms-flex-order: 3;
|
||||
-o-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3
|
||||
}
|
||||
.flex-order-4,
|
||||
%flex-order-4 {
|
||||
-webkit-box-ordinal-group: 4;
|
||||
-moz-box-ordinal-group: 4;
|
||||
-webkit-flex-order: 4;
|
||||
-moz-flex-order: 4;
|
||||
-ms-flex-order: 4;
|
||||
-o-flex-order: 4;
|
||||
-webkit-order: 4;
|
||||
order: 4
|
||||
}
|
||||
.flex-order-5,
|
||||
%flex-order-5 {
|
||||
-webkit-box-ordinal-group: 5;
|
||||
-moz-box-ordinal-group: 5;
|
||||
-webkit-flex-order: 5;
|
||||
-moz-flex-order: 5;
|
||||
-ms-flex-order: 5;
|
||||
-o-flex-order: 5;
|
||||
-webkit-order: 5;
|
||||
order: 5
|
||||
}
|
||||
.flex-order-6,
|
||||
%flex-order-6 {
|
||||
-webkit-box-ordinal-group: 6;
|
||||
-moz-box-ordinal-group: 6;
|
||||
-webkit-flex-order: 6;
|
||||
-moz-flex-order: 6;
|
||||
-ms-flex-order: 6;
|
||||
-o-flex-order: 6;
|
||||
-webkit-order: 6;
|
||||
order: 6
|
||||
}
|
||||
.flex-order-7,
|
||||
%flex-order-7 {
|
||||
-webkit-box-ordinal-group: 7;
|
||||
-moz-box-ordinal-group: 7;
|
||||
-webkit-flex-order: 7;
|
||||
-moz-flex-order: 7;
|
||||
-ms-flex-order: 7;
|
||||
-o-flex-order: 7;
|
||||
-webkit-order: 7;
|
||||
order: 7
|
||||
}
|
||||
.flex-order-8,
|
||||
%flex-order-8 {
|
||||
-webkit-box-ordinal-group: 8;
|
||||
-moz-box-ordinal-group: 8;
|
||||
-webkit-flex-order: 8;
|
||||
-moz-flex-order: 8;
|
||||
-ms-flex-order: 8;
|
||||
-o-flex-order: 8;
|
||||
-webkit-order: 8;
|
||||
order: 8
|
||||
}
|
||||
.flex-order-9,
|
||||
%flex-order-9 {
|
||||
-webkit-box-ordinal-group: 9;
|
||||
-moz-box-ordinal-group: 9;
|
||||
-webkit-flex-order: 9;
|
||||
-moz-flex-order: 9;
|
||||
-ms-flex-order: 9;
|
||||
-o-flex-order: 9;
|
||||
-webkit-order: 9;
|
||||
order: 9
|
||||
}
|
||||
.flex-order-10,
|
||||
%flex-order-10 {
|
||||
-webkit-box-ordinal-group: 10;
|
||||
-moz-box-ordinal-group: 10;
|
||||
-webkit-flex-order: 10;
|
||||
-moz-flex-order: 10;
|
||||
-ms-flex-order: 10;
|
||||
-o-flex-order: 10;
|
||||
-webkit-order: 10;
|
||||
order: 10
|
||||
}
|
||||
.flex-order-11,
|
||||
%flex-order-11 {
|
||||
-webkit-box-ordinal-group: 11;
|
||||
-moz-box-ordinal-group: 11;
|
||||
-webkit-flex-order: 11;
|
||||
-moz-flex-order: 11;
|
||||
-ms-flex-order: 11;
|
||||
-o-flex-order: 11;
|
||||
-webkit-order: 11;
|
||||
order: 11
|
||||
}
|
||||
.flex-order-12,
|
||||
%flex-order-12 {
|
||||
-webkit-box-ordinal-group: 12;
|
||||
-moz-box-ordinal-group: 12;
|
||||
-webkit-flex-order: 12;
|
||||
-moz-flex-order: 12;
|
||||
-ms-flex-order: 12;
|
||||
-o-flex-order: 12;
|
||||
-webkit-order: 12;
|
||||
order: 12
|
||||
}
|
||||
|
|
@ -5,8 +5,6 @@
|
|||
/*
|
||||
@styleguide Accordion
|
||||
|
||||
We use the jQuery UI accordion instead of Bootstraps', however, instead of using the class `ui-accordion` just use `accordion`
|
||||
|
||||
```html
|
||||
<div class="accordion">
|
||||
<h3><a href="#">Section 1</a></h3>
|
||||
|
|
@ -23,6 +21,10 @@ We use the jQuery UI accordion instead of Bootstraps', however, instead of using
|
|||
</div>
|
||||
</div>
|
||||
```
|
||||
<div class="styleguide-section__component-notes">
|
||||
<h4 class="codeBlock__note-title">Notes</h4>
|
||||
<p class="codeBlock__note-description">We use the jQuery UI accordion instead of Bootstraps', however, instead of using the class `ui-accordion` just use `accordion`</p>
|
||||
</div>
|
||||
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,23 +2,60 @@
|
|||
<% jammit_css :styleguide %>
|
||||
<% js_bundle :styleguide %>
|
||||
|
||||
<% content_for :left_side_custom do %>
|
||||
<ul id="nav">
|
||||
<% if use_new_styles? %>
|
||||
|
||||
{{!-- New styleguide layout --}}
|
||||
|
||||
<% content_for :left_side_custom do %>
|
||||
<div class="style-guide-nav-container">
|
||||
<ul id="style-guide-nav" class="style-guide-nav">
|
||||
{{#docs}}
|
||||
<li class="canvasSidebar--menu__item">
|
||||
<a class="" href="#{{id}}">{{component}}</a>
|
||||
</li>
|
||||
{{/docs}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
<div id="docs" class="styleguide-docs">
|
||||
<h1>Canvas Styleguide and Patterns</h1>
|
||||
<section class="styleguide-section__component">
|
||||
{{#docs}}
|
||||
<article id="{{id}}" class="styleguide-section__component-doc">
|
||||
<header>
|
||||
<h2 class="styleguide-subheader">{{component}}</h2>
|
||||
<p><small>Defined in <em>{{file}}</em></small></p>
|
||||
</header>
|
||||
<div class="styleguide-section__component-code">
|
||||
{{{prose}}}
|
||||
</div>
|
||||
</article>
|
||||
{{/docs}}
|
||||
</section>
|
||||
</div>
|
||||
<script>{{{dress_code_js}}}</script>
|
||||
|
||||
|
||||
<% else %>
|
||||
|
||||
{{!-- Legacy styleguide layout --}}
|
||||
<% content_for :left_side_custom do %>
|
||||
<ul id="style-guide-nav" class="style-guide-nav">
|
||||
{{#docs}}
|
||||
<li><a href="#{{id}}">{{component}}</a></li>
|
||||
{{/docs}}
|
||||
</ul>
|
||||
<% end %>
|
||||
<section id="docs" class="styleguide-section__component">
|
||||
{{#docs}}
|
||||
<li><a href="#{{id}}">{{component}}</a></li>
|
||||
<article id="{{id}}">
|
||||
<h2 class="subTitle--block">{{component}}</h2>
|
||||
<p><small>Defined in <em>{{file}}</em></small></p>
|
||||
{{{prose}}}
|
||||
</article>
|
||||
{{/docs}}
|
||||
</ul>
|
||||
</section>
|
||||
<script>{{{dress_code_js}}}</script>
|
||||
|
||||
<% end %>
|
||||
|
||||
<section id="docs">
|
||||
{{#docs}}
|
||||
<article id="{{id}}">
|
||||
<h2>{{component}}</h2>
|
||||
<p><small>Defined in <em>{{file}}</em></small></p>
|
||||
{{{prose}}}
|
||||
</article>
|
||||
{{/docs}}
|
||||
</section>
|
||||
|
||||
<script>{{{dress_code_js}}}</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue