Big Styleguide UX Upgrade
ref CNVS-16922 This adds a whole new look and feel to our Styleguide! QA Test Plan: - Go to /styleguide - See all the new look and feel! - I should look similar to this: http://invis.io/CT1QH2OHX (small changes have been made from static to digital guide, ux is aware of those changes) - Make sure all navigation items in subnav go their proper places - See notes Notes: - This only affects /styleguide and does not touch any canvas styles. - This is purely aesthetic - no functionality had changed - Right now all the sections are being loaded onto one page; we know this and plan on making improvements to hide/show per top nav item in future iterations - There is a 1px border when you shift between sections on Firefox, ux is ok with this. - We are aware that sometimes the automatic scrolling seems "fast" but will change that in a future iteration Change-Id: I0ef10c78d3fccc83bb1923970d6fc884298b6775 Reviewed-on: https://gerrit.instructure.com/47716 Reviewed-by: Chris Hart <chart@instructure.com> Product-Review: Chris Hart <chart@instructure.com> Tested-by: Jenkins QA-Review: Derek Hansen <dhansen@instructure.com>
This commit is contained in:
Colleen Palmer
parent
7424223755
commit
bee628cf22
|
|
@ -149,3 +149,33 @@ require [
|
|||
$("#repeat").buttonset()
|
||||
|
||||
$(".styleguide-datetime_field-example").datetime_field()
|
||||
|
||||
# Smooth anchor scrolling
|
||||
|
||||
$(".Sg-header__Subnavigation a[href*=#]:not([href=#])").click ->
|
||||
if location.pathname.replace(/^\//, "") is @pathname.replace(/^\//, "") and location.hostname is @hostname
|
||||
target = $(@hash)
|
||||
headerHeight = $(".Sg-header").height()
|
||||
target = (if target.length then target else $("[name=" + @hash.slice(1) + "]"))
|
||||
if target.length
|
||||
$("html,body").animate
|
||||
scrollTop: target.offset().top - headerHeight
|
||||
, 3000
|
||||
false
|
||||
|
||||
#Global Navigation Hide/Show Subnav
|
||||
selectCategory = (event) ->
|
||||
event.preventDefault()
|
||||
SgNavType = $(this).data('sg-category')
|
||||
$(".Sg-header__Subnavigation section").addClass("isHidden")
|
||||
$(".Sg-header__Subnavigation section." + SgNavType).removeClass("isHidden")
|
||||
$(".Sg-header__Navigation a").removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
$('.Sg-header__Navigation a').on('click', selectCategory);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ class InfoController < ApplicationController
|
|||
|
||||
def styleguide
|
||||
js_bundle :styleguide
|
||||
render :layout => "layouts/styleguide"
|
||||
end
|
||||
|
||||
def message_redirect
|
||||
|
|
|
|||
|
|
@ -205,26 +205,7 @@ blockquote p {
|
|||
/*
|
||||
@styleguide Popovers
|
||||
|
||||
Don't do this, we need a more accessible way to handle these cases.
|
||||
The screenreaders will read all the html entities and that's just rude.
|
||||
|
||||
```html
|
||||
<a
|
||||
data-tooltip='{"tooltipClass":"popover right", "position":"right"}'
|
||||
title="<div class='popover-title'>Title of Popover</div><div class='popover-content'><p>Lo-fi next level kale chips narwhal tattooed, tonx YOLO mixtape.</p></div>">
|
||||
Text with popover
|
||||
</a>
|
||||
<p>
|
||||
<button
|
||||
data-tooltip='{"tooltipClass":"popover top", "position":"top"}'
|
||||
title="<div class='popover-title'>Title of Popover</div><div class='popover-content'><p>Lo-fi next level kale chips narwhal tattooed, tonx YOLO mixtape.</p></div>"
|
||||
class="btn">
|
||||
button with popover
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
### Accessible body-only popovers
|
||||
## Accessible *body-only* popovers
|
||||
|
||||
Here's an accessible way to do it for popovers without a header.
|
||||
`.popover-padded` takes care of what `.popover-content` did above.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
/*
|
||||
@styleguide Accordion
|
||||
|
||||
For accessibility reasons, we use the jQuery UI accordion. To create an accordion widget, use the markup below and initialize it with the following coffeescript:
|
||||
## Default Accordion
|
||||
|
||||
```javascript
|
||||
$("div#styleguide_demo_accordion1").accordion header: "h3"
|
||||
```
|
||||
### Default accordion
|
||||
For accessibility reasons, we use the jQuery UI accordion.
|
||||
|
||||
```html
|
||||
<div class="accordion" id="styleguide_demo_accordion1">
|
||||
|
|
@ -31,14 +28,21 @@ $("div#styleguide_demo_accordion1").accordion header: "h3"
|
|||
Content for Section 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<br/>
|
||||
```
|
||||
|
||||
|
||||
### Mini accordion
|
||||
```js
|
||||
$("div#styleguide_demo_accordion1").accordion({header: "h3"})
|
||||
```
|
||||
|
||||
Default accordion a little big for your UI needs? Simply add the **.ui-accordion--mini** class to the parent **.accordion** element, and you'll get a scaled-down version.
|
||||
## Mini accordion
|
||||
|
||||
Default accordion a little big for your UI needs?
|
||||
|
||||
Simply add the **.ui-accordion--mini** class to the parent **.accordion** element, and you'll get a scaled-down version.
|
||||
|
||||
```html
|
||||
<div class="accordion ui-accordion--mini" id="styleguide_demo_accordion2">
|
||||
|
|
@ -65,6 +69,7 @@ Default accordion a little big for your UI needs? Simply add the **.ui-accordion
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<br/>
|
||||
```
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
/*
|
||||
@styleguide Cogs (Admin Dropdowns)
|
||||
|
||||
<br/>
|
||||
|
||||
Admin "cog" dropdowns should only be used if there is **more than one action** you want the user to choose from. If there's only one action, please use a regular button.
|
||||
|
||||
### Toolbar Cog (button + cog)
|
||||
<br/>
|
||||
|
||||
## Toolbar Cog (button + cog)
|
||||
|
||||
Admin dropdowns come in two flavors: If the dropdown is to be used in a header/toolbar, please follow the example below:
|
||||
|
||||
|
|
@ -12,7 +16,7 @@ Admin dropdowns come in two flavors: If the dropdown is to be used in a header/t
|
|||
<div style="text-align: center;">
|
||||
|
||||
<!-- Begin dropdown markup -->
|
||||
<div class="al-dropdown__container">
|
||||
<div class="al-dropdown__container" style="position: relative;">
|
||||
<a class="al-trigger btn" role="button" href="#">
|
||||
<i class="icon-settings"></i>
|
||||
<i class="icon-mini-arrow-down"></i>
|
||||
|
|
@ -35,7 +39,8 @@ Admin dropdowns come in two flavors: If the dropdown is to be used in a header/t
|
|||
</div>
|
||||
```
|
||||
|
||||
### Content cog
|
||||
## Content cog
|
||||
|
||||
For admin dropdowns that appear in main content areas, such as item groups, please use the example below:
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -1,20 +1,3 @@
|
|||
// You should no longer use .align-right and instead use .text-right
|
||||
// because Bootstrap 2.3 includes these styles by default
|
||||
|
||||
/*
|
||||
@styleguide Type: Alignment
|
||||
|
||||
Use `.text-right` instead of `.align-right`
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p class="text-right">align this text right</p>
|
||||
<p class="text-left">align this text left</p>
|
||||
<p class="text-center">align this text center</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
.align-right, .text-right {
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
/*
|
||||
@styleguide Autocomplete
|
||||
|
||||
<br/>
|
||||
|
||||
A generic, accessible autocomplete widget.
|
||||
|
||||
<br/>
|
||||
|
||||
```html
|
||||
<div class="ac">
|
||||
<div class="ac-input-box">
|
||||
|
|
@ -31,11 +37,6 @@
|
|||
</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,9 +1,15 @@
|
|||
/*
|
||||
@styleguide Border Classes
|
||||
|
||||
the `.border` class defines the border style and color with no width. Additional variations of this define the side(s) and radius(s) of the element. Examples are combined with `.content-box` and `.pad-box-mini`.
|
||||
<br/>
|
||||
|
||||
### Full Border
|
||||
The `.border` class defines the border style and color with no width.
|
||||
|
||||
Additional variations of this define the side(s) and radius(s) of the element. Examples are combined with `.content-box` and `.pad-box-mini`.
|
||||
|
||||
<br/>
|
||||
|
||||
## Full Border
|
||||
|
||||
```html
|
||||
|
||||
|
|
@ -12,7 +18,7 @@ the `.border` class defines the border style and color with no width. Additional
|
|||
</div>
|
||||
```
|
||||
|
||||
### Partial Borders
|
||||
## Partial Borders
|
||||
|
||||
```html
|
||||
<div class="content-box pad-box-mini border border-rbl">
|
||||
|
|
@ -40,7 +46,7 @@ the `.border` class defines the border style and color with no width. Additional
|
|||
</div>
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
## Border Radius
|
||||
|
||||
Combines with `.border` and `.border-trbl`
|
||||
|
||||
|
|
|
|||
|
|
@ -11,87 +11,116 @@
|
|||
/*
|
||||
@styleguide Buttons
|
||||
|
||||
### Button Styles
|
||||
## The Basic Button
|
||||
|
||||
```html
|
||||
<p>
|
||||
<button class="Button" type="button">.Button</button>
|
||||
|
||||
<button class="Button" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="Button Button--primary" type="button">.Button.Button--primary</button>
|
||||
|
||||
<button class="Button Button--primary" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--primary Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="Button Button--secondary" type="button">.Button.Button--secondary</button>
|
||||
|
||||
<button class="Button Button--secondary" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--secondary Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="Button Button--success" type="button">.Button.Button--success</button>
|
||||
|
||||
<button class="Button Button--success" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--success Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="Button Button--warning" type="button">.Button.Button--danger</button>
|
||||
|
||||
<button class="Button Button--warning" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--warning Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="Button Button--danger" type="button">.Button.Button--danger</button>
|
||||
|
||||
<button class="Button Button--danger" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--danger Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="Button Button--link" type="button">.Button.Button--link</button>
|
||||
|
||||
<button class="Button Button--link" type="button" disabled>&[disabled]</button>
|
||||
|
||||
<button class="Button Button--link Button--active" type="button" style="pointer-events: none">&.Button--active</button>
|
||||
</p>
|
||||
<button class="Button" type="button">My Awesome Button</button>
|
||||
```
|
||||
## Button Styles
|
||||
|
||||
### Button Sizes
|
||||
By adding on a modifier class, you can get the style of the button you need.
|
||||
|
||||
Add an additional class `.btn-large`, `.btn-small`, `.btn-mini` to change button sizes
|
||||
<table class="ic-Table">
|
||||
<thead>
|
||||
<th>Class</th>
|
||||
<th>Normal State</th>
|
||||
<th>Active State</th>
|
||||
<th>Disabled State</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>default</td>
|
||||
<td><button class="Button" type="button">.Button</button></td>
|
||||
<td><button class="Button Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button--primary</td>
|
||||
<td><button class="Button Button--primary" type="button">.Button--primary</button></td>
|
||||
<td><button class="Button Button--primary Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button Button--primary" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button--secondary</td>
|
||||
<td><button class="Button Button--secondary" type="button">.Button--secondary</button></td>
|
||||
<td><button class="Button Button--secondary Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button Button--secondary" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button--success</td>
|
||||
<td><button class="Button Button--success" type="button">.Button--success</button></td>
|
||||
<td><button class="Button Button--success Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button Button--success" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button--warning</td>
|
||||
<td><button class="Button Button--warning" type="button">.Button--warning</button></td>
|
||||
<td><button class="Button Button--warning Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button Button--warning" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button--danger</td>
|
||||
<td><button class="Button Button--danger" type="button">.Button--danger</button></td>
|
||||
<td><button class="Button Button--danger Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button Button--danger" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button--link</td>
|
||||
<td><button class="Button Button--link" type="button">.Button--link</button></td>
|
||||
<td><button class="Button Button--link Button--active" type="button" style="pointer-events: none">&.Button--active</button></td>
|
||||
<td><button class="Button Button--link" type="button" disabled>&[disabled]</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
```html
|
||||
<p>
|
||||
<button class="btn btn-large" type="button">Large button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn" type="button">Default button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn btn-small" type="button">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn btn-mini" type="button">Mini button</button>
|
||||
</p>
|
||||
<button class="Button Button--primary" type="button">Hey, I have a blue button!</button>
|
||||
```
|
||||
|
||||
### Artificial buttons
|
||||
## Button Sizes
|
||||
|
||||
If you need to change a button's size, you can do so by adding the appropriate class
|
||||
|
||||
<table class="ic-Table">
|
||||
<thead>
|
||||
<th>Class</th>
|
||||
<th>Size</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>default</td>
|
||||
<td><button class="Button" type="button">.Button</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button.Button--large</td>
|
||||
<td><button class="Button Button--large" type="button">.Button-large</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button.Button--small</td>
|
||||
<td><button class="Button Button--small" type="button">.Button-small</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.Button.Button--mini</td>
|
||||
<td><button class="Button Button--mini" type="button">.Button-mini</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
```html
|
||||
<button class="Button Button--large" type="button">This is a massive button!</button>
|
||||
```
|
||||
|
||||
|
||||
## Artificial button
|
||||
|
||||
To create something that acts like a button when you can't use a button element,
|
||||
listen to the "click" and "keyclick" events and add tabindex="0" and role="button".
|
||||
|
||||
listen to the "click" and "keyclick" events and add `tabindex="0"` and `role="button"`
|
||||
|
||||
```html
|
||||
<div class="btn" tabindex="0" role="button">Activate me</div>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
.btn, // <-- deprecated- do not use
|
||||
|
|
|
|||
|
|
@ -1,90 +0,0 @@
|
|||
/*
|
||||
@styleguide Canvas Colors - New
|
||||
|
||||
<h3 class="Colorguide-title"> Base Canvas Color Palette </h3>
|
||||
<div class="Colorguide-container Colorguide-container--primary-theme">
|
||||
<div class="Colorguide-color Colorguide-color--primary">
|
||||
<span class="Colorguide-var">$canvas-primary</span>
|
||||
<span class="Colorguide-hex">#0099e0</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--secondary">
|
||||
<span class="Colorguide-var">$canvas-secondary</span>
|
||||
<span class="Colorguide-hex">#5b6c79</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--success">
|
||||
<span class="Colorguide-var ">$canvas-success</span>
|
||||
<span class="Colorguide-hex">#00ad18</span>
|
||||
</div>
|
||||
|
||||
<div class="Colorguide-color Colorguide-color--neutral">
|
||||
<span class="Colorguide-var">$canvas-neutral</span>
|
||||
<span class="Colorguide-hex">#f4f6f7</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--action">
|
||||
<span class="Colorguide-var">$canvas-action</span>
|
||||
<span class="Colorguide-hex">#ba3fa5</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--danger">
|
||||
<span class="Colorguide-var">$canvas-danger</span>
|
||||
<span class="Colorguide-hex">#ad393a</span>
|
||||
</div>
|
||||
|
||||
<div class="Colorguide-color Colorguide-color--alert">
|
||||
<span class="Colorguide-var">$canvas-alert</span>
|
||||
<span class="Colorguide-hex">#c38406</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--light">
|
||||
<span class="Colorguide-var">$canvas-light</span>
|
||||
<span class="Colorguide-hex">#ffffff</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--dark">
|
||||
<span class="Colorguide-var">$canvas-dark</span>
|
||||
<span class="Colorguide-hex">#5d6d78</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="Colorguide-title"> High Contrast Color Palette </h3>
|
||||
<div class="Colorguide-container Colorguide-container--hc-theme">
|
||||
<div class="Colorguide-color Colorguide-color--primary">
|
||||
<span class="Colorguide-hex">#0078c4</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--secondary">
|
||||
<span class="Colorguide-hex">#58646d</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--success">
|
||||
<span class="Colorguide-hex">#008a14</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--neutral">
|
||||
<span class="Colorguide-hex">#ffffff</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--action">
|
||||
<span class="Colorguide-hex">#a23891</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--danger">
|
||||
<span class="Colorguide-hex">#a03536</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--alert">
|
||||
<span class="Colorguide-hex">#9e6b05</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--light">
|
||||
<span class="Colorguide-hex">#ffffff</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--dark">
|
||||
<span class="Colorguide-hex">#405360</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
$my-functional-variable-name--color: $canvas-primary;
|
||||
|
||||
.canvasblock__subtitle {
|
||||
color: $my-functional-variable-name--color;
|
||||
}
|
||||
|
||||
<div class="styleguide-section__component-notes">
|
||||
<h4 class="codeBlock__note-title">Notes</h4>
|
||||
<p class="codeBlock__note-description">Use color variables when adding colors to your elements.</p>
|
||||
<p class="codeBlock__note-description">Do not use hex codes in .scss or .sass files.</p>
|
||||
<p class="codeBlock__note-description">If that color needs to be tweaked, use the scss functions for <pre><code>lighten($my-color, 10%)</code></pre> and <pre><code>darken($my-color, 10%)</code></pre></p>
|
||||
<p class="codeBlock__note-description">High Contrast colors are automatically pulled in based on the canvas color variables.</p>
|
||||
</div>
|
||||
|
||||
*/
|
||||
|
|
@ -1,18 +1,158 @@
|
|||
/*
|
||||
@styleguide Canvas Colors
|
||||
@styleguide Colors
|
||||
|
||||
## How to use our color variables...
|
||||
|
||||
### **...when implementing new ui**
|
||||
## 3:1 Default Colors
|
||||
|
||||
<div class="grid-row Colorguide-container--primary-theme">
|
||||
<div class="Colorguide-color Colorguide-color--primary">
|
||||
<span class="Colorguide-var">
|
||||
Primary Blue
|
||||
<br/>
|
||||
$canvas-primary
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--secondary">
|
||||
<span class="Colorguide-var">
|
||||
Secondary Grey
|
||||
<br/>
|
||||
$canvas-secondary
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--success">
|
||||
<span class="Colorguide-var ">
|
||||
Success Green
|
||||
<br/>
|
||||
$canvas-success
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--neutral">
|
||||
<span class="Colorguide-var">
|
||||
Neutral Grey
|
||||
<br/>
|
||||
$canvas-neutral
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--action">
|
||||
<span class="Colorguide-var">
|
||||
Action Magenta
|
||||
<br/>
|
||||
$canvas-action
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--danger">
|
||||
<span class="Colorguide-var">
|
||||
Danger Red
|
||||
<br/>
|
||||
$canvas-danger
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--alert">
|
||||
<span class="Colorguide-var">
|
||||
Alert Gold
|
||||
<br/>
|
||||
$canvas-alert
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--light">
|
||||
<span class="Colorguide-var">
|
||||
Light White
|
||||
<br/>
|
||||
$canvas-light
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--dark">
|
||||
<span class="Colorguide-var">
|
||||
Dark Grey
|
||||
<br/>
|
||||
$canvas-dark
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
## 4.5:1 High Contrast Colors
|
||||
|
||||
**Note**: We are forcing high-contrast mode here to show color changes
|
||||
<br/>
|
||||
<div class="grid-row Colorguide-container--hc-theme">
|
||||
<div class="Colorguide-color Colorguide-color--primary">
|
||||
<span class="Colorguide-var">
|
||||
Primary Blue
|
||||
<br/>
|
||||
$canvas-primary
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--secondary">
|
||||
<span class="Colorguide-var">
|
||||
Secondary Grey
|
||||
<br/>
|
||||
$canvas-secondary
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--success">
|
||||
<span class="Colorguide-var ">
|
||||
Success Green
|
||||
<br/>
|
||||
$canvas-success
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--neutral">
|
||||
<span class="Colorguide-var">
|
||||
Neutral Grey
|
||||
<br/>
|
||||
$canvas-neutral
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--action">
|
||||
<span class="Colorguide-var">
|
||||
Action Magenta
|
||||
<br/>
|
||||
$canvas-action
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--danger">
|
||||
<span class="Colorguide-var">
|
||||
Danger Red
|
||||
<br/>
|
||||
$canvas-danger
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--alert">
|
||||
<span class="Colorguide-var">
|
||||
Alert Gold
|
||||
<br/>
|
||||
$canvas-alert
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--light">
|
||||
<span class="Colorguide-var">
|
||||
Light White
|
||||
<br/>
|
||||
$canvas-light
|
||||
</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--dark">
|
||||
<span class="Colorguide-var">
|
||||
Dark Grey
|
||||
<br/>
|
||||
$canvas-dark
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Using color variables implementing new UI
|
||||
|
||||
While integrating new UI, it's best to use what we call a *functional variable* to pull in our main canvas variables.
|
||||
|
||||
For example, if our code looks like this:
|
||||
|
||||
### For example, if our code looks like this:
|
||||
|
||||
|
||||
<p class="i-need-a-specific-color">Hello, Pando!</p>
|
||||
|
||||
|
||||
Then we would write our scss it like:
|
||||
### Then we would write our scss it like:
|
||||
|
||||
|
||||
$myCustomColor: $canvas-primary;
|
||||
|
|
@ -21,17 +161,19 @@ Then we would write our scss it like:
|
|||
}
|
||||
|
||||
|
||||
### **...when changing old code**
|
||||
## Using color variables when updating old code
|
||||
|
||||
When you're in Canvas and changing old code and see a color that doesn't have a variable attached, be sure to change it and give it a functional variable or one of our primary canvas colors
|
||||
|
||||
The Bad Way
|
||||
|
||||
### The Bad Way
|
||||
|
||||
.class-name {
|
||||
color: #123456;
|
||||
}
|
||||
|
||||
The Best Way
|
||||
|
||||
### The Best Way
|
||||
|
||||
$my-functional-variable: $canvas-primary;
|
||||
|
||||
|
|
@ -40,11 +182,12 @@ The Best Way
|
|||
}
|
||||
|
||||
|
||||
### **...with accessibility in mind**
|
||||
## Using color variables with accessibility in mind
|
||||
|
||||
We have specific flags that denote when a user has on High-Contrast mode. Most of our color variables have a high-contrast equivalent already built into Canvas, however, for the occasion where some tweaking needs to happen, be sure to make use of sass functions (such as ```lighten()``` and ```darken()```) to help change our primary palette.
|
||||
|
||||
The Bad Way
|
||||
### The Bad Way
|
||||
|
||||
|
||||
.class-name {
|
||||
color: #123456;
|
||||
|
|
@ -54,7 +197,7 @@ The Bad Way
|
|||
}
|
||||
|
||||
|
||||
The Better Way
|
||||
### The Better Way
|
||||
|
||||
$my-functional-variable: $canvas-primary;
|
||||
|
||||
|
|
@ -63,7 +206,7 @@ The Better Way
|
|||
}
|
||||
|
||||
|
||||
The Best Way
|
||||
### The Best Way
|
||||
|
||||
$my-functional-variable: $canvas-primary;
|
||||
|
||||
|
|
@ -71,79 +214,11 @@ The Best Way
|
|||
color: $my-functional-variable;
|
||||
}
|
||||
|
||||
## tl;dr
|
||||
|
||||
### **Canvas Color Variables**
|
||||
|
||||
Note: There is only one set of variables, high-contrast mode changes color automagically when on
|
||||
|
||||
<div class="Colorguide-container">
|
||||
<div class="Colorguide-container--primary-theme">
|
||||
<strong>Normal</strong>
|
||||
<div class="Colorguide-color Colorguide-color--primary">
|
||||
<span class="Colorguide-var">$canvas-primary</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--secondary">
|
||||
<span class="Colorguide-var">$canvas-secondary</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--success">
|
||||
<span class="Colorguide-var ">$canvas-success</span>
|
||||
</div>
|
||||
|
||||
<div class="Colorguide-color Colorguide-color--neutral">
|
||||
<span class="Colorguide-var">$canvas-neutral</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--action">
|
||||
<span class="Colorguide-var">$canvas-action</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--danger">
|
||||
<span class="Colorguide-var">$canvas-danger</span>
|
||||
</div>
|
||||
|
||||
<div class="Colorguide-color Colorguide-color--alert">
|
||||
<span class="Colorguide-var">$canvas-alert</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--light">
|
||||
<span class="Colorguide-var">$canvas-light</span>
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--dark">
|
||||
<span class="Colorguide-var">$canvas-dark</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Colorguide-container--hc-theme">
|
||||
<strong>High Contrast</strong>
|
||||
<div class="Colorguide-color Colorguide-color--primary">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--secondary">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--success">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--neutral">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--action">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--danger">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--alert">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--light">
|
||||
</div>
|
||||
<div class="Colorguide-color Colorguide-color--dark">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="styleguide-section__component-notes">
|
||||
<h4 class="codeBlock__note-title">tl;dr</h4>
|
||||
<p class="codeBlock__note-description">Use color variables when adding colors to your elements.</p>
|
||||
<p class="codeBlock__note-description">Do not use hex codes in .scss or .sass files.</p>
|
||||
<p class="codeBlock__note-description">If that color needs to be tweaked, use the scss functions for <pre><code>lighten($my-color, 10%)</code></pre> and <pre><code>darken($my-color, 10%)</code></pre></p>
|
||||
<p class="codeBlock__note-description">High Contrast colors are automatically pulled in based on the canvas color variables.</p>
|
||||
</div>
|
||||
- Use color variables when adding colors to your elements.
|
||||
- Do not use hex codes in .scss or .sass files.
|
||||
- If that color needs to be tweaked, use the scss functions for `lighten($my-color, 10%)` and `darken($my-color, 10%)`
|
||||
- High Contrast colors are automatically pulled in based on the canvas color variables.
|
||||
|
||||
*/
|
||||
|
|
@ -1,21 +1,17 @@
|
|||
/*
|
||||
@styleguide Element Toggler
|
||||
|
||||
This represents current best practices around using the .element-toggler class.
|
||||
<br/>
|
||||
This represents current best practices around using the `.element-toggler` class.
|
||||
|
||||
The current thinking on accessibility is that we should use a span for the
|
||||
element-toggler dom element so that it's not read as "link" like it would if we
|
||||
used an <> tag. Use aria-controls and aria-expanded on the dom element that
|
||||
has class element_toggler. However, this does not work in all the screenreader
|
||||
configurations that we currently support, so it is also recommended that you
|
||||
include an aria-label, of the format: "[toggler-name] toggle
|
||||
[toggled-content-description] visibility". So for example on the assignment
|
||||
index page, for an assignment group named "Math Week 1" we say "Math Week
|
||||
1 toggle assignment visibility"
|
||||
<br/>
|
||||
|
||||
see app/coffeescripts/behaviors/elementToggler.coffee for implementation
|
||||
see the styleguide javascript for a bit of js to toggle the arrow button based
|
||||
on state.
|
||||
- The current thinking on accessibility is that we should use a `<span>` for the
|
||||
element-toggler dom element so that it's not read as "link" like it would if we used an <> tag.
|
||||
- Use `aria-controls` and `aria-expanded` on the dom element that has class `element_toggler`.
|
||||
- Also include an aria-label, of the format: `[toggler-name] toggle [toggled-content-description] visibility`.
|
||||
|
||||
<br/>
|
||||
|
||||
```html
|
||||
|
||||
|
|
@ -34,6 +30,9 @@ on state.
|
|||
</ul>
|
||||
|
||||
```
|
||||
|
||||
See `app/coffeescripts/behaviors/elementToggler.coffee`for implementation
|
||||
|
||||
*/
|
||||
|
||||
.element_toggler {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@import "base/environment";
|
||||
|
||||
/*
|
||||
@styleguide Forms: Inline
|
||||
@styleguide Forms
|
||||
|
||||
## Inline
|
||||
|
||||
```html
|
||||
<form class="form-inline">
|
||||
|
|
@ -13,22 +15,8 @@
|
|||
<button type="submit" class="btn">Sign in</button>
|
||||
</form>
|
||||
```
|
||||
*/
|
||||
|
||||
input[type=text].loading {
|
||||
background-image: url('/images/ajax-reload-animated.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 98% center;
|
||||
}
|
||||
|
||||
.loadingIndicator, .paginatedLoadingIndicator {
|
||||
background-image: url('/images/ajax-reload-animated.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* @styleguide Forms: Hint Text
|
||||
## Hint Text
|
||||
|
||||
For text beneath a form elements that give further explanation about the field.
|
||||
This was added for some legacy code, not sure if it'll work well elsewhere.
|
||||
|
|
@ -36,34 +24,8 @@ This was added for some legacy code, not sure if it'll work well elsewhere.
|
|||
```html
|
||||
<input type="text" placeholder="Sortable Name"> <div class="hint-text">The name displayed in sorted lists</div>
|
||||
```
|
||||
*/
|
||||
|
||||
.hint-text {
|
||||
font-size: 10px;
|
||||
color: $hintTextColor;
|
||||
}
|
||||
|
||||
input + .hint-text {
|
||||
/* pull up into the input */
|
||||
margin-top: -10px;
|
||||
/* replace the inputs margin-bottom */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* @styleguide Form Table
|
||||
|
||||
We want to deprecate this in favor of `form-horizontal`.
|
||||
|
||||
*/
|
||||
|
||||
.formtable {
|
||||
td:first-child {
|
||||
/* lines-up label in first cell with input in second */
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* @styleguide Forms: Dialog Form
|
||||
## Dialog Form
|
||||
|
||||
Add the class `form-dialog` to get the `form-controls` to display properly in a
|
||||
dialog form and proper overflow scrolling of content. No need to use
|
||||
|
|
@ -88,6 +50,44 @@ controls on the bottom required this.
|
|||
|
||||
*/
|
||||
|
||||
input[type=text].loading {
|
||||
background-image: url('/images/ajax-reload-animated.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 98% center;
|
||||
}
|
||||
|
||||
.loadingIndicator, .paginatedLoadingIndicator {
|
||||
background-image: url('/images/ajax-reload-animated.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
// Hint Text
|
||||
|
||||
.hint-text {
|
||||
font-size: 10px;
|
||||
color: $hintTextColor;
|
||||
}
|
||||
|
||||
input + .hint-text {
|
||||
/* pull up into the input */
|
||||
margin-top: -10px;
|
||||
/* replace the inputs margin-bottom */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Form Table
|
||||
|
||||
.formtable {
|
||||
td:first-child {
|
||||
/* lines-up label in first cell with input in second */
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog Form
|
||||
|
||||
.form-dialog {
|
||||
padding-bottom: 70px !important;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
/*
|
||||
@styleguide Header Bar
|
||||
|
||||
- Actions is the header bar should exist on the right - cog menus should always be the most right.
|
||||
- Many actions should be grouped by related function, IE (edit/delete content) and (preview/publish content)
|
||||
- Left side should be used for filtering and searching content.
|
||||
<br/>
|
||||
|
||||
**Add body class `.padless-content` to the body when using `.header-bar` so that header-bar extends full width. Add padding or margin to containers below header-bar.**
|
||||
### tl;dr
|
||||
- Actions is the header bar should exist on the right
|
||||
- Cog menus should always be the most right
|
||||
- Many actions should be grouped by related function, IE (edit/delete content) and (preview/publish content)
|
||||
- Left side should be used for filtering and searching content
|
||||
- Add body class `.padless-content` to the body when using `.header-bar` so that header-bar extends full width.
|
||||
- Add padding or margin to containers below header-bar
|
||||
|
||||
### Actions on the right; primary and secondary actions
|
||||
|
||||
## Actions on the right; primary and secondary actions
|
||||
|
||||
```html
|
||||
|
||||
|
|
@ -20,7 +25,7 @@
|
|||
|
||||
```
|
||||
|
||||
### Actions on the right; primary, secondary and cog
|
||||
## Actions on the right; primary, secondary and cog
|
||||
|
||||
```html
|
||||
|
||||
|
|
@ -45,7 +50,7 @@
|
|||
```
|
||||
|
||||
|
||||
### Actions grouped by related function
|
||||
## Actions grouped by related function
|
||||
|
||||
```html
|
||||
|
||||
|
|
@ -74,7 +79,7 @@
|
|||
|
||||
```
|
||||
|
||||
### Actions on the right, filters and search on the left
|
||||
## Actions on the right, filters and search on the left
|
||||
|
||||
```html
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
/*
|
||||
@styleguide Expanding Message Link
|
||||
|
||||
<br/>
|
||||
|
||||
A right- or left-aligned link that expands on hover or
|
||||
focus to reveal a prompt. Useful for close buttons or
|
||||
navigations.
|
||||
|
||||
The Expanding Message Link can be expanded via javascript
|
||||
by adding the **.ic-Expand-link--active** class to the
|
||||
**.ic-Expand-link** element.
|
||||
by adding the `.ic-Expand-link--active` class to the
|
||||
`.ic-Expand-link` element.
|
||||
|
||||
```html
|
||||
<div class="content-box">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
/*
|
||||
@styleguide Toggle
|
||||
|
||||
### Regular old checkboxes that look and feel like toggle switches
|
||||
### tl;dr
|
||||
|
||||
No javascript is required for the **.ic-Toggle** component. However, including all the right markup is important for it to function properly. The id of the checkbox input must match the "for" attribute of the label, for example.
|
||||
- Regular old checkboxes that look and feel like toggle switches
|
||||
- No javascript is required for the **.ic-Toggle** component.
|
||||
- However, including all the right markup is important for it to function properly.
|
||||
- The id of the checkbox input must match the "for" attribute of the label, for example.
|
||||
- The **.ic-Toggle** component was designed to be as accessible as a regular checkbox.
|
||||
- Supports both *:focus* and *disabled* states. Once in focus, it can be toggled via the keyboard by pressing SPACE.
|
||||
|
||||
The **.ic-Toggle** component was designed to be as accessible as a regular checkbox. It supports both *:focus* and *disabled* states. Once in focus, it can be toggled via the keyboard by pressing SPACE.
|
||||
|
||||
#### **Basic usage**
|
||||
## Basic usage
|
||||
|
||||
This is the basic .ic-Toggle component, without any special additions. By default, the component defaults to Canvas colors and branding.
|
||||
|
||||
|
|
@ -28,7 +31,7 @@ This is the basic .ic-Toggle component, without any special additions. By defaul
|
|||
</div>
|
||||
```
|
||||
|
||||
#### **Go big or go, uh, small**
|
||||
## Go big or go, uh, small
|
||||
|
||||
Adding **.ic-Toggle--size-large** or **.ic-Toggle--size-small** to the **.ic-Toggle** component will give you slightly bigger or small toggles.
|
||||
|
||||
|
|
@ -74,24 +77,22 @@ Adding **.ic-Toggle--size-large** or **.ic-Toggle--size-small** to the **.ic-Tog
|
|||
|
||||
```
|
||||
|
||||
#### **Customizing your toggle switch**
|
||||
## Customizing your toggle switch
|
||||
|
||||
The **.ic-Toggle** class exposes two mixins for you to use to customize its appearance.
|
||||
The `.ic-Toggle` class exposes two mixins for you to use to customize its appearance.
|
||||
|
||||
To customize the colors and transition-timing-function, include the **ic-Toggle-branding** mixin in your new class. Let's call our modifier class **.ic-Toggle--i-love-ugly-colors**, for example:
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
.ic-Toggle.ic-Toggle--i-love-ugly-colors {
|
||||
@include ic-Toggle-branding (
|
||||
red, // off state color
|
||||
green, // on state color
|
||||
white, // inactive text color
|
||||
ease-in-out // transition timing function
|
||||
)
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<br/>
|
||||
.ic-Toggle.ic-Toggle--i-love-ugly-colors {
|
||||
@include ic-Toggle-branding (
|
||||
red, // off state color
|
||||
green, // on state color
|
||||
white, // inactive text color
|
||||
ease-in-out // transition timing function
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
The SCSS above would give you the toggle below.
|
||||
|
||||
|
|
@ -104,26 +105,25 @@ The SCSS above would give you the toggle below.
|
|||
</label>
|
||||
</div>
|
||||
```
|
||||
<br/>
|
||||
The `ic-Toggle-appearance` mixin works the same way, giving you control over the toggle's width, height, and a lot more. Simply add a modifier class (in this case **.ic-Toggle--i-love-big-toggles**) to the **.ic-Toggle** base class, and include the ic-Toggle-appearance mixin. Then overwrite the mixin's default variable values until you get the look you're going for.
|
||||
<br/>
|
||||
|
||||
.ic-Toggle.ic-Toggle--i-love-big-toggles {
|
||||
@include ic-Toggle-appearance
|
||||
(
|
||||
200px, // Toggle width
|
||||
100px, // Toggle height
|
||||
100px, // Toggle border radius
|
||||
2px, // Offset (distance btw switch and box)
|
||||
16px, // Label font size
|
||||
18px, // Switch font size
|
||||
0px 4px 6px rgba(black, 0.4), // Switch shadow on hover/focus
|
||||
10px // Bottom padding on main element to make sure switch shadow always shows
|
||||
);
|
||||
}
|
||||
|
||||
The **ic-Toggle-appearance** mixin works the same way, giving you control over the toggle's width, height, and a lot more. Simply add a modifier class (in this case **.ic-Toggle--i-love-big-toggles**) to the **.ic-Toggle** base class, and include the ic-Toggle-appearance mixin. Then overwrite the mixin's default variable values until you get the look you're going for.
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
.ic-Toggle.ic-Toggle--i-love-big-toggles {
|
||||
@include ic-Toggle-appearance
|
||||
(
|
||||
200px, // Toggle width
|
||||
100px, // Toggle height
|
||||
100px, // Toggle border radius
|
||||
2px, // Offset (distance btw switch and box)
|
||||
16px, // Label font size
|
||||
18px, // Switch font size
|
||||
0px 4px 6px rgba(black, 0.4), // Switch shadow on hover/focus
|
||||
10px // Bottom padding on main element to make sure switch shadow always shows
|
||||
);
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
The SCSS above would give you the toggle below.
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
|
||||
/* @styleguide Item Groups Condensed
|
||||
|
||||
Item groups come either `item-group` or `item-group-condensed` styles.
|
||||
The `item-group` style is for draggable items and `item-group-condensed`
|
||||
is for items that are not draggable.
|
||||
<br/>
|
||||
### tl;dr
|
||||
|
||||
The outer `item-group-container` div is optional, and adds a background
|
||||
color with a dashed line between groups.
|
||||
- Item groups come either `item-group` or `item-group-condensed` styles
|
||||
- The `item-group` style is for draggable items and `item-group-condensed` is for items that are not draggable
|
||||
- The outer `item-group-container` div is optional, and adds a background color with a dashed line between groups
|
||||
|
||||
<br/>
|
||||
|
||||
```html
|
||||
<div class="item-group-container">
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
|
||||
/* @styleguide Item Groups
|
||||
|
||||
Item groups come either `item-group` or `item-group-condensed` styles.
|
||||
The `item-group` style is for draggable tiems and `item-group-condensed`
|
||||
is for items that are not draggable.
|
||||
<br/>
|
||||
### tl;dr
|
||||
|
||||
- Item groups come either `item-group` or `item-group-condensed` styles
|
||||
- The `item-group` style is for draggable tiems and `item-group-condensed` is for items that are not draggable
|
||||
|
||||
<br/>
|
||||
|
||||
```html
|
||||
<div class="item-group">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
@styleguide Publish State
|
||||
|
||||
<br/>
|
||||
The publish button has two states on click (publish and published) and a hover state of 'Unpublish' once published.
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
/* @styleguide Modal Dialog - React (new!)
|
||||
/* @styleguide Modal Dialog
|
||||
|
||||
### Default Canvas modal
|
||||
## Default Canvas modal
|
||||
|
||||
React Modal comes with very few default classes to make it as themeable as possible. If you want plain-vanilla Canvas modal styles, be sure to specify `className: 'ReactModal__Content--canvas'` when you initialize the modal, as follows:
|
||||
|
||||
<br/>
|
||||
|
||||
```javascript
|
||||
React.renderComponent(
|
||||
ReactModalExample(
|
||||
|
|
@ -22,9 +24,14 @@ React.renderComponent(
|
|||
See `app/jsx/styleguide/ReactModalExample.jsx` for complete example usage.
|
||||
|
||||
<br />
|
||||
### Mini Canvas modal
|
||||
|
||||
For small dialogs like Confirms, the default Canvas modal width might seem too much. The **.ReactModal__Content--mini-modal** class can be appended to the **.ReactModal__Content--canvas** class to render a less wide modal dialog.
|
||||
## Mini Canvas modal
|
||||
|
||||
For small dialogs like Confirms, the default Canvas modal width might seem too much.
|
||||
|
||||
The `.ReactModal__Content--mini-modal` class can be appended to the `.ReactModal__Content--canvas` class to render a less wide modal dialog.
|
||||
|
||||
<br/>
|
||||
|
||||
```javascript
|
||||
React.renderComponent(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
/*
|
||||
@styleguide Spacing: Content Box
|
||||
@styleguide Spacing
|
||||
|
||||
## Spacing: Content Box
|
||||
|
||||
Content boxes automatically clear their floated children and have default margins.
|
||||
|
||||
|
|
@ -12,13 +14,24 @@ Content boxes automatically clear their floated children and have default margin
|
|||
</div>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
## Sizes Content Box
|
||||
|
||||
```html
|
||||
<div class="content-box-mini border border-trbl">Half spacing</div>
|
||||
<div class="content-box-mini border border-trbl">Third spacing</div>
|
||||
```
|
||||
## Spacing: Pad Box
|
||||
|
||||
Use pad-box if you want to arbitrarily add some padding to an element.
|
||||
|
||||
## Sizes Pad Box
|
||||
|
||||
```html
|
||||
<div class="pad-box-mega border border-trbl">Mega</div>
|
||||
<div class="pad-box border border-trbl">Normal</div>
|
||||
<div class="pad-box-mini border border-trbl">mini</div>
|
||||
<div class="pad-box-micro border border-trbl">micro</div>
|
||||
```
|
||||
*/
|
||||
|
||||
[class*='content-box'] {
|
||||
|
|
@ -31,20 +44,8 @@ Content boxes automatically clear their floated children and have default margin
|
|||
.content-box-mini { margin: $spacing-width/2 0; }
|
||||
.content-box-micro { margin: $spacing-width/3 0; }
|
||||
|
||||
/*
|
||||
@styleguide Spacing: Pad Box
|
||||
|
||||
Use pad-box if you want to arbitrarily add some padding to an element.
|
||||
|
||||
### Sizes
|
||||
|
||||
```html
|
||||
<div class="pad-box-mega border border-trbl">Mega</div>
|
||||
<div class="pad-box border border-trbl">Normal</div>
|
||||
<div class="pad-box-mini border border-trbl">mini</div>
|
||||
<div class="pad-box-micro border border-trbl">micro</div>
|
||||
```
|
||||
*/
|
||||
|
||||
.pad-box { padding: $spacing-width; }
|
||||
.pad-box-mega { padding: $spacing-width*2; }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
@styleguide Tables
|
||||
|
||||
### Default table
|
||||
## Default table
|
||||
|
||||
```html
|
||||
<table class="ic-Table">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</table>
|
||||
```
|
||||
|
||||
### Row-hover table
|
||||
## Row-hover table
|
||||
|
||||
Adding **.ic-Table--hover-row** to the table element will produce a background color when the user hovers over each table row in the table body.
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ Adding **.ic-Table--hover-row** to the table element will produce a background c
|
|||
</table>
|
||||
```
|
||||
|
||||
### Striped table
|
||||
## Striped table
|
||||
|
||||
Add **.ic-Table--striped** to the table element to produce a striped table among rows in the table body.
|
||||
|
||||
|
|
@ -103,7 +103,7 @@ Add **.ic-Table--striped** to the table element to produce a striped table among
|
|||
</tbody>
|
||||
</table>
|
||||
```
|
||||
### Row background color options
|
||||
## Row background color options
|
||||
|
||||
We will reserve $canvas-primary (traditionally blue) for the hover state background color.
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ We will reserve $canvas-primary (traditionally blue) for the hover state backgro
|
|||
</table>
|
||||
```
|
||||
|
||||
### Condensed table
|
||||
## Condensed table
|
||||
|
||||
Add **.ic-Table--condensed** to the table element to reduce the default cell padding.
|
||||
|
||||
|
|
@ -177,7 +177,7 @@ Add **.ic-Table--condensed** to the table element to reduce the default cell pad
|
|||
</table>
|
||||
```
|
||||
|
||||
### Table with cog (admin link dropdown)
|
||||
## Table with cog (admin link dropdown)
|
||||
|
||||
Enclose our standard Cog Dropdown within a **div class="ic-Table--actions** to right-align the button and make sure the cog dropdown appears in the right place.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
/*
|
||||
@styleguide Tab Navigation
|
||||
|
||||
For accessibility reasons, we use jQuery UI tabs.
|
||||
|
||||
### Regular Tabs
|
||||
Our default tabs come complete with a panel attached to the tabs that displays the content inside each tab. jQueryUI adds all the classes, once you initialize the tabs using the script and markup below:
|
||||
## Regular Tabs
|
||||
|
||||
Our default tabs come complete with a panel attached to the tabs that displays the content inside each tab.
|
||||
|
||||
jQueryUI adds all the classes, once you initialize the tabs using the script and markup.
|
||||
|
||||
```javascript
|
||||
$("#styleguide-tabs-demo-regular").tabs()
|
||||
```
|
||||
|
||||
```html
|
||||
<div id="styleguide-tabs-demo-regular">
|
||||
|
|
@ -22,14 +21,13 @@ $("#styleguide-tabs-demo-regular").tabs()
|
|||
<div id="tabs-3">Tab 3 content</div>
|
||||
</div>
|
||||
```
|
||||
$("#styleguide-tabs-demo-regular").tabs()
|
||||
|
||||
### Minimal Tabs
|
||||
## Minimal Tabs
|
||||
|
||||
Don't want the bordered box around each tab panel? Simply add the **.ui-tabs-minimal** class to the parent tab element, as we've done in the example below:
|
||||
Don't want the bordered box around each tab panel?
|
||||
|
||||
```javascript
|
||||
$("#styleguide-tabs-demo-minimal").tabs()
|
||||
```
|
||||
Simply add the **.ui-tabs-minimal** class to the parent tab element.
|
||||
|
||||
```html
|
||||
<div id="styleguide-tabs-demo-minimal" class="ui-tabs-minimal">
|
||||
|
|
@ -44,6 +42,10 @@ $("#styleguide-tabs-demo-minimal").tabs()
|
|||
</div>
|
||||
```
|
||||
|
||||
|
||||
$("#styleguide-tabs-demo-minimal").tabs()
|
||||
|
||||
|
||||
*/
|
||||
|
||||
// Custom Canvas branding for tabs -- overwriting the defaults in the jQuery UI tabs styles
|
||||
|
|
|
|||
|
|
@ -1,5 +1,31 @@
|
|||
@import "base/environment";
|
||||
|
||||
/* Tour Popups
|
||||
- give a `<div>` classes of `tour` and `popover`.
|
||||
- use `controls` for buttons at the bottom of the popover
|
||||
- everything else is just html
|
||||
|
||||
(inline styles in this demo are not desired, obviously)
|
||||
|
||||
```html
|
||||
<div class="popover tour top" style="position:static; margin-top: 10px; display: block;">
|
||||
<div class="arrow"></div>
|
||||
<div class="popover-content">
|
||||
<h1 class="h4">Canvas just got better!</h1>
|
||||
<p>
|
||||
It’s now possible to set the read/unread status of your discussion posts manually.
|
||||
</p>
|
||||
|
||||
<div class="controls clearfix">
|
||||
<div class="pull-right">
|
||||
<a href="#" class="btn">No thanks</a>
|
||||
<a href="#" class="btn btn-primary">Show me how</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
.popover.tour {
|
||||
z-index: 1000; // yeah, one thousand
|
||||
width: 350px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
/*
|
||||
@styleguide Typography
|
||||
|
||||
## Alignment
|
||||
|
||||
`.text-right`
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p class="text-right">align this text right</p>
|
||||
<p class="text-left">align this text left</p>
|
||||
<p class="text-center">align this text center</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Emphasis
|
||||
|
||||
`<strong>`
|
||||
|
||||
```html
|
||||
<p>Narwhal gastropub messenger bag viral <strong>letterpress plaid</strong>.</p>
|
||||
```
|
||||
|
||||
`<em>`
|
||||
|
||||
```html
|
||||
<p>Leggings whatever truffaut farm-to-table <em>portland blue bottle </em>cray selvage lo-fi marfa.</p>
|
||||
```
|
||||
|
||||
`<small>`
|
||||
|
||||
```html
|
||||
<p>Plaid tofu polaroid <small>banjo keffiyeh wolf etsy</small> craft beer kogi.</p>
|
||||
```
|
||||
|
||||
## Color
|
||||
|
||||
```html
|
||||
<p class="muted">Example of MUTED text</p>
|
||||
<p class="text-warning">Example of WARNING text <a href="" class="text-warning">with a link</a></p>
|
||||
<p class="text-error">Example of ERROR text <a href="" class="text-error">with a link</a></p>
|
||||
<p class="text-info">Example of INFO text <a href="" class="text-info">with a link</a></p>
|
||||
<p class="text-success">Example of SUCCESS text <a href="" class="text-success">with a link</a></p>
|
||||
```
|
||||
|
||||
## Headings
|
||||
|
||||
|
||||
Use `<h2>` as page content heading
|
||||
|
||||
```html
|
||||
<h1>H1 Cosby sweater vinyl street art</h1>
|
||||
<h2>H2 Cosby sweater vinyl street art</h2>
|
||||
<h3>H3 Cosby sweater vinyl street art</h3>
|
||||
<h4>H4 Cosby sweater vinyl street art</h4>
|
||||
<h5>H5 Cosby sweater vinyl street art</h5>
|
||||
<h6>H6 Cosby sweater vinyl street art</h6>
|
||||
```
|
||||
|
||||
## Unordered Lists
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Unordered List Item</li>
|
||||
<li>Unordered List Item</li>
|
||||
<li>Unordered List Item</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Ordered Lists
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>List Item One</li>
|
||||
<li>List Item Two</li>
|
||||
<li>List Item Three</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
## Unstyled Lists
|
||||
|
||||
Add `class="unstyled"`
|
||||
|
||||
```html
|
||||
<ol class="unstyled">
|
||||
<li>List Item One</li>
|
||||
<li>List Item Two</li>
|
||||
<li>List Item Three</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
## Definition Lists
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>Acid</dt>
|
||||
<dd>A substance that produces H+(aq) ions in aqueous solution</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>The oxide of a nonmetal that reacts with water to form an acid</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>Compound produced by dehydration of a carbonic acid</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Acid</dt>
|
||||
<dd>A substance that produces H+(aq) ions in aqueous solution</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>The oxide of a nonmetal that reacts with water to form an acid</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>Compound produced by dehydration of a carbonic acid</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
|
||||
*/
|
||||
139
app/stylesheets/pages/styleguide/_styleguide.scss → app/stylesheets/pages/styleguide/_styleguide_app.scss
Normal file → Executable file
139
app/stylesheets/pages/styleguide/_styleguide.scss → app/stylesheets/pages/styleguide/_styleguide_app.scss
Normal file → Executable file
|
|
@ -1,57 +1,27 @@
|
|||
|
||||
#style-guide-nav li {
|
||||
a[href*=_-_legacy] {display: block;}
|
||||
a[href*=_-_new] {display: none;}
|
||||
// We need this id to make some of the js components style correctly
|
||||
// not sure why, but this takes off some of the width/heigh stuff we don't want
|
||||
#main.Sg-only {
|
||||
width: 100% !important;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
min-height: 450px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.styleguide-section__component > [id*=_-_legacy] { display: block;}
|
||||
.styleguide-section__component > [id*=_-_new] { display: none;}
|
||||
|
||||
#main {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $altBG;
|
||||
.Sg-Main {
|
||||
// This is a workaround to account for the padding around
|
||||
// the gutters of flexgrid. It's a known problem and there's
|
||||
// currently an issue reported. If things change we'll fix it.
|
||||
//
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0 0 10px 20px;
|
||||
.Sg-Section {
|
||||
padding-bottom: 100px; // adds some padding between our sections and headers
|
||||
}
|
||||
|
||||
#docs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.Sg-header__Subnavigation-item {
|
||||
// to account for our added "section" for canvas sg nav
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#docs > article {
|
||||
margin: 40px 20px;
|
||||
padding: 20px;
|
||||
min-height: 60%;
|
||||
box-shadow: 2px 6px 16px rgba(0, 0, 0, 0.5);
|
||||
background: #fff;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
#docs > article:first-child {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.code-demo:hover {
|
||||
margin-left: -12px;
|
||||
border-left: solid 4px #0088cc;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.styleguide-section__grid-demo-element {
|
||||
padding: 8px 16px;
|
||||
background: lighten($ic-link-color, 15%);
|
||||
|
|
@ -60,38 +30,39 @@
|
|||
text-transform: uppercase;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.Sg-Main .codeBlock,
|
||||
.Sg-Main .highlight {
|
||||
&:after {
|
||||
content: 'Code';
|
||||
}
|
||||
}
|
||||
.Sg-Main .codeBlock,
|
||||
.Sg-Main .highlight {
|
||||
&:after {
|
||||
content: 'Code';
|
||||
}
|
||||
}
|
||||
// For hiding sections from nav
|
||||
.isHidden {display: none;}
|
||||
.styleguide-section__accordion-demo-element {
|
||||
padding: $ic-sp*2;
|
||||
color: darken($canvas-neutral, 15%);
|
||||
}
|
||||
/////
|
||||
////// Styles for Colors
|
||||
/////
|
||||
|
||||
.Colorguide-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.Colorguide-container--primary-theme,
|
||||
.Colorguide-container--hc-theme {
|
||||
width: 50%;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.Colorguide-color {
|
||||
padding: 25px;
|
||||
.Colorguide-container--hc-theme & {
|
||||
padding: 35px;
|
||||
}
|
||||
margin: 5px 0;
|
||||
|
||||
color: $base-font-color-light;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.Colorguide-color--light,
|
||||
&.Colorguide-color--neutral {
|
||||
color: $base-font-color-dark;
|
||||
}
|
||||
.Colorguide-hex {
|
||||
justify-content: space-between;
|
||||
padding: 145px 0 0 0;
|
||||
flex: 1 140px;
|
||||
margin: 5px;
|
||||
}
|
||||
.Colorguide-var {
|
||||
display: block;
|
||||
}
|
||||
background: $canvas-light;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@mixin colorguide ($bg-color) {
|
||||
background: $bg-color;
|
||||
border: 1px solid darken($bg-color, 10%);
|
||||
|
|
@ -110,24 +81,10 @@
|
|||
.Colorguide-color--primary {@include colorguide(#0073ac);}
|
||||
.Colorguide-color--secondary {@include colorguide(#343c44);}
|
||||
.Colorguide-color--success {@include colorguide(#008a14);}
|
||||
.Colorguide-color--neutral {@include colorguide(hsl(0,0,90%)); color: $canvas-light;}
|
||||
.Colorguide-color--neutral {@include colorguide(hsl(0,0,90%));}
|
||||
.Colorguide-color--action {@include colorguide(#a23891);}
|
||||
.Colorguide-color--danger {@include colorguide(#a03536);}
|
||||
.Colorguide-color--alert {@include colorguide(#9e6b05);}
|
||||
.Colorguide-color--light {@include colorguide(#ffffff);}
|
||||
.Colorguide-color--dark {@include colorguide(#333333);}
|
||||
}
|
||||
|
||||
.styleguide-section__grid-demo-element {
|
||||
padding: 8px 16px;
|
||||
background: lighten($ic-link-color, 15%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.styleguide-section__accordion-demo-element {
|
||||
padding: $ic-sp*2;
|
||||
color: darken($canvas-neutral, 15%);
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
////
|
||||
// Note: We share this file with other Instructure projects so we can
|
||||
// maintain a consistent look feel with our styleguides.
|
||||
// If you edit something in there please throw a reference in #ui so we
|
||||
// can make sure to update this file in other projects.
|
||||
////
|
||||
////
|
||||
////// Mixins & Silent Classes needed for layout
|
||||
// Note that we've pulled in some css flex box layout classes to help alignment.
|
||||
// Since we share this _layout file with other projects that don't have flexbox grid
|
||||
// or autoprefixer, we've turned these into silent classes to make sure that we can
|
||||
// pull in the right prefixes needed for xbrowser support.
|
||||
/////
|
||||
%sg-flex {
|
||||
/* 2011 */
|
||||
display: -moz-flexbox;
|
||||
display: -ms-flexbox;
|
||||
display: -o-flexbox;
|
||||
display: flexbox;
|
||||
/* 2012 */
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
%sg-flex-1 {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
%sg-flex-align-content-center {
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
}
|
||||
%sg-flex-justify-content-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
%sg-flex-align-self {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
/////
|
||||
////// Styles for Styleguide
|
||||
/////
|
||||
html.Sg-only {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: normal;
|
||||
font-family: $sg-font;
|
||||
font-weight: 300;
|
||||
}
|
||||
body.Sg-only {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
background: $sg-background;
|
||||
}
|
||||
.Sg-header {
|
||||
background: $sg-background-global-nav;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
.Sg-header__Navigation {
|
||||
@include sg-header-logo;
|
||||
@extend %sg-flex;
|
||||
@extend %sg-flex-1;
|
||||
@extend %sg-flex-align-content-center;
|
||||
@extend %sg-flex-justify-content-center;
|
||||
}
|
||||
.Sg-header__Navigation-item {
|
||||
color: $sg-header-navigation-item;
|
||||
font-size: 16px;
|
||||
padding: 13px 15px;
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
@extend %sg-flex-align-self;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $sg-header-navigation-item--hover;
|
||||
background: $sg-background-sub-nav;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.Sg-header__Navigation-item.active {
|
||||
background: $sg-background-sub-nav;
|
||||
color: $sg-header-navigation-item--active;
|
||||
}
|
||||
.Sg-header__Subnavigation {
|
||||
background: $sg-background-sub-nav;
|
||||
@extend %sg-flex;
|
||||
@extend %sg-flex-1;
|
||||
@extend %sg-flex-align-content-center;
|
||||
@extend %sg-flex-justify-content-center;
|
||||
}
|
||||
.Sg-header__Subnavigation-item {
|
||||
&,
|
||||
&:active,
|
||||
&:visited,
|
||||
&:focus {
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
font-weight: 500;
|
||||
color: $sg-header-subnavigation-item;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
color: $sg-header-subnavigation-item--hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.Sg-Main {
|
||||
/// Account for fixed header
|
||||
padding-top: 85px;
|
||||
}
|
||||
// Hologram class
|
||||
.Sg-Content,
|
||||
// Dresscode class
|
||||
.Sg-Article {
|
||||
> h1 {
|
||||
background: $sg-content-title-background;
|
||||
color: $sg-content-title-font-color;
|
||||
font-size: 48px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
margin: 0;
|
||||
}
|
||||
> h2 {
|
||||
padding: 3px 0;
|
||||
margin: 25px 0;
|
||||
text-transform: capitalize;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid $sg-title-border;
|
||||
border-bottom: 1px solid $sg-title-border;
|
||||
}
|
||||
> p {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
> ul, > dl, > ol {
|
||||
margin: 10px 20px;
|
||||
li {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
& > hr {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
height: 1px;
|
||||
&.Ruler--dotted {
|
||||
border-top: 1px dotted $sg-content-hr-border-color;
|
||||
}
|
||||
}
|
||||
.sg-src-file-path {
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
background: $sg-src-file-path-background;
|
||||
border-top:1px solid $sg-src-file-path-border-color;
|
||||
color: $sg-src-file-path-font-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
////
|
||||
// Note: We share this file with other Instructure projects so we can
|
||||
// maintain a consistent look feel with our styleguides.
|
||||
// If you edit something in there please throw a reference in #ui so we
|
||||
// can make sure to update this file in other projects.
|
||||
////
|
||||
//// Styleguide Setup Variables
|
||||
////////
|
||||
// These variables set all the colors and styles needed to
|
||||
// style out the styleguide itself. If there is something in
|
||||
// _styleguide_app or styleguide_syntax that you need to edit
|
||||
// please talk to the Canvas UI dev team so we can add that as
|
||||
// a functional variable in ours.
|
||||
////////
|
||||
$sg-background: #fff !default;
|
||||
$sg-codefont: "Monaco", "Courier", monospace !default;
|
||||
$sg-font: "Helvetica Neue", "Helvetica", Arial, sans-serif !default;
|
||||
|
||||
$sg-background-global-nav: $canvas-secondary !default;
|
||||
$sg-background-sub-nav: darken($canvas-secondary, 10%) !default;
|
||||
$sg-background-links: $canvas-secondary !default;
|
||||
$sg-background-text: $canvas-dark !default;
|
||||
|
||||
$sg-header-navigation-item: $canvas-light !default;
|
||||
$sg-header-navigation-item--hover: $canvas-neutral !default;
|
||||
$sg-header-navigation-item--active: $canvas-light !default;
|
||||
$sg-title-border: darken($canvas-neutral, 10) !default;
|
||||
|
||||
$sg-header-subnavigation-item: $canvas-light !default;
|
||||
$sg-header-subnavigation-item--hover: $canvas-neutral !default;
|
||||
$sg-header-subnavigation-item--active: $canvas-light !default;
|
||||
|
||||
$sg-content-title-background: $canvas-primary !default;
|
||||
$sg-content-title-font-color: #fff !default;
|
||||
$sg-content-hr-border-color: $canvas-secondary !default;
|
||||
|
||||
$sg-src-file-path-background: $canvas-primary !default;
|
||||
$sg-src-file-path-border-color: lighten($canvas-primary, 15%) !default;
|
||||
$sg-src-file-path-font-color: $canvas-light !default;
|
||||
|
||||
//// Stylesheet Examples & Syntax
|
||||
////////
|
||||
$sg-example-tag-color: $canvas-primary !default;
|
||||
$sg-example-string-color: $canvas-neutral !default;
|
||||
$sg-example-border: $canvas-neutral !default;
|
||||
$sg-example-main-color: #1E2631 !default;
|
||||
$sg-syntax-main-font-color: $canvas-neutral !default;
|
||||
$sg-example-title-color: darken($canvas-neutral, 10) !default;
|
||||
//// Stylesheet Logo
|
||||
////////
|
||||
// There is a logo that goes in the top left of the theme. This can
|
||||
// be taken out by commenting out the code below, or changed for a
|
||||
// different logo by editing the path.
|
||||
@mixin sg-header-logo {
|
||||
background: transparent url("/images/sg-logo.svg") 1% 50% no-repeat;
|
||||
background-size: 23px;
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
////
|
||||
// Note: We share this file with other Instructure projects so we can
|
||||
// maintain a consistent look feel with our styleguides.
|
||||
// If you edit something in there please throw a reference in #ui so we
|
||||
// can make sure to update this file in other projects.
|
||||
////
|
||||
.Sg-Main code, .Sg-Main pre {
|
||||
font-family: $sg-codefont;
|
||||
font-size: 14px;
|
||||
border: 1px solid $sg-example-border;
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
word-break: keep-all;
|
||||
word-wrap: normal;
|
||||
white-space:pre;
|
||||
color: $sg-example-tag-color;
|
||||
}
|
||||
// hologram class output
|
||||
.Sg-Main .exampleOutput,
|
||||
// dresscode class output
|
||||
.Sg-Main .code-rendered {
|
||||
border: 1px solid $sg-example-border;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
margin: 15px 0 0 0;
|
||||
padding: 50px 10px 10px 10px;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: 'Example';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: 1px solid $sg-example-border;
|
||||
border-bottom: 1px solid $sg-example-border;
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 5px 8px;
|
||||
display: inline-block;
|
||||
font-family: $sg-font;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.Sg-Main .codeBlock,
|
||||
.Sg-Main .highlight {
|
||||
padding: 50px 4%;
|
||||
margin: 0 0 20px 0;
|
||||
background: $sg-example-main-color;
|
||||
color: $sg-example-tag-color;
|
||||
font-size: 15px;
|
||||
line-height: 1.6em;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
width: auto;
|
||||
&:after {
|
||||
content: 'HTML';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: $sg-title-border;
|
||||
border-right: 1px solid lighten($sg-example-main-color, 10);
|
||||
border-bottom: 1px solid lighten($sg-example-main-color, 10);
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 5px 8px;
|
||||
display: inline-block;
|
||||
font-family: $sg-font;
|
||||
font-size: 12px;
|
||||
}
|
||||
&.jsExample:after {
|
||||
content: 'JS';
|
||||
}
|
||||
.highlight {
|
||||
background: $sg-example-main-color;
|
||||
}
|
||||
pre {
|
||||
font-family: $sg-codefont;
|
||||
width: auto;
|
||||
background: $sg-example-main-color;
|
||||
word-break: keep-all;
|
||||
word-wrap: normal;
|
||||
white-space:pre;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
line-height: 1.6em;
|
||||
color: $sg-example-string-color;
|
||||
border: 1px solid $sg-example-main-color;
|
||||
overflow: visible;
|
||||
}
|
||||
@media only screen and (max-width: 900px) {padding: 50px 10px;}
|
||||
}
|
||||
.Sg-Main .codeBlock,
|
||||
.Sg-Main .highlight {
|
||||
hll { background-color: #ffffcc }
|
||||
.c { color: #999988; font-style: italic } /* Comment */
|
||||
.err { color: #a61717;} /* Error */
|
||||
.k { color: #ffffff;} /* Keyword */
|
||||
.o { color: #ffffff;} /* Operator */
|
||||
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.cp { color: #999999; font-style: italic } /* Comment.Preproc */
|
||||
.c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.cs { color: #999999; font-style: italic } /* Comment.Special */
|
||||
.gd { color: #ffffff; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.ge { color: #ffffff; font-style: italic } /* Generic.Emph */
|
||||
.gr { color: #aa0000 } /* Generic.Error */
|
||||
.gh { color: #999999 } /* Generic.Heading */
|
||||
.gi { color: #ffffff; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.go { color: #888888 } /* Generic.Output */
|
||||
.gp { color: #555555 } /* Generic.Prompt */
|
||||
.gs {} /* Generic.Strong */
|
||||
.gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.kc { color: #ffffff;} /* Keyword.Constant */
|
||||
.kd { color: #ffffff;} /* Keyword.Declaration */
|
||||
.kn { color: #ffffff;} /* Keyword.Namespace */
|
||||
.kp { color: #ffffff;} /* Keyword.Pseudo */
|
||||
.kr { color: #ffffff;} /* Keyword.Reserved */
|
||||
.kt { color: #445588;} /* Keyword.Type */
|
||||
.m { color: #009999 } /* Literal.Number */
|
||||
.s { color: #E6DB74 } /* Literal.String */
|
||||
.na { color: #A6E22E } /* Name.Attribute */
|
||||
.nb { color: #66D9EF } /* Name.Builtin */
|
||||
.nc { color: #445588;} /* Name.Class */
|
||||
.no { color: #A6E22E } /* Name.Constant */
|
||||
.nd { color: #3c5d5d;} /* Name.Decorator */
|
||||
.ni { color: #AE81FF } /* Name.Entity */
|
||||
.ne { color: #990000;} /* Name.Exception */
|
||||
.nf { color: #990000;} /* Name.Function */
|
||||
.nl { color: #990000;} /* Name.Label */
|
||||
.nn { color: #555555 } /* Name.Namespace */
|
||||
.nt { color: #0099E0 } /* Name.Tag */
|
||||
.nv { color: #A6E22E } /* Name.Variable */
|
||||
.ow { color: #ffffff;} /* Operator.Word */
|
||||
.w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.mf { color: #009999 } /* Literal.Number.Float */
|
||||
.mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.sb { color: #E6DB74 } /* Literal.String.Backtick */
|
||||
.sc { color: #E6DB74 } /* Literal.String.Char */
|
||||
.sd { color: #E6DB74 } /* Literal.String.Doc */
|
||||
.s2 { color: #E6DB74 } /* Literal.String.Double */
|
||||
.se { color: #E6DB74 } /* Literal.String.Escape */
|
||||
.sh { color: #E6DB74 } /* Literal.String.Heredoc */
|
||||
.si { color: #E6DB74 } /* Literal.String.Interpol */
|
||||
.sx { color: #E6DB74 } /* Literal.String.Other */
|
||||
.sr { color: #009926 } /* Literal.String.Regex */
|
||||
.s1 { color: #E6DB74 } /* Literal.String.Single */
|
||||
.ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.vc { color: #A6E22E } /* Name.Variable.Class */
|
||||
.vg { color: #A6E22E } /* Name.Variable.Global */
|
||||
.vi { color: #A6E22E } /* Name.Variable.Instance */
|
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
@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 */
|
||||
.k { color: #000000; font-weight: bold } /* Keyword */
|
||||
.o { color: #000000; font-weight: bold } /* Operator */
|
||||
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.ge { color: #000000; font-style: italic } /* Generic.Emph */
|
||||
.gr { color: #aa0000 } /* Generic.Error */
|
||||
.gh { color: #999999 } /* Generic.Heading */
|
||||
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.go { color: #888888 } /* Generic.Output */
|
||||
.gp { color: #555555 } /* Generic.Prompt */
|
||||
.gs { font-weight: bold } /* Generic.Strong */
|
||||
.gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
||||
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
||||
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
||||
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
||||
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
||||
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.m { color: #009999 } /* Literal.Number */
|
||||
.s { color: #d01040 } /* Literal.String */
|
||||
.na { color: #008080 } /* Name.Attribute */
|
||||
.nb { color: #0086B3 } /* Name.Builtin */
|
||||
.nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.no { color: #008080 } /* Name.Constant */
|
||||
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
||||
.ni { color: #800080 } /* Name.Entity */
|
||||
.ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.nl { color: #990000; font-weight: bold } /* Name.Label */
|
||||
.nn { color: #555555 } /* Name.Namespace */
|
||||
.nt { color: #000080 } /* Name.Tag */
|
||||
.nv { color: #008080 } /* Name.Variable */
|
||||
.ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.mf { color: #009999 } /* Literal.Number.Float */
|
||||
.mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.sb { color: #d01040 } /* Literal.String.Backtick */
|
||||
.sc { color: #d01040 } /* Literal.String.Char */
|
||||
.sd { color: #d01040 } /* Literal.String.Doc */
|
||||
.s2 { color: #d01040 } /* Literal.String.Double */
|
||||
.se { color: #d01040 } /* Literal.String.Escape */
|
||||
.sh { color: #d01040 } /* Literal.String.Heredoc */
|
||||
.si { color: #d01040 } /* Literal.String.Interpol */
|
||||
.sx { color: #d01040 } /* Literal.String.Other */
|
||||
.sr { color: #009926 } /* Literal.String.Regex */
|
||||
.s1 { color: #d01040 } /* Literal.String.Single */
|
||||
.ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.vc { color: #008080 } /* Name.Variable.Class */
|
||||
.vg { color: #008080 } /* Name.Variable.Global */
|
||||
.vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
@import "base/environment";
|
||||
@import "vendor/_xflex.scss";
|
||||
@import "pages/styleguide/styleguide.scss";
|
||||
@import "pages/styleguide/syntax.scss";
|
||||
@import "base/c-common.scss";
|
||||
|
||||
//// Stylesheet compiler list
|
||||
////////
|
||||
@import "pages/styleguide/styleguide_setup.scss";
|
||||
@import "pages/styleguide/styleguide_syntax.scss";
|
||||
@import "pages/styleguide/styleguide_layout.scss";
|
||||
|
||||
//// Specific App Styling
|
||||
////////
|
||||
@import "pages/styleguide/styleguide_app.scss";
|
||||
|
|
|
|||
|
|
@ -20,38 +20,7 @@ p {
|
|||
// Emphasis & misc
|
||||
// -------------------------
|
||||
|
||||
/*
|
||||
@styleguide Type: Emphasis
|
||||
|
||||
`<strong>`
|
||||
|
||||
```html
|
||||
<p>Narwhal gastropub messenger bag viral <strong>letterpress plaid</strong>.</p>
|
||||
```
|
||||
|
||||
`<em>`
|
||||
|
||||
```html
|
||||
<p>Leggings whatever truffaut farm-to-table <em>portland blue bottle </em>cray selvage lo-fi marfa.</p>
|
||||
```
|
||||
|
||||
`<small>`
|
||||
|
||||
```html
|
||||
<p>Plaid tofu polaroid <small>banjo keffiyeh wolf etsy</small> craft beer kogi.</p>
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
```html
|
||||
<p class="muted">Example of MUTED text</p>
|
||||
<p class="text-warning">Example of WARNING text <a href="" class="text-warning">with a link</a></p>
|
||||
<p class="text-error">Example of ERROR text <a href="" class="text-error">with a link</a></p>
|
||||
<p class="text-info">Example of INFO text <a href="" class="text-info">with a link</a></p>
|
||||
<p class="text-success">Example of SUCCESS text <a href="" class="text-success">with a link</a></p>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 85%; // Ex: 14px base font * 85% = about 12px
|
||||
|
|
@ -87,24 +56,6 @@ a.text-success:hover { color: darken($successText, 10%); }
|
|||
// Headings
|
||||
// -------------------------
|
||||
|
||||
/*
|
||||
@styleguide Type: Headings
|
||||
|
||||
### Standard Headings
|
||||
|
||||
Use `<h2>` as page content heading
|
||||
|
||||
```html
|
||||
<h1>H1 Cosby sweater vinyl street art</h1>
|
||||
<h2>H2 Cosby sweater vinyl street art</h2>
|
||||
<h3>H3 Cosby sweater vinyl street art</h3>
|
||||
<h4>H4 Cosby sweater vinyl street art</h4>
|
||||
<h5>H5 Cosby sweater vinyl street art</h5>
|
||||
<h6>H6 Cosby sweater vinyl street art</h6>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: ($baseLineHeight / 2) 0;
|
||||
font-family: $headingsFontFamily;
|
||||
|
|
@ -150,62 +101,6 @@ h4 small { font-size: $baseFontSize; }
|
|||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
/*
|
||||
@styleguide Type: Lists
|
||||
|
||||
### Unordered Lists
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Unordered List Item</li>
|
||||
<li>Unordered List Item</li>
|
||||
<li>Unordered List Item</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>List Item One</li>
|
||||
<li>List Item Two</li>
|
||||
<li>List Item Three</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
### Unstyled Lists add `class="unstyled"`
|
||||
|
||||
```html
|
||||
<ol class="unstyled">
|
||||
<li>List Item One</li>
|
||||
<li>List Item Two</li>
|
||||
<li>List Item Three</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
### Definition Lists
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>Acid</dt>
|
||||
<dd>A substance that produces H+(aq) ions in aqueous solution</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>The oxide of a nonmetal that reacts with water to form an acid</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>Compound produced by dehydration of a carbonic acid</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Acid</dt>
|
||||
<dd>A substance that produces H+(aq) ions in aqueous solution</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>The oxide of a nonmetal that reacts with water to form an acid</dd>
|
||||
<dt>Acid Anhydride</dt>
|
||||
<dd>Compound produced by dehydration of a carbonic acid</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
/*
|
||||
@styleguide Grid
|
||||
|
||||
### Grid Styles
|
||||
<br/>
|
||||
|
||||
**We are trying out a slightly modified version of [Flexbox Grid](http://flexboxgrid.com) as Canvas' grid solution going forward.** Flexbox Grid's default *.row* class has been changed to *.grid-row* due to previous usage of Bootstrap 2.x grid in small parts of the application.
|
||||
We use a slightly modified version of [Flexbox Grid](http://flexboxgrid.com) as Canvas' grid.
|
||||
|
||||
Flexbox Grid is a lot like Bootstrap 3's 12-column grid, with different column widths available for *.xs-*, *.sm-*, *.md-*, and *.lg-* screen sizes.
|
||||
*Important!* Flexbox Grid's default `.row` class has been changed to `*.grid-row*` due to previous usage of Bootstrap 2.x grid in small parts of the application.
|
||||
|
||||
To create vertical space between grid rows, consider using the [.content-box class](#spacing:_content_box) and its variants.
|
||||
Flexbox Grid is a lot like Bootstrap 3's 12-column grid, with different column widths available for `.xs-`, `.sm-`, `.md-`, and `.lg-` screen sizes.
|
||||
|
||||
[Official documentation for Flexbox Grid](http://flexboxgrid.com/) by Kristofer [@dam](https://twitter.com/dam).
|
||||
To create vertical space between grid rows, consider using the `.content-box` and its variants.
|
||||
|
||||
#### **Basic usage**
|
||||
|
||||
*"Just tell me how to make 2 columns, dammit."*
|
||||
## Basic usage
|
||||
|
||||
*"Just tell me how to make 2 columns."*
|
||||
|
||||
```html
|
||||
<div class="content-box">
|
||||
|
|
@ -27,7 +28,7 @@ To create vertical space between grid rows, consider using the [.content-box cla
|
|||
</div>
|
||||
</div>
|
||||
```
|
||||
#### **Get all fancypants responsive**
|
||||
## Get all fancypants responsive
|
||||
|
||||
*"I want two columns, but only when the screen is wide enough"*
|
||||
|
||||
|
|
@ -44,7 +45,7 @@ To create vertical space between grid rows, consider using the [.content-box cla
|
|||
</div>
|
||||
```
|
||||
|
||||
#### **Give your UI some room to breathe by adding alignment classes (.start, .center-, .end-) to the .grid-row element**
|
||||
## Give your UI some room to breathe by adding alignment classes (.start, .center-, .end-) to the .grid-row element
|
||||
|
||||
*"Once the screen is wide enough, limit my content to 8 columns and center it horizontally"*
|
||||
|
||||
|
|
@ -58,7 +59,7 @@ To create vertical space between grid rows, consider using the [.content-box cla
|
|||
</div>
|
||||
```
|
||||
|
||||
#### **Align UI elements on a horizontal axis like it's 2014 (or later).**
|
||||
## Align UI elements on a horizontal axis like it's 2014 (or later).
|
||||
|
||||
Because it is, and you can use flexbox.
|
||||
|
||||
|
|
@ -95,7 +96,7 @@ Because it is, and you can use flexbox.
|
|||
</div>
|
||||
```
|
||||
|
||||
#### **Use the power of flexbox to perfectly add space *.around-* or *.between-* UI elements**
|
||||
## Use the power of flexbox to perfectly add space *.around-* or *.between-* UI elements
|
||||
|
||||
```html
|
||||
<div class="content-box">
|
||||
|
|
@ -126,9 +127,9 @@ Because it is, and you can use flexbox.
|
|||
</div>
|
||||
```
|
||||
|
||||
#### **Offset grid columns**
|
||||
## Offset grid columns
|
||||
|
||||
*"When the screen gets wide enough, offset this 2-column box by 3 grid columns."*
|
||||
"When the screen gets wide enough, offset this 2-column box by 3 grid columns."
|
||||
|
||||
```html
|
||||
<div class="content-box">
|
||||
|
|
@ -140,9 +141,9 @@ Because it is, and you can use flexbox.
|
|||
</div>
|
||||
```
|
||||
|
||||
#### **Be completely lazy**
|
||||
## Be completely lazy
|
||||
|
||||
Never miss another game of foosball. Just let the grid evenly distribute your elements.
|
||||
"Never miss another game of foosball. Just let the grid evenly distribute your elements."
|
||||
|
||||
```html
|
||||
<div class="content-box">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
/*
|
||||
@styleguide Button Set
|
||||
|
||||
<br/>
|
||||
|
||||
We use jQuery UI button set
|
||||
|
||||
<br/>
|
||||
|
||||
```html
|
||||
<div id="radio1" class="ui-buttonset">
|
||||
<input type="radio" id="radio1" name="radio" class="ui-helper-hidden-accessible">
|
||||
|
|
|
|||
|
|
@ -11,15 +11,18 @@
|
|||
/*
|
||||
@styleguide Progress Bar
|
||||
|
||||
<br/>
|
||||
We use jQuery UI progress bar
|
||||
<br/>
|
||||
|
||||
```html
|
||||
|
||||
<a id="animateProgress" href="#" class="Button Button--primary">Click Me</a>
|
||||
<br/><br/>
|
||||
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" style="width: 100%;">
|
||||
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 50%;"></div>
|
||||
</div>
|
||||
```
|
||||
### Test it
|
||||
View progress bar with a <a id="animateProgress" href="#">random number</a>
|
||||
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<%-
|
||||
|
||||
content_for :head, include_common_stylesheets
|
||||
|
||||
-%>
|
||||
<%-
|
||||
@locale = raw I18n.locale.to_json
|
||||
@body_classes ||= []
|
||||
@body_classes << "context-#{@context.asset_string}" if @context
|
||||
yield :pre_html
|
||||
|
||||
-%><!DOCTYPE html>
|
||||
<!--[if gte IE 9 ]><html class="Sg-only ie ie9 scripts-not-loaded" lang=<%= @locale %>> <![endif]-->
|
||||
<!--[if !(IE)]><!--> <html class="Sg-only not-ie scripts-not-loaded" lang=<%= @locale %>> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><%= (yield :page_title).presence || @page_title || t('default_page_title', "Canvas LMS") %></title>
|
||||
<!--[if lte IE 8]> <meta http-equiv=refresh content="0; URL=/ie-8-is-not-supported.html" /> <![endif]-->
|
||||
|
||||
<%= yield :auto_discovery %>
|
||||
<%= yield :head %>
|
||||
<%= yield :meta_tags %>
|
||||
<%= include_custom_meta_tags %>
|
||||
<%= include_css_bundles %>
|
||||
<%= yield :stylesheets %>
|
||||
<%= include_account_css %>
|
||||
<script>
|
||||
// listen for any clicks on links that have href="#" and queue them to be fired on dom ready.
|
||||
function _earlyClick(e){
|
||||
var cur = e.target || e.srcElement;
|
||||
while ( cur && cur.ownerDocument ) {
|
||||
if ( cur.getAttribute('href') == '#' ) {
|
||||
e.preventDefault();
|
||||
_earlyClick.clicks = _earlyClick.clicks || [];
|
||||
_earlyClick.clicks.push(cur);
|
||||
break;
|
||||
}
|
||||
cur = cur.parentNode;
|
||||
}
|
||||
}
|
||||
document.addEventListener('click', _earlyClick);
|
||||
</script>
|
||||
</head>
|
||||
<body class="Sg-only">
|
||||
|
||||
<div id="application">
|
||||
<div id="main" class="Sg-only">
|
||||
<%= yield %>
|
||||
</div>s
|
||||
<%= render :partial => 'layouts/foot', :locals => { :include_common_bundle => true } %>
|
||||
</div> <!-- #application -- this is important to keep since it kicks off some of our js examples -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +1,75 @@
|
|||
<!-- this file is autogenerated from doc/styleguide/template.mustache -->
|
||||
<% jammit_css :styleguide %>
|
||||
<% js_bundle :styleguide %>
|
||||
{{!-- Legacy styleguide layout --}}
|
||||
<% content_for :left_side_custom do %>
|
||||
<ul id="style-guide-nav" class="style-guide-nav">
|
||||
|
||||
{{!-- Navigation --}}
|
||||
|
||||
<header class="Sg-header">
|
||||
<nav class="Sg-header__Navigation">
|
||||
<a href="#" data-sg-category="Sg-Navigation--Style" class="Sg-header__Navigation-item ">Style</a>
|
||||
<a href="#" data-sg-category="Sg-Navigation--Scaffold" class="Sg-header__Navigation-item">Scaffold</a>
|
||||
<a href="#" data-sg-category="Sg-Navigation--Components" class="Sg-header__Navigation-item active">Components</a>
|
||||
<a href="#" data-sg-category="Sg-Navigation--Patterns" class="Sg-header__Navigation-item">Patterns</a>
|
||||
</nav>
|
||||
<nav class="Sg-header__Subnavigation">
|
||||
<section class="Sg-Navigation--Components">
|
||||
<a class="Sg-header__Subnavigation-item" href="#accordion">Accordion</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#autocomplete">Autocomplete</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#cogs_(admin_dropdowns)">Cogs</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#element_toggler">Element Toggler</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#expanding_message_link">Expanding Message Link</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#item_groups">Item Groups</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#item_groups_condensed">Item Groups Condensed</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#modal_dialog">Modals</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#tab_navigation">Tabs</a>
|
||||
</section>
|
||||
<section class="Sg-Navigation--Scaffold isHidden">
|
||||
<a class="Sg-header__Subnavigation-item" href="#form_table">Forms</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#grid">Grid</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#tables">Tables</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#toggle">Toggle</a>
|
||||
</section>
|
||||
<section class="Sg-Navigation--Style isHidden">
|
||||
<a class="Sg-header__Subnavigation-item" href="#colors">Colors</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#buttons">Buttons</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#button_set">Button Set</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#typography">Typography</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#icons">Icons</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#highlights/alerts">Alerts</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#spacing">Spacing</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#border_classes">Borders</a>
|
||||
</section>
|
||||
<section class="Sg-Navigation--Patterns isHidden">
|
||||
<a class="Sg-header__Subnavigation-item" href="#header_bar">Header Bar</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#pills">Pills</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#popovers">Popovers</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#progress_bar">Progress Bar</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#publish_state">Publish State</a>
|
||||
<a class="Sg-header__Subnavigation-item" href="#tour_popups">Tour Popups</a>
|
||||
</section>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{{!-- Code Examples --}}
|
||||
|
||||
<div class="Sg-Container">
|
||||
<div class="Sg-Main">
|
||||
{{#docs}}
|
||||
<li><a href="#{{id}}">{{component}}</a></li>
|
||||
<section class="Sg-Section {{id}}" style="position: relative;">
|
||||
<div class="Sg-Content">
|
||||
<h1 id="{{id}}">{{component}}</h1>
|
||||
|
||||
<div class="sg-src-file-path">{{file}}</div>
|
||||
<div class="grid-row">
|
||||
<div class="col-xs-10 off-xs-1">
|
||||
<article class="Sg-Article">
|
||||
{{{prose}}}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/docs}}
|
||||
</ul>
|
||||
<% end %>
|
||||
<section id="docs" class="styleguide-section__component">
|
||||
{{#docs}}
|
||||
<article id="{{id}}">
|
||||
<h2 class="subTitle--block">{{component}}</h2>
|
||||
<p><small>Defined in <em>{{file}}</em></small></p>
|
||||
{{{prose}}}
|
||||
</article>
|
||||
{{/docs}}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script>{{{dress_code_js}}}</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
0 info it worked if it ends with ok
|
||||
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'compile-sass' ]
|
||||
2 info using npm@1.4.3
|
||||
3 info using node@v0.10.26
|
||||
4 verbose run-script [ 'precompile-sass', 'compile-sass', 'postcompile-sass' ]
|
||||
5 info precompile-sass canvas-lms@0.0.0
|
||||
6 info compile-sass canvas-lms@0.0.0
|
||||
7 verbose unsafe-perm in lifecycle true
|
||||
8 info canvas-lms@0.0.0 Failed to exec compile-sass script
|
||||
9 error canvas-lms@0.0.0 compile-sass: `node script/compile-sass.js`
|
||||
9 error Exit status 1
|
||||
10 error Failed at the canvas-lms@0.0.0 compile-sass script.
|
||||
10 error This is most likely a problem with the canvas-lms package,
|
||||
10 error not with npm itself.
|
||||
10 error Tell the author that this fails on your system:
|
||||
10 error node script/compile-sass.js
|
||||
10 error You can get their info via:
|
||||
10 error npm owner ls canvas-lms
|
||||
10 error There is likely additional logging output above.
|
||||
11 error System Darwin 14.0.0
|
||||
12 error command "node" "/usr/local/bin/npm" "run" "compile-sass"
|
||||
13 error cwd /Users/cpalmer/instructure/canvas-lms
|
||||
14 error node -v v0.10.26
|
||||
15 error npm -v 1.4.3
|
||||
16 error code ELIFECYCLE
|
||||
17 verbose exit [ 1, true ]
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2 (9964) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Canvas Logo 3</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Styles" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Icons" sketch:type="MSArtboardGroup" transform="translate(-13.000000, -13.000000)" fill="#FFFFFF">
|
||||
<g id="Top-Nav" sketch:type="MSLayerGroup">
|
||||
<g id="Styles-Top" sketch:type="MSShapeGroup">
|
||||
<g id="Canvas-Logo-3" transform="translate(13.000000, 13.000000)">
|
||||
<path d="M3.46461476,11.9234443 C3.46461476,10.1601554 2.14126293,8.70756653 0.434625919,8.49777764 C0.150481479,9.5927517 0,10.7408369 0,11.9234443 C0,13.1060516 0.150481479,14.255022 0.434625919,15.3491109 C2.14214811,15.1402072 3.46461476,13.6885035 3.46461476,11.9234443" id="Fill-1"></path>
|
||||
<path d="M5.47309991,10.8399776 C6.07148509,10.8399776 6.55656656,11.3250591 6.55656656,11.9234443 C6.55656656,12.5218294 6.07148509,13.0069109 5.47309991,13.0069109 C4.87471474,13.0069109 4.38963326,12.5218294 4.38963326,11.9234443 C4.38963326,11.3250591 4.87471474,10.8399776 5.47309991,10.8399776" id="Fill-2"></path>
|
||||
<path d="M20.426533,11.9234443 C20.426533,13.6885035 21.75077,15.1402072 23.457407,15.3491109 C23.7406663,14.255022 23.892033,13.1060516 23.892033,11.9234443 C23.892033,10.7408369 23.7406663,9.59186651 23.457407,8.49777764 C21.7498848,8.70845171 20.426533,10.1610406 20.426533,11.9234443" id="Fill-3"></path>
|
||||
<path d="M18.418933,10.8399776 C19.0173182,10.8399776 19.5023997,11.3250591 19.5023997,11.9234443 C19.5023997,12.5218294 19.0173182,13.0069109 18.418933,13.0069109 C17.8205479,13.0069109 17.3354664,12.5218294 17.3354664,11.9234443 C17.3354664,11.3250591 17.8205479,10.8399776 18.418933,10.8399776" id="Fill-4"></path>
|
||||
<path d="M11.9225591,20.43627 C10.1601554,20.43627 8.70756653,21.7605071 8.49689246,23.4671441 C9.5927517,23.7495181 10.7399517,23.8999996 11.9243294,23.8999996 C13.107822,23.8999996 14.2559072,23.7495181 15.3499961,23.4671441 C15.1402072,21.7605071 13.6893887,20.43627 11.9225591,20.43627" id="Fill-5"></path>
|
||||
<path d="M11.9243294,17.3425479 C12.5235998,17.3425479 13.0086813,17.8285145 13.0086813,18.4268997 C13.0086813,19.0261701 12.5235998,19.5112515 11.9243294,19.5112515 C11.3259443,19.5112515 10.8399776,19.0261701 10.8399776,18.4268997 C10.8399776,17.8285145 11.3259443,17.3425479 11.9243294,17.3425479" id="Fill-6"></path>
|
||||
<path d="M11.9243294,3.46549994 C13.6893887,3.46549994 15.1402072,2.14214811 15.3499961,0.432855549 C14.255022,0.152251849 13.107822,0 11.9243294,0 C10.7399517,0 9.5927517,0.152251849 8.49689246,0.432855549 C8.70756653,2.14214811 10.1601554,3.46549994 11.9243294,3.46549994" id="Fill-7"></path>
|
||||
<path d="M11.9243294,4.39140363 C12.5218294,4.39140363 13.0069109,4.87559992 13.0069109,5.4739851 C13.0069109,6.07148509 12.5218294,6.55656656 11.9243294,6.55656656 C11.3268294,6.55656656 10.841748,6.07148509 10.841748,5.4739851 C10.841748,4.87559992 11.3268294,4.39140363 11.9243294,4.39140363" id="Fill-8"></path>
|
||||
<path d="M17.931196,17.9303108 C16.6848553,19.1775367 16.5936812,21.1382219 17.6497071,22.4934404 C19.6466849,21.3179145 21.3170293,19.6457997 22.4934404,17.6488219 C21.1382219,16.592796 19.1775367,16.6857405 17.931196,17.9303108" id="Fill-9"></path>
|
||||
<path d="M16.511359,15.4270072 C17.1097442,15.4270072 17.5939405,15.9120886 17.5939405,16.5104738 C17.5939405,17.108859 17.1097442,17.5930553 16.511359,17.5930553 C15.9129738,17.5930553 15.4278923,17.108859 15.4278923,16.5104738 C15.4278923,15.9120886 15.9129738,15.4270072 16.511359,15.4270072" id="Fill-10"></path>
|
||||
<path d="M5.93605176,5.93605176 C7.18150729,4.68971104 7.27356655,2.7281407 6.21665546,1.3729222 C4.2205629,2.55110366 2.55021848,4.22144808 1.3729222,6.21754064 C2.7281407,7.27445174 4.68971104,7.18150729 5.93605176,5.93605176" id="Fill-11"></path>
|
||||
<path d="M7.35588877,6.27330731 C7.95427395,6.27330731 8.43935542,6.75838878 8.43935542,7.35677396 C8.43935542,7.95515913 7.95427395,8.44024061 7.35588877,8.44024061 C6.7575036,8.44024061 6.27242212,7.95515913 6.27242212,7.35677396 C6.27242212,6.75838878 6.7575036,6.27330731 7.35588877,6.27330731" id="Fill-12"></path>
|
||||
<path d="M17.9241145,5.92454435 C19.1704552,7.17088507 21.1311404,7.26205914 22.4863589,6.20603323 C21.3099478,4.20905549 19.6396034,2.53871107 17.6426256,1.36229998 C16.5865997,2.71751848 16.6777738,4.67820363 17.9241145,5.92454435" id="Fill-13"></path>
|
||||
<path d="M16.5042775,6.26091471 C17.1017775,6.26091471 17.586859,6.74599619 17.586859,7.34438136 C17.586859,7.94276654 17.1017775,8.42696283 16.5042775,8.42696283 C15.9058923,8.42696283 15.4208109,7.94276654 15.4208109,7.34438136 C15.4208109,6.74599619 15.9058923,6.26091471 16.5042775,6.26091471" id="Fill-14"></path>
|
||||
<path d="M5.92985546,17.9179182 C4.68351474,16.6715775 2.72282959,16.5804034 1.3667259,17.6355442 C2.54402218,19.6325219 4.2143666,21.3046367 6.21134435,22.4810478 C7.26825544,21.1258293 7.17708137,19.1651441 5.92985546,17.9179182" id="Fill-15"></path>
|
||||
<path d="M7.34969248,15.4154998 C7.94807765,15.4154998 8.43315912,15.9005812 8.43315912,16.4989664 C8.43315912,17.0964664 7.94807765,17.5815479 7.34969248,17.5815479 C6.7513073,17.5815479 6.26622583,17.0964664 6.26622583,16.4989664 C6.26622583,15.9005812 6.7513073,15.4154998 7.34969248,15.4154998" id="Fill-16"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
Loading…
Reference in New Issue