├── src ├── bin │ └── .keep └── scss │ ├── theme │ └── .keep │ ├── components │ ├── .keep │ ├── _footer.scss │ ├── _sidebar.scss │ └── _navbar.scss │ ├── tools │ ├── function │ │ ├── _strip-unit.scss │ │ ├── _unitless.scss │ │ └── _functions.scss │ └── mixin │ │ ├── _border_radius.scss │ │ ├── _space.scss │ │ ├── _vertical-rhythm.scss │ │ ├── _font-size.scss │ │ ├── _grid.scss │ │ ├── _clearfix.scss │ │ ├── _animations.scss │ │ ├── _background-triangle.scss │ │ ├── _mixins.scss │ │ ├── _type.scss │ │ └── _shadows.scss │ ├── settings │ ├── _default.scss │ └── _settings.scss │ └── theme.scss ├── views ├── .keep ├── editor.pug ├── settings.pug ├── layout.pug └── includes │ └── sprite.pug ├── app ├── models │ ├── .keep │ └── sidebar.js ├── controller │ ├── sidebar.js │ └── config.js ├── config.json └── routes.js ├── assets ├── css │ ├── .keep │ ├── theme.min.css │ ├── utilities.0.12.0.min.css │ ├── theme.css │ ├── theme.min.css.map │ ├── utilities.0.12.0.css │ └── utilities.0.12.0.min.css.map ├── img │ └── .keep └── js │ ├── .keep │ └── script.js ├── tests ├── all │ ├── js │ │ └── .keep │ ├── img │ │ └── .keep │ ├── scss │ │ ├── components │ │ │ ├── .keep │ │ │ ├── _paging.scss │ │ │ ├── _menu.scss │ │ │ ├── _toolbar.scss │ │ │ ├── _forum.scss │ │ │ ├── _list.scss │ │ │ └── _topic.scss │ │ ├── tools │ │ │ ├── function │ │ │ │ ├── _strip-unit.scss │ │ │ │ ├── _unitless.scss │ │ │ │ └── _functions.scss │ │ │ └── mixin │ │ │ │ ├── _border_radius.scss │ │ │ │ ├── _space.scss │ │ │ │ ├── _vertical-rhythm.scss │ │ │ │ ├── _font-size.scss │ │ │ │ ├── _grid.scss │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _animations.scss │ │ │ │ ├── _background-triangle.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _type.scss │ │ │ │ └── _shadows.scss │ │ ├── utilities │ │ │ ├── _resets.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _print.scss │ │ │ └── _visability.scss │ │ ├── generic │ │ │ ├── _box-sizing.scss │ │ │ └── reset │ │ │ │ ├── _groupings.scss │ │ │ │ ├── _tables.scss │ │ │ │ ├── _other.scss │ │ │ │ ├── _type.scss │ │ │ │ ├── _global.scss │ │ │ │ └── _forms.scss │ │ ├── base │ │ │ ├── _global.scss │ │ │ ├── _links.scss │ │ │ ├── _type.scss │ │ │ ├── _table.scss │ │ │ └── _code.scss │ │ ├── objects │ │ │ ├── _icon.scss │ │ │ ├── _tag.scss │ │ │ ├── _grid.scss │ │ │ ├── _button.scss │ │ │ └── _col.scss │ │ ├── settings │ │ │ ├── _default.scss │ │ │ └── _settings.scss │ │ ├── utilities.scss │ │ └── core.scss │ ├── templates │ │ ├── layout │ │ │ └── layout.twig │ │ ├── topic.twig │ │ ├── includes │ │ │ └── list-item.twig │ │ └── forum.twig │ └── css │ │ ├── utilities.0.12.0.min.css │ │ ├── utilities.0.12.0.css │ │ └── utilities.0.12.0.min.css.map └── prosilver │ ├── img │ └── .keep │ ├── js │ └── .keep │ ├── template │ └── .keep │ └── scss │ ├── theme │ └── _temp.scss │ ├── components │ └── _temp.scss │ ├── objects │ └── _action-bar.scss │ └── theme.scss ├── .gitignore ├── .travis.yml ├── .editorconfig ├── README.md ├── app.js ├── LICENSE ├── package.json ├── gulpfile.js └── .postcss-sorting.json /src/bin/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /views/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/js/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/all/js/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/theme/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/all/img/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/components/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/prosilver/img/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/prosilver/js/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/all/scss/components/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/prosilver/template/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/prosilver/scss/theme/_temp.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/prosilver/scss/components/_temp.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies Directory 2 | node_modules -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "7" -------------------------------------------------------------------------------- /views/editor.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block content 4 | .sidebar-app 5 | .c-sidebar 6 | ul.c-sidebar-menu 7 | sidebar-list(v-for="item in sidebarList", v-bind:sidebar="item") -------------------------------------------------------------------------------- /app/controller/sidebar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var model = require('../models/sidebar'); 4 | 5 | var sidebar = module.exports = {}; 6 | 7 | sidebar.getData = function () { 8 | return model.get(); 9 | }; 10 | -------------------------------------------------------------------------------- /views/settings.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block content 4 | .app 5 | .wrap 6 | .o-container 7 | h2.c-config-head Settings 8 | form 9 | config-list(v-for="item in configList", v-bind:config="item") 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = tab 7 | indent_size = 4 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /app/config.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name": "Root", 5 | "setting": "../test/" 6 | }, 7 | 8 | { 9 | "id": 2, 10 | "name": "Globals", 11 | "setting": "../test/all/" 12 | }, 13 | 14 | { 15 | "id": 3, 16 | "name": "Current Theme", 17 | "setting": "../test/prosilver/" 18 | } 19 | ] -------------------------------------------------------------------------------- /src/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @component: Footer 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | //------------------------------------------------------------------------------ 7 | 8 | // 9 | // @settings 10 | 11 | // Layout Variables 12 | 13 | 14 | // 15 | // @scss 16 | .c-footer { 17 | text-align: center; 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/tools/function/_strip-unit.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Strip Units 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // A function for striping a value of units 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | // 11 | // @scss 12 | @function strip-units($number) { 13 | @return $number / ($number * 0 + 1); 14 | } 15 | -------------------------------------------------------------------------------- /tests/all/scss/tools/function/_strip-unit.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Strip Units 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // A function for striping a value of units 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | // 11 | // @scss 12 | @function strip-units($number) { 13 | @return $number / ($number * 0 + 1); 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/tools/function/_unitless.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Unitless 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // A function for returning unitless numer based on root font-size 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | // 11 | // @scss 12 | @function unitless($line-height, $font-size: $default-font-size) { 13 | @return $line-height / $font-size; 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/tools/mixin/_border_radius.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Border Radius 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // 7 | // Helper to make only top, bottom radius 8 | // 9 | //------------------------------------------------------------------------------ 10 | 11 | // 12 | // @scss 13 | @mixin border-radius($type, $radius) { 14 | border-#{$type}-left-radius: $radius; 15 | border-#{$type}-right-radius: $radius; 16 | } 17 | -------------------------------------------------------------------------------- /tests/all/scss/tools/function/_unitless.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Unitless 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // A function for returning unitless numer based on root font-size 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | // 11 | // @scss 12 | @function unitless($line-height, $font-size: $default-font-size) { 13 | @return $line-height / $font-size; 14 | } 15 | -------------------------------------------------------------------------------- /tests/all/scss/tools/mixin/_border_radius.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Border Radius 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // 7 | // Helper to make only top, bottom radius 8 | // 9 | //------------------------------------------------------------------------------ 10 | 11 | // 12 | // @scss 13 | @mixin border-radius($type, $radius) { 14 | border-#{$type}-left-radius: $radius; 15 | border-#{$type}-right-radius: $radius; 16 | } 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Styleguide Designer 2 | [![Build Status](https://travis-ci.org/sahil505/StyleGuideDesigner.svg?branch=master)](https://travis-ci.org/sahil505/StyleGuideDesigner) 3 | 4 | ## What is it 5 | A Styleguide Driven Development System for Creating, Managing, customizing, & editing themes for PHPBB. GSoC 2017 project (https://www.phpbb.com/development/gsoc/ideas/#styleguide) 6 | 7 | ## What can you do with it 8 | Dynamically build & manage components in styleguides. Styleguides provide the ability to create/view/edit individual components directly in the documentation using (CSS/SCSS/PUG/JS). 9 | -------------------------------------------------------------------------------- /src/scss/tools/mixin/_space.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Space 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // Space elements by an amount based on your magic number. Pass in the property 7 | // to be indented as a paramater 8 | // 9 | // Based on Typeset 10 | // 11 | //------------------------------------------------------------------------------ 12 | 13 | // 14 | // @scss 15 | @mixin space($property) { 16 | #{$property}: 2 * $default-line-height; 17 | } 18 | -------------------------------------------------------------------------------- /tests/all/scss/tools/mixin/_space.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Space 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // Space elements by an amount based on your magic number. Pass in the property 7 | // to be indented as a paramater 8 | // 9 | // Based on Typeset 10 | // 11 | //------------------------------------------------------------------------------ 12 | 13 | // 14 | // @scss 15 | @mixin space($property) { 16 | #{$property}: 2 * $default-line-height; 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/tools/mixin/_vertical-rhythm.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Vertical Rhythm 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // A lot of elements need to share some declarations (mainly for 7 | // vertical rhythm), so we `extend` some silent classes. 8 | // 9 | // based on Typeset 10 | // 11 | //------------------------------------------------------------------------------ 12 | 13 | // 14 | // @scss 15 | @mixin vertical-rhythm { 16 | margin: 0 0 $default-line-height; 17 | } 18 | -------------------------------------------------------------------------------- /tests/all/scss/tools/mixin/_vertical-rhythm.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Vertical Rhythm 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // A lot of elements need to share some declarations (mainly for 7 | // vertical rhythm), so we `extend` some silent classes. 8 | // 9 | // based on Typeset 10 | // 11 | //------------------------------------------------------------------------------ 12 | 13 | // 14 | // @scss 15 | @mixin vertical-rhythm { 16 | margin: 0 0 $default-line-height; 17 | } 18 | -------------------------------------------------------------------------------- /tests/all/scss/utilities/_resets.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // #utilities: Resets 3 | //------------------------------------------------------------------------------ 4 | // #description 5 | // 6 | // Suppress the focus outline on elements that cannot be accessed via keyboard. 7 | // This prevents an unwanted focus outline from appearing around elements that 8 | // might still respond to pointer events. 9 | // 10 | //------------------------------------------------------------------------------ 11 | 12 | // 13 | // #scss 14 | 15 | [tabindex="-1"]:focus { 16 | outline: none !important; 17 | } 18 | -------------------------------------------------------------------------------- /tests/all/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // #generic: Box Sizing 3 | //------------------------------------------------------------------------------ 4 | // #description: 5 | // 6 | // Set the global `box-sizing` state to `border-box`. 7 | // 8 | // css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 9 | // paulirish.com/2012/box-sizing-border-box-ftw 10 | // 11 | //------------------------------------------------------------------------------ 12 | 13 | // 14 | // #scss 15 | 16 | html { 17 | box-sizing: border-box; 18 | } 19 | 20 | * { 21 | &, 22 | &:before, 23 | &:after { 24 | box-sizing: inherit; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/tools/mixin/_font-size.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Font-size 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // 7 | // Typecsset Mixins 8 | // 9 | // Quickly generate a font-size in rems, with a pixel fallback, based on the 10 | // value we pass into the mixin 11 | // 12 | //------------------------------------------------------------------------------ 13 | 14 | // 15 | // @scss 16 | @mixin font-size($font-size, $line-height: true) { 17 | font-size: rem($font-size); 18 | @if $line-height == true { 19 | line-height: ceil($font-size / $default-line-height) * ($default-line-height / $font-size); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tests/all/scss/tools/mixin/_font-size.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // @tool: Font-size 3 | //------------------------------------------------------------------------------ 4 | // @description 5 | // 6 | // 7 | // Typecsset Mixins 8 | // 9 | // Quickly generate a font-size in rems, with a pixel fallback, based on the 10 | // value we pass into the mixin 11 | // 12 | //------------------------------------------------------------------------------ 13 | 14 | // 15 | // @scss 16 | @mixin font-size($font-size, $line-height: true) { 17 | font-size: rem($font-size); 18 | @if $line-height == true { 19 | line-height: ceil($font-size / $default-line-height) * ($default-line-height / $font-size); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var express = require('express'); 5 | var bodyParser = require('body-parser'); 6 | 7 | var app = express(); 8 | 9 | var routes = require('./app/routes'); 10 | 11 | // All environments 12 | app.set('port', process.env.PORT || 3000); 13 | app.set('views', './views'); 14 | app.set('view engine', 'pug'); 15 | 16 | // Set static path 17 | app.use(express.static(path.join(__dirname, 'assets'))); 18 | 19 | app.use(bodyParser.json()); 20 | 21 | app.use('/', routes); 22 | 23 | // Express Server Setup 24 | app.listen(app.get('port'), function (err) { 25 | if (err) { 26 | console.log('Express Server Error!'); 27 | } else { 28 | console.log('Express server listening on port ' + app.get('port')); 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /tests/all/scss/generic/reset/_groupings.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // #generic: Groupings 3 | //------------------------------------------------------------------------------ 4 | // #description: 5 | // 6 | //------------------------------------------------------------------------------ 7 | 8 | // 9 | // #scss 10 | 11 | // 12 | // 1. Reset browser default `rem`s 13 | // 2. code should wrap not cause horizontal scrolling 14 | // 3. Normalize v4 removed this property, causing `
` content to break out
15 | //    of wrapping code snippets
16 | //
17 | pre {
18 | 	@include vertical-rhythm(); // [1]
19 | 	white-space: pre-wrap; // [2]
20 | 	overflow: auto; // [3]
21 | }
22 | 
23 | figure {
24 | 	@include vertical-rhythm();
25 | }
26 | 


--------------------------------------------------------------------------------
/app/controller/config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var config = module.exports = {};
 4 | 
 5 | var fs = require('fs');
 6 | 
 7 | config.data = [];
 8 | 
 9 | config.update = function (req) {
10 | 	config.get();
11 | 	config.set(req);
12 | 	config.write();
13 | };
14 | 
15 | config.get = function () {
16 | 	var data = require('../config.json');
17 | 
18 | 	config.data = data;
19 | 	return data;
20 | };
21 | 
22 | config.set = function (req) {
23 | 	var newConfig = {
24 | 		id: req.body.id,
25 | 		name: req.body.name,
26 | 		setting: req.body.setting
27 | 	};
28 | 	config.data[newConfig.id - 1] = newConfig;
29 | };
30 | 
31 | config.write = function () {
32 | 	// Note: data has to be a string, before sending it to the server
33 | 	var data = JSON.stringify(config.get());
34 | 	fs.writeFile('app/config.json', data, 'utf8');
35 | };
36 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_grid.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Grid
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // Mixin for generating the grid col widths
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $grid-gutter: $default-grid-gutter !default;
15 | 
16 | // Breakpoints sizes are global
17 | 
18 | //
19 | // @scss
20 | 
21 | @mixin col-width($w: 0) {
22 | 	flex: 0 0 percentage($w / 12);
23 | 	width: percentage($w / 12);
24 | }
25 | 
26 | @mixin pull($w: 0) {
27 | 	right: percentage($w / 12);
28 | }
29 | 
30 | @mixin push($w: 0) {
31 | 	left: percentage($w / 12);
32 | }
33 | 
34 | @mixin offset($w: 0) {
35 | 	margin-left: percentage($w / 12);
36 | }
37 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_grid.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Grid
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // Mixin for generating the grid col widths
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $grid-gutter: $default-grid-gutter !default;
15 | 
16 | // Breakpoints sizes are global
17 | 
18 | //
19 | // @scss
20 | 
21 | @mixin col-width($w: 0) {
22 | 	flex: 0 0 percentage($w / 12);
23 | 	width: percentage($w / 12);
24 | }
25 | 
26 | @mixin pull($w: 0) {
27 | 	right: percentage($w / 12);
28 | }
29 | 
30 | @mixin push($w: 0) {
31 | 	left: percentage($w / 12);
32 | }
33 | 
34 | @mixin offset($w: 0) {
35 | 	margin-left: percentage($w / 12);
36 | }
37 | 


--------------------------------------------------------------------------------
/tests/all/scss/base/_global.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #base: Global
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | // High-level, page-level styling.
 7 | //
 8 | // 1. Set the default `font-size` and `line-height` for the entire project,
 9 | //    sourced from our default variables. The `font-size` is calculated to exist
10 | //    in rems, the `line-height` is calculated to exist unitlessly.
11 | //
12 | //------------------------------------------------------------------------------
13 | 
14 | 
15 | //
16 | // #scss
17 | 
18 | html {
19 | 	font-family: $default-font;
20 | 	font-size: $default-font-size; // [1]
21 | 	font-weight: 400;
22 | 	line-height: unitless($default-line-height); // [1]
23 | 	background-color: $default-body-bg;
24 | 	color: $default-body-color;
25 | }
26 | 


--------------------------------------------------------------------------------
/tests/all/scss/utilities/_clearfix.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #utilities: Clearfix
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | // Clearfix: contain floats
 7 | //
 8 | // For modern browsers
 9 | // 1. The space content is one way to avoid an Opera bug when the
10 | //    `contenteditable` attribute is included anywhere else in the document.
11 | //    Otherwise it causes space to appear at the top and bottom of elements
12 | //    that receive the `clearfix` class.
13 | // 2. The use of `table` rather than `block` is only necessary if using
14 | //    `:before` to contain the top-margins of child elements.
15 | //
16 | //------------------------------------------------------------------------------
17 | 
18 | //
19 | // #scss
20 | 
21 | .u-clearfix {
22 | 	@include clearfix;
23 | }
24 | 


--------------------------------------------------------------------------------
/tests/all/scss/objects/_icon.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #object: Icon
 3 | //------------------------------------------------------------------------------
 4 | // #description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #settings
10 | $icon-size: 24px !default;
11 | $icon-spacing: 8px !default;
12 | 
13 | //
14 | // #scss
15 | 
16 | //
17 | // Most commonly we want specific sizing and alignment for icons in links
18 | // as such we target tthe most common approach to including icons svgs.
19 | // However a modifier is available if you are usinf icon fonts
20 | //
21 | 
22 | .o-icon {
23 | 	vertical-align: middle;
24 | 	width: $icon-size;
25 | 	height: $icon-size;
26 | 	margin-right: $icon-spacing;
27 | 
28 | 	&.fa {
29 | 		font-size: $icon-size;
30 | 		vertical-align: baseline;
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_clearfix.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Clearfix
 3 | //------------------------------------------------------------------------------
 4 | // @description:
 5 | //
 6 | // Clearfix: contain floats
 7 | //
 8 | // For modern browsers
 9 | // 1. The space content is one way to avoid an Opera bug when the
10 | //    `contenteditable` attribute is included anywhere else in the document.
11 | //    Otherwise it causes space to appear at the top and bottom of elements
12 | //    that receive the `clearfix` class.
13 | // 2. The use of `table` rather than `block` is only necessary if using
14 | //    `:before` to contain the top-margins of child elements.
15 | //
16 | //------------------------------------------------------------------------------
17 | 
18 | //
19 | // @scss
20 | @mixin clearfix {
21 | 	&:after {
22 | 		display: table; // [2]
23 | 		clear: both;
24 | 		content: " "; // [1]
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_clearfix.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Clearfix
 3 | //------------------------------------------------------------------------------
 4 | // @description:
 5 | //
 6 | // Clearfix: contain floats
 7 | //
 8 | // For modern browsers
 9 | // 1. The space content is one way to avoid an Opera bug when the
10 | //    `contenteditable` attribute is included anywhere else in the document.
11 | //    Otherwise it causes space to appear at the top and bottom of elements
12 | //    that receive the `clearfix` class.
13 | // 2. The use of `table` rather than `block` is only necessary if using
14 | //    `:before` to contain the top-margins of child elements.
15 | //
16 | //------------------------------------------------------------------------------
17 | 
18 | //
19 | // @scss
20 | @mixin clearfix {
21 | 	&:after {
22 | 		display: table; // [2]
23 | 		clear: both;
24 | 		content: " "; // [1]
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/app/routes.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var	express = require('express');
 4 | var	config = require('./controller/config');
 5 | var	sidebar = require('./controller/sidebar');
 6 | 
 7 | var	router = express.Router();
 8 | 
 9 | // Route to UPDATE the config
10 | router.post('/settings/config', function (req, res) {
11 | 	req.params.update = config.update(req);
12 | 	res.send(req.params.update);
13 | });
14 | 
15 | // Route to READ the config
16 | router.get('/settings/config', function (req, res) {
17 | 	req.params.fetch = config.get();
18 | 	res.send(req.params.fetch);
19 | });
20 | 
21 | // Render settings page
22 | router.get('/settings', function (req, res) {
23 | 	res.render('settings');
24 | });
25 | 
26 | // Render editors page
27 | router.get('/editor', function (req, res) {
28 | 	res.render('editor');
29 | });
30 | 
31 | // Route to READ the file
32 | router.get('/editor/sidebar', function (req, res) {
33 | 	req.params.fetch = sidebar.getData();
34 | 	res.send(req.params.fetch);
35 | });
36 | 
37 | module.exports = router;
38 | 


--------------------------------------------------------------------------------
/assets/css/theme.min.css:
--------------------------------------------------------------------------------
1 | .c-navbar{display:flex;overflow:hidden;flex-direction:row;flex-wrap:nowrap}.c-navbar-logo{font-size:1.25rem;font-weight:500;line-height:1.6;line-height:1;letter-spacing:.02em;float:left;flex:1;margin-bottom:0;padding:1rem}.c-navbar-menu{margin:0;padding:0;list-style-type:none}.c-navbar-menu-item{display:flex;float:right}.c-navbar-menu-link{font-size:1rem;line-height:3.5;text-decoration:none;color:#757575;display:inline-block;padding:0 1rem}.c-navbar-menu-link:hover{color:#258cf4}.c-navbar-menu-text{padding:.5rem}.c-navbar-icon{margin-right:0}.c-footer{text-align:center}.c-sidebar{border:1px solid transparent;border-right-color:#e7e7e7;display:flex;overflow:hidden;flex-wrap:nowrap;width:16%}.c-sidebar-menu{margin:0;padding:0;list-style-type:none}.c-sidebar-menu-item{display:flex}.c-sidebar-menu-link{font-size:1rem;line-height:3.5;text-decoration:none;color:#757575;display:block;padding:0 1rem}.c-sidebar-menu-link:hover{color:#258cf4}.c-sidebar-menu-text{padding:.5rem}
2 | /*# sourceMappingURL=theme.min.css.map */
3 | 


--------------------------------------------------------------------------------
/tests/all/scss/generic/reset/_tables.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #generic: Tables
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #scss
10 | 
11 | //
12 | // 1. Reset for nesting within parents with `background-color`.
13 | // 2. No longer part of Normalize since v4
14 | //
15 | table {
16 | 	@include vertical-rhythm();
17 | 	background-color: transparent; // [1]
18 | 	width: 100%;
19 | 	border-spacing: 0;
20 | 	border-collapse: collapse; // [2]
21 | }
22 | 
23 | caption {
24 | 	text-align: left;
25 | 	color: $default-gray;
26 | 	margin: 0;
27 | 	padding: ($default-line-height / 3) 0;
28 | 	caption-side: bottom;
29 | }
30 | 
31 | //
32 | // Centered by default, but left-aligned to match the `td`s below.
33 | //
34 | th {
35 | 	text-align: left;
36 | }
37 | 
38 | th,
39 | td {
40 | 	margin: 0;
41 | 	padding: ($default-line-height / 2);
42 | }
43 | 


--------------------------------------------------------------------------------
/tests/all/scss/objects/_tag.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #object: Tag
 3 | //------------------------------------------------------------------------------
 4 | // #description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #settings
10 | 
11 | // Layout Variables
12 | $tag-spacing: 8px !default;
13 | $tag-border-radius: $default-border-radius !default;
14 | 
15 | // Theme Variables
16 | $tag-background-color: $yellow-100 !default;
17 | $tag-color: $black-54 !default;
18 | 
19 | //
20 | // #scss
21 | 
22 | .o-tag {
23 | 	text-align: center;
24 | 	vertical-align: middle;
25 | 	background-color: $tag-background-color;
26 | 	border-radius: $tag-border-radius;
27 | 	color: $tag-color;
28 | 	display: inline-block;
29 | 	margin: 0 $tag-spacing 0 0;
30 | 	padding: ($tag-spacing / 4) $tag-spacing;
31 | 
32 | 	// Empty tags collapse automatically
33 | 	&:empty {
34 | 		display: none;
35 | 	}
36 | 	@media (min-width: $bp-md) {
37 | 		white-space: nowrap;
38 | 	}
39 | }
40 | 


--------------------------------------------------------------------------------
/app/models/sidebar.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var model = module.exports = {};
 4 | var fs = require('fs');
 5 | 
 6 | model.newData = [];
 7 | 
 8 | // Logic to read an array of files inside a directory
 9 | model.get = function () {
10 | 	var allData = fs.readdirSync('tests/all/scss');
11 | 	var prosilverData = fs.readdirSync('tests/prosilver/scss');
12 | 	var localData = model.newData;
13 | 	for (var i = 0; i < allData.length; i++) {
14 | 		if (allData[i] === 'base' || allData[i] === 'settings' || allData[i] === 'objects' || allData[i] === 'components') {
15 | 			localData.push(allData[i]);
16 | 		}
17 | 	}
18 | 	localData.push('--------------');
19 | 	for (var j = 0; j < prosilverData.length; j++) {
20 | 		if (prosilverData[j] === 'theme' || prosilverData[j] === 'components' || prosilverData[j] === 'objects') {
21 | 			localData.push(prosilverData[j]);
22 | 		}
23 | 	}
24 | 	var swap = localData[1];
25 | 	localData[1] = localData[3];
26 | 	localData[3] = swap;
27 | 
28 | 	var temp = localData[0];
29 | 	localData[0] = localData[1];
30 | 	localData[1] = temp;
31 | 
32 | 	return localData;
33 | };
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/scss/components/_sidebar.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Sidebar
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | 
11 | // Layout Variables
12 | 
13 | 
14 | // Theme Variables
15 | $menu-link-color: $black-54 !default;
16 | $menu-link-hover-color: $default-action-color-hover !default;
17 | 
18 | 
19 | //
20 | // @scss
21 | .c-sidebar {
22 | 	overflow: hidden;
23 | 	display: flex;
24 | 	flex-wrap: nowrap;
25 | 	width: 16%;
26 | 	border: 1px solid transparent;
27 | 	border-right-color: #e7e7e7;
28 | 
29 | 	&-menu {
30 | 		list-style-type: none;
31 | 		margin: 0;
32 | 		padding: 0;
33 | 	}
34 | 
35 | 	&-menu-item {
36 | 		display: flex;
37 | 	}	
38 | 
39 | 	&-menu-link {
40 | 		display: block;
41 | 		font-size: 16px;
42 | 		line-height: 3.5;
43 | 		text-decoration: none;
44 | 		color: $menu-link-color;
45 | 		padding: 0 16px;
46 | 
47 | 		&:hover {
48 | 			color: $menu-link-hover-color;
49 | 		}
50 | 	}
51 | 
52 | 	&-menu-text {
53 | 		padding: 8px;
54 | 	}
55 | }
56 | 


--------------------------------------------------------------------------------
/tests/all/templates/layout/layout.twig:
--------------------------------------------------------------------------------
 1 | {# layout.twig #}
 2 | 
 3 | 
 4 | 	
 5 | 		
 6 | 		
 7 | 		
 8 | 
 9 | 		
10 | 		
11 | 		
12 | 		
13 | 		
36 | 	
37 | 	
38 | 		{% include '../includes/imageset.twig' %}
39 | 
40 | 		

41 | 			

42 | 				{% block component %}{% endblock %}
43 | 
44 | 				{% include '../includes/icons.twig' %}
45 | 			

46 | 		

47 | 	
48 | 
49 | 


--------------------------------------------------------------------------------
/tests/all/scss/generic/reset/_other.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #generic: Other
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #scss
10 | 
11 | //
12 | // Images
13 | // -----------------------------------------------------------------------------
14 | //
15 | // 1. Fluid images for responsive purposes.
16 | // 2. Offset `alt` text from surrounding copy.
17 | // 3. Setting `vertical-align` removes the whitespace that appears under `img`
18 | //    elements when they are dropped into a page as-is. Safer alternative to
19 | //    using `display: block;`.
20 | // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s
21 | //    not make the image fluid.
22 | //
23 | img {
24 | 	font-style: italic; // [2]
25 | 	vertical-align: middle; // [3]
26 | 	max-width: 100%; // [1]
27 | 
28 | 	&[width],
29 | 	&[height] {
30 | 		max-width: none; // [4]
31 | 	}
32 | }
33 | 
34 | //
35 | // A better looking default horizontal rule
36 | //
37 | hr {
38 | 	@include vertical-rhythm();
39 | 	border: 0;
40 | 	border-top: $default-border-size solid $default-gray;
41 | 	display: block;
42 | 	height: 1px;
43 | 	padding: 0;
44 | }
45 | 


--------------------------------------------------------------------------------
/tests/all/scss/components/_paging.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Paging
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | 
11 | // Layout Variables
12 | $paging-spacing: 8px !default;
13 | $paging-border-radius: $default-border-radius !default;
14 | $paging-icon-size: 24px !default;
15 | 
16 | // Theme Variables
17 | $paging-link-background-hover-color: $default-action-bg-hover !default;
18 | 
19 | 
20 | //
21 | // @scss
22 | .c-paging {
23 | 	display: flex;
24 | 	margin: 0;
25 | 	padding: 0;
26 | 	list-style: none;
27 | 	align-content: center;
28 | 
29 | 	&-item {
30 | 		margin: 0;
31 | 	}
32 | 
33 | 	&-link {
34 | 		font-size: 18px;
35 | 		line-height: (30 / 18);
36 | 		border-radius: $paging-border-radius;
37 | 		margin: 0;
38 | 		padding: ($paging-spacing / 2) $paging-spacing;
39 | 
40 | 		&:hover {
41 | 			text-decoration: none;
42 | 			background: $paging-link-background-hover-color;
43 | 		}
44 | 
45 | 		&-icon {
46 | 			width: $paging-icon-size;
47 | 			height: $paging-icon-size;
48 | 			margin: 0;
49 | 		}
50 | 	}
51 | 
52 | 	&-item:first-of-type .c-paging-link,
53 | 	&-item:last-of-type .c-paging-link {
54 | 		padding: ($paging-spacing / 2);
55 | 	}
56 | }
57 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_animations.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Animations
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
11 | $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
12 | $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
13 | 
14 | $default-animation-curve: $animation-curve-fast-out-slow-in !default;
15 | 
16 | //
17 | // @scss
18 | @mixin material-animation-fast-out-slow-in($duration: 0.2s) {
19 | 	transition-timing-function: $animation-curve-fast-out-slow-in;
20 | 	transition-duration: $duration;
21 | }
22 | 
23 | @mixin material-animation-linear-out-slow-in($duration: 0.2s) {
24 | 	transition-timing-function: $animation-curve-linear-out-slow-in;
25 | 	transition-duration: $duration;
26 | }
27 | 
28 | @mixin material-animation-fast-out-linear-in($duration: 0.2s) {
29 | 	transition-timing-function: $animation-curve-fast-out-linear-in;
30 | 	transition-duration: $duration;
31 | }
32 | 
33 | @mixin material-animation-default($duration: 0.2s) {
34 | 	transition-timing-function: $animation-curve-default;
35 | 	transition-duration: $duration;
36 | }
37 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_background-triangle.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Backround Triangle
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // Adds a downward-facing triangle as a background image to an element.
 7 | // The image is formatted as an SVG, making it easy to change the color.
 8 | // Because Internet Explorer doesn't support encoded SVGs as background images,
 9 | // a fallback is also included.
10 | //
11 | //------------------------------------------------------------------------------
12 | 
13 | //
14 | // @scss
15 | @mixin background-triangle($color: $black) {
16 | 	/* stylelint-disable string-quotes */
17 | 	background-image: url('data:image/svg+xml;utf8,');
18 | 	/* stylelint-enable string-quotes */
19 | 	@media screen and (min-width: 0\0) {
20 | 		/* stylelint-disable string-quotes */
21 | 		background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');
22 | 		/* stylelint-enable string-quotes */
23 | 	}
24 | }
25 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_animations.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Animations
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
11 | $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
12 | $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
13 | 
14 | $default-animation-curve: $animation-curve-fast-out-slow-in !default;
15 | 
16 | //
17 | // @scss
18 | @mixin material-animation-fast-out-slow-in($duration: 0.2s) {
19 | 	transition-timing-function: $animation-curve-fast-out-slow-in;
20 | 	transition-duration: $duration;
21 | }
22 | 
23 | @mixin material-animation-linear-out-slow-in($duration: 0.2s) {
24 | 	transition-timing-function: $animation-curve-linear-out-slow-in;
25 | 	transition-duration: $duration;
26 | }
27 | 
28 | @mixin material-animation-fast-out-linear-in($duration: 0.2s) {
29 | 	transition-timing-function: $animation-curve-fast-out-linear-in;
30 | 	transition-duration: $duration;
31 | }
32 | 
33 | @mixin material-animation-default($duration: 0.2s) {
34 | 	transition-timing-function: $animation-curve-default;
35 | 	transition-duration: $duration;
36 | }
37 | 


--------------------------------------------------------------------------------
/src/scss/components/_navbar.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Navbar
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | 
11 | // Layout Variables
12 | $navbar-spacing: 16px !default;
13 | 
14 | 
15 | // Theme Variables
16 | $menu-link-color: $black-54 !default;
17 | $menu-link-hover-color: $default-action-color-hover !default;
18 | 
19 | 
20 | //
21 | // @scss
22 | .c-navbar {
23 | 	overflow: hidden;
24 | 	display: flex;
25 | 	flex-direction: row;
26 | 	flex-wrap: nowrap;
27 | 
28 | 	&-logo {
29 | 		@include type(title);
30 | 		line-height: 1;
31 | 		float: left;
32 | 		flex: 1;
33 | 		margin-bottom: 0;
34 | 		padding: $navbar-spacing;
35 | 	}
36 | 
37 | 	&-menu {
38 | 		list-style-type: none;
39 | 		margin: 0;
40 | 		padding: 0;
41 | 	}
42 | 
43 | 	&-menu-item {
44 | 		display: flex;
45 | 		float: right;
46 | 	}
47 | 
48 | 	&-menu-link {
49 | 		display: inline-block;
50 | 		font-size: 16px;
51 | 		line-height: 3.5;
52 | 		color: $menu-link-color;
53 | 		padding: 0 16px;
54 | 		text-decoration: none;
55 | 
56 | 		&:hover {
57 | 			color: $menu-link-hover-color;
58 | 		}
59 | 	}
60 | 
61 | 	&-menu-text {
62 | 		padding: 8px;
63 | 	}
64 | 
65 | 	&-icon {
66 | 		margin-right: 0;
67 | 	}
68 | }
69 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_background-triangle.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Backround Triangle
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // Adds a downward-facing triangle as a background image to an element.
 7 | // The image is formatted as an SVG, making it easy to change the color.
 8 | // Because Internet Explorer doesn't support encoded SVGs as background images,
 9 | // a fallback is also included.
10 | //
11 | //------------------------------------------------------------------------------
12 | 
13 | //
14 | // @scss
15 | @mixin background-triangle($color: $black) {
16 | 	/* stylelint-disable string-quotes */
17 | 	background-image: url('data:image/svg+xml;utf8,');
18 | 	/* stylelint-enable string-quotes */
19 | 	@media screen and (min-width: 0\0) {
20 | 		/* stylelint-disable string-quotes */
21 | 		background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');
22 | 		/* stylelint-enable string-quotes */
23 | 	}
24 | }
25 | 


--------------------------------------------------------------------------------
/tests/all/scss/base/_links.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #base: Links
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | // Establish the default link look
 7 | //
 8 | // And undo it for placeholder links/named anchors (without href)
 9 | // which have not been made explicitly keyboard-focusable (without tabindex).
10 | //
11 | // It would be more straightforward to just use a[href] in previous block, but
12 | // that causes specificity issues in many other styles that are too complex to
13 | // fix.
14 | //
15 | //
16 | // See https://github.com/twbs/bootstrap/issues/19402
17 | //
18 | // 1. Its more problematic when setting text-decoration globally so we remove in
19 | //    favour of specific components/helpers setting it as needed.
20 | //
21 | //------------------------------------------------------------------------------
22 | 
23 | //
24 | // #settings
25 | 
26 | // Theme Variables
27 | $link-color: $default-link-color !default;
28 | $link-hover-color: $default-link-color-hover !default;
29 | 
30 | //
31 | // #scss
32 | 
33 | a {
34 | 	text-decoration: none;
35 | 	color: $link-color;
36 | 
37 | 	&:focus,
38 | 	&:hover {
39 | 		text-decoration: none; // [1]
40 | 		color: $link-hover-color;
41 | 	}
42 | 
43 | 	&:focus {
44 | 		// Default
45 | 		outline: thin dotted;
46 | 		// WebKit
47 | 		outline: 4px auto -webkit-focus-ring-color;
48 | 		outline-offset: -1px;
49 | 	}
50 | }
51 | 


--------------------------------------------------------------------------------
/tests/all/scss/base/_type.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #base: Type
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | 
 9 | //
10 | // #scss
11 | 
12 | h1 small,
13 | h2 small,
14 | h3 small,
15 | h4 small,
16 | h5 small,
17 | h6 small {
18 | 	@include type(display3, true);
19 | 	font-size: 60%;
20 | 	display: block;
21 | }
22 | 
23 | h1 {
24 | 	@include type(display3);
25 | }
26 | 
27 | h2 {
28 | 	@include type(display2);
29 | }
30 | 
31 | h3 {
32 | 	@include type(display1);
33 | }
34 | 
35 | h4 {
36 | 	@include type(headline);
37 | }
38 | 
39 | h5 {
40 | 	@include type(title);
41 | }
42 | 
43 | h6 {
44 | 	@include type(subhead2);
45 | }
46 | 
47 | p {
48 | 	@include type(body2);
49 | }
50 | 
51 | blockquote {
52 | 	@include type(blockquote);
53 | 	@include space(margin-left);
54 | 
55 | 	p {
56 | 		font-size: inherit;
57 | 		font-weight: inherit;
58 | 		line-height: inherit;
59 | 
60 | 		&:before {
61 | 			content: "“";
62 | 		}
63 | 
64 | 		&:after {
65 | 			content: "";
66 | 		}
67 | 
68 | 		&:last-of-type:after {
69 | 			content: "”";
70 | 		}
71 | 	}
72 | }
73 | 
74 | mark {
75 | 	background-color: $yellow-200;
76 | }
77 | 
78 | cite {
79 | 	@include type(caption);
80 | }
81 | 
82 | address {
83 | 	@include type(body1);
84 | }
85 | 
86 | ul,
87 | ol {
88 | 	@include type(body1);
89 | }
90 | 


--------------------------------------------------------------------------------
/assets/css/utilities.0.12.0.min.css:
--------------------------------------------------------------------------------
1 | [tabindex="-1"]:focus{outline:none!important}.u-clearfix:after{display:table;clear:both;content:" "}.u-sr-only{border:0;position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-.0625rem;padding:0}.u-sr-only.focusable:active,.u-sr-only.focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}.u-hidden,.u-hidden-xs-up{display:none!important}@media (max-width:575px){.u-hidden-xs-down{display:none!important}}@media (min-width:576px){.u-hidden-sm-up{display:none!important}}@media (max-width:767px){.u-hidden-sm-down{display:none!important}}@media (min-width:768px){.u-hidden-md-up{display:none!important}}@media (max-width:991px){.u-hidden-md-down{display:none!important}}@media (min-width:992px){.u-hidden-lg-up{display:none!important}}@media (max-width:1199px){.u-hidden-lg-down{display:none!important}}@media (min-width:1200px){.u-hidden-xl-up{display:none!important}}.u-hidden-xl-down{display:none!important}@media print{*,:after,:before,:first-letter,:first-line{background:transparent!important;box-shadow:none!important;text-shadow:none!important;color:#000!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #9e9e9e;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
2 | /*# sourceMappingURL=utilities.0.12.0.min.css.map */
3 | 


--------------------------------------------------------------------------------
/tests/all/css/utilities.0.12.0.min.css:
--------------------------------------------------------------------------------
1 | [tabindex="-1"]:focus{outline:none!important}.u-clearfix:after{display:table;clear:both;content:" "}.u-sr-only{border:0;position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-.0625rem;padding:0}.u-sr-only.focusable:active,.u-sr-only.focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}.u-hidden,.u-hidden-xs-up{display:none!important}@media (max-width:575px){.u-hidden-xs-down{display:none!important}}@media (min-width:576px){.u-hidden-sm-up{display:none!important}}@media (max-width:767px){.u-hidden-sm-down{display:none!important}}@media (min-width:768px){.u-hidden-md-up{display:none!important}}@media (max-width:991px){.u-hidden-md-down{display:none!important}}@media (min-width:992px){.u-hidden-lg-up{display:none!important}}@media (max-width:1199px){.u-hidden-lg-down{display:none!important}}@media (min-width:1200px){.u-hidden-xl-up{display:none!important}}.u-hidden-xl-down{display:none!important}@media print{*,:after,:before,:first-letter,:first-line{background:transparent!important;box-shadow:none!important;text-shadow:none!important;color:#000!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #9e9e9e;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
2 | /*# sourceMappingURL=utilities.0.12.0.min.css.map */
3 | 


--------------------------------------------------------------------------------
/tests/all/scss/objects/_grid.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #object: Grid
 3 | //------------------------------------------------------------------------------
 4 | // #description
 5 | //
 6 | // This grid system is uses flex-box based on the BS4 grid system
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // #settings
12 | 
13 | //
14 | // #scss
15 | 
16 | //
17 | // Set up the default container and grid class for mobile browsers
18 | .o-container {
19 | 	position: relative;
20 | 	max-width: 100%;
21 | 	margin-right: auto;
22 | 	margin-left: auto;
23 | 	padding-right: $default-grid-gutter;
24 | 	padding-left: $default-grid-gutter;
25 | 
26 | 	//
27 | 	// Establist container sizes for all devices larger than mobile
28 | 
29 | 	//
30 | 	// small
31 | 	@media (min-width: $bp-sm) {
32 | 		width: $sm;
33 | 	}
34 | 
35 | 	//
36 | 	// medium
37 | 	@media (min-width: $bp-md) {
38 | 		width: $md;
39 | 	}
40 | 
41 | 	//
42 | 	// large
43 | 	@media (min-width: $bp-lg) {
44 | 		width: $lg;
45 | 	}
46 | 
47 | 	//
48 | 	// extre-large
49 | 	@media (min-width: $bp-xl) {
50 | 		width: $xl;
51 | 	}
52 | }
53 | 
54 | /* stylelint-disable value-no-vendor-prefix */
55 | .o-row {
56 | 	display: flex;
57 | 	flex-wrap: wrap;
58 | 	margin-right: -$grid-gutter;
59 | 	margin-left: -$grid-gutter;
60 | }
61 | /* stylelint-enable value-no-vendor-prefix */
62 | 
63 | .o-col {
64 | 	position: relative;
65 | 	flex-basis: 0;
66 | 	flex-grow: 1;
67 | 	width: 100%;
68 | 	max-width: 100%;
69 | 	min-height: 1px;
70 | 	padding-right: $grid-gutter;
71 | 	padding-left: $grid-gutter;
72 | }
73 | 


--------------------------------------------------------------------------------
/tests/all/templates/topic.twig:
--------------------------------------------------------------------------------
 1 | {# forum.twig #}
 2 | {% extends "./layout/layout.twig" %}
 3 | 
 4 | {% block component %}
 5 | 				
22 | 				
44 | {% endblock %}
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sdd",
 3 |   "version": "0.0.1",
 4 |   "description": "Styleguide Driven Development System for creating, managing, customizing, & editing themesfor phpBB.",
 5 |   "main": "app.js",
 6 |   "xo": {
 7 |     "env": [
 8 |       "browser",
 9 |       "node",
10 |       "jquery"
11 |     ]
12 |   },
13 |   "scripts": {
14 |     "test": "xo && gulp test && stylelint --config ./.stylelintrc './**/*.scss'"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/phpbb/StyleGuideDesigner.git"
19 |   },
20 |   "keywords": [
21 |     "sdd",
22 |     "style",
23 |     "themes"
24 |   ],
25 |   "author": "Sahil Khokhar",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/phpbb/StyleGuideDesigner/issues"
29 |   },
30 |   "homepage": "https://github.com/phpbb/StyleGuideDesigner#readme",
31 |   "dependencies": {
32 |     "body-parser": "^1.17.2",
33 |     "del": "^2.2.2",
34 |     "express": "^4.15.3",
35 |     "express-validator": "^3.2.0",
36 |     "gulp": "^3.9.1",
37 |     "gulp-autoprefixer": "^4.0.0",
38 |     "gulp-cssnano": "^2.1.2",
39 |     "gulp-data": "^1.2.1",
40 |     "gulp-nunjucks-render": "^2.2.1",
41 |     "gulp-postcss": "^7.0.0",
42 |     "gulp-rename": "^1.2.2",
43 |     "gulp-sass": "^3.1.0",
44 |     "gulp-sourcemaps": "^2.6.0",
45 |     "gulp-stylefmt": "^1.1.0",
46 |     "postcss-pxtorem": "^4.0.1",
47 |     "postcss-rtl": "^0.5.10",
48 |     "postcss-sorting": "^2.1.0",
49 |     "pug": "^2.0.0-rc.2",
50 |     "stylelint": "^7.10.1",
51 |     "stylelint-order": "^0.4.4",
52 |     "stylelint-scss": "^1.4.4",
53 |     "vue": "^2.3.4",
54 |     "vue-resource": "^1.3.4",
55 |     "xo": "^0.16.0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/tests/all/scss/utilities/_print.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #utilities: Print
 3 | //------------------------------------------------------------------------------
 4 | // #description
 5 | //
 6 | // Inlined to avoid the additional HTTP request:
 7 | // http://www.phpied.com/delay-loading-your-print-css/
 8 | //
 9 | // 1. Black prints faster: http://www.sanbeiji.com/archives/953
10 | //
11 | //------------------------------------------------------------------------------
12 | 
13 | //
14 | // #scss
15 | @media print {
16 | 	*,
17 | 	*:before,
18 | 	*:after,
19 | 	*:first-letter,
20 | 	*:first-line {
21 | 		background: transparent !important;
22 | 		box-shadow: none !important;
23 | 		text-shadow: none !important;
24 | 		color: $black !important; // [1]
25 | 	}
26 | 
27 | 	a,
28 | 	a:visited {
29 | 		text-decoration: underline;
30 | 	}
31 | 
32 | 	a[href]:after {
33 | 		content: " (" attr(href) ")";
34 | 	}
35 | 
36 | 	abbr[title]:after {
37 | 		content: " (" attr(title) ")";
38 | 	}
39 | 
40 | 	//
41 | 	// Don"t show links that are fragment identifiers, or use the `javascript:`
42 | 	// pseudo protocol
43 | 	a[href^="#"]:after,
44 | 	a[href^="javascript:"]:after {
45 | 		content: "";
46 | 	}
47 | 
48 | 	pre,
49 | 	blockquote {
50 | 		border: $default-border-size solid $default-gray;
51 | 		page-break-inside: avoid;
52 | 	}
53 | 
54 | 	//
55 | 	// Printing Tables:
56 | 	// http://css-discuss.incutio.com/wiki/Printing_Tables
57 | 	thead {
58 | 		display: table-header-group;
59 | 	}
60 | 
61 | 	tr,
62 | 	img {
63 | 		page-break-inside: avoid;
64 | 	}
65 | 
66 | 	img {
67 | 		max-width: 100% !important;
68 | 	}
69 | 
70 | 	p,
71 | 	h2,
72 | 	h3 {
73 | 		orphans: 3;
74 | 		widows: 3;
75 | 	}
76 | 
77 | 	h2,
78 | 	h3 {
79 | 		page-break-after: avoid;
80 | 	}
81 | }
82 | 


--------------------------------------------------------------------------------
/assets/css/theme.css:
--------------------------------------------------------------------------------
  1 | .c-navbar {
  2 | 	display: -webkit-flex;
  3 | 	display: flex;
  4 | 	overflow: hidden;
  5 | 	-webkit-flex-direction: row;
  6 | 	flex-direction: row;
  7 | 	-webkit-flex-wrap: nowrap;
  8 | 	flex-wrap: nowrap;
  9 | }
 10 | 
 11 | .c-navbar-logo {
 12 | 	font-size: 1.25rem;
 13 | 	font-weight: 500;
 14 | 	line-height: 1.6;
 15 | 	line-height: 1;
 16 | 	letter-spacing: 0.02em;
 17 | 	float: left;
 18 | 	-webkit-flex: 1;
 19 | 	flex: 1;
 20 | 	margin-bottom: 0;
 21 | 	padding: 1rem;
 22 | }
 23 | 
 24 | .c-navbar-menu {
 25 | 	margin: 0;
 26 | 	padding: 0;
 27 | 	list-style-type: none;
 28 | }
 29 | 
 30 | .c-navbar-menu-item {
 31 | 	display: -webkit-flex;
 32 | 	display: flex;
 33 | 	float: right;
 34 | }
 35 | 
 36 | .c-navbar-menu-link {
 37 | 	font-size: 1rem;
 38 | 	line-height: 3.5;
 39 | 	text-decoration: none;
 40 | 	color: #757575;
 41 | 	display: inline-block;
 42 | 	padding: 0 1rem;
 43 | }
 44 | 
 45 | .c-navbar-menu-link:hover {
 46 | 	color: #258cf4;
 47 | }
 48 | 
 49 | .c-navbar-menu-text {
 50 | 	padding: 0.5rem;
 51 | }
 52 | 
 53 | .c-navbar-icon {
 54 | 	margin-right: 0;
 55 | }
 56 | 
 57 | .c-footer {
 58 | 	text-align: center;
 59 | }
 60 | 
 61 | .c-sidebar {
 62 | 	border: 1px solid transparent;
 63 | 	border-right-color: #e7e7e7;
 64 | 	display: -webkit-flex;
 65 | 	display: flex;
 66 | 	overflow: hidden;
 67 | 	-webkit-flex-wrap: nowrap;
 68 | 	flex-wrap: nowrap;
 69 | 	width: 16%;
 70 | }
 71 | 
 72 | .c-sidebar-menu {
 73 | 	margin: 0;
 74 | 	padding: 0;
 75 | 	list-style-type: none;
 76 | }
 77 | 
 78 | .c-sidebar-menu-item {
 79 | 	display: -webkit-flex;
 80 | 	display: flex;
 81 | }
 82 | 
 83 | .c-sidebar-menu-link {
 84 | 	font-size: 1rem;
 85 | 	line-height: 3.5;
 86 | 	text-decoration: none;
 87 | 	color: #757575;
 88 | 	display: block;
 89 | 	padding: 0 1rem;
 90 | }
 91 | 
 92 | .c-sidebar-menu-link:hover {
 93 | 	color: #258cf4;
 94 | }
 95 | 
 96 | .c-sidebar-menu-text {
 97 | 	padding: 0.5rem;
 98 | }
 99 | 
100 | /*# sourceMappingURL=theme.css.map */
101 | 


--------------------------------------------------------------------------------
/views/layout.pug:
--------------------------------------------------------------------------------
 1 | doctype html
 2 | 
 3 | html(lang="en")
 4 | 	head
 5 | 		meta(charset="UTF-8")
 6 | 		meta(http-equiv="X-UA-Compatible" content="IE-edge, chrome=1")
 7 | 		meta(name="viewport" content="width=device-width, initial-scale=1")
 8 | 		title Styleguide Driven Development
 9 | 		link(rel="stylesheet", href="/css/core.0.12.0.css")
10 | 		link(rel="stylesheet", href="/css/theme.css")
11 | 	body
12 | 		include includes/sprite.pug
13 | 		block head
14 | 			.c-navbar
15 | 				h3.c-navbar-logo Logo
16 | 				ul.c-navbar-menu
17 | 					li.c-navbar-menu-item
18 | 						a.c-navbar-menu-link(href="https://github.com/phpbb/StyleGuideDesigner", target="_blank")
19 | 							svg.o-icon.c-navbar-icon
20 | 								use(xlink:href="#github")
21 | 					li.c-navbar-menu-item
22 | 						a.c-navbar-menu-link(href="/documentation")
23 | 							svg.o-icon.c-navbar-icon
24 | 								use(xlink:href="#faq")
25 | 							span.c-navbar-menu-text Documentation
26 | 					li.c-navbar-menu-item
27 | 						a.c-navbar-menu-link(href="/settings")
28 | 							svg.o-icon.c-navbar-icon
29 | 								use(xlink:href="#settings")
30 | 							span.c-navbar-menu-text Settings
31 | 					li.c-navbar-menu-item
32 | 						a.c-navbar-menu-link(href="/demo")
33 | 							svg.o-icon.c-navbar-icon
34 | 								use(xlink:href="#app")
35 | 							span.c-navbar-menu-text Demo
36 | 					li.c-navbar-menu-item
37 | 						a.c-navbar-menu-link(href="/")
38 | 							svg.o-icon.c-navbar-icon
39 | 								use(xlink:href="#home")
40 | 							span.c-navbar-menu-text Home
41 | 		block content
42 | 		block foot
43 | 			footer.c-footer
44 | 				a.c-footer-icon-link(href="https://github.com/phpbb/StyleGuideDesigner", target="_blank")
45 | 					svg.o-icon.c-footer-icon
46 | 						use(xlink:href="#github")
47 | 				p.c-footer-text Developed for phpBB
48 | 	script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js")
49 | 	script(src="https://unpkg.com/vue@2.0.3/dist/vue.js")
50 | 	script(src="https://cdn.jsdelivr.net/g/vue@2.0.0-rc.4,vue.resource@1.0.0")
51 | 	script(src='/js/script.js')


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | window.onload = function () {
 4 | 	Vue.component('config-list', {
 5 | 		props: ['config'],
 6 | 		template: `

 7 | 		
`,
 8 | 		data() {
 9 | 			return {
10 | 				configList: {}
11 | 			};
12 | 		},
13 | 		methods: {
14 | 			// Method called on blur of the input
15 | 			changeConfig(e) {
16 | 				// This new object will record values on event change
17 | 				let newConfig = {
18 | 					id: e.path[1].firstChild.id,
19 | 					name: e.path[1].innerText,
20 | 					setting: e.target.value
21 | 				};
22 | 				// Send the new object on the post route
23 | 				this.$http.post('/settings/config', newConfig)
24 | 				.then(function (res) {
25 | 					console.log(res.body);
26 | 				});
27 | 			}
28 | 		}
29 | 	});
30 | 	new Vue({
31 | 		el: '.app',
32 | 		data() {
33 | 			return {
34 | 				configList: []
35 | 			};
36 | 		},
37 | 		created: function () {
38 | 			// Call this method as soon as the page loads
39 | 			this.fetchConfig();
40 | 		},
41 | 		methods: {
42 | 			/* This method is called as soon as the page loads
43 | 			and it makes a get request on the get route */
44 | 			fetchConfig() {
45 | 				this.$http.get('/settings/config')
46 | 				.then(function (res) {
47 | 					this.configList = res.body;
48 | 				});
49 | 			}
50 | 		}
51 | 	});
52 | 
53 | 	Vue.component('sidebar-list', {
54 | 		props: ['sidebar'],
55 | 		template: `
  • 
56 | 		{{sidebar}}
    • `,
57 | 	});
58 | 	new Vue({
59 | 		el: '.sidebar-app',
60 | 		data() {
61 | 			return {
62 | 				sidebarList: []
63 | 			};
64 | 		},
65 | 		created: function () {
66 | 			// Call this method as soon as the page loads
67 | 			this.fetchSideContent();
68 | 		},
69 | 		methods: {
70 | 			/* This method is called as soon as the page loads
71 | 			and it makes a get request on the get route */
72 | 			fetchSideContent() {
73 | 				this.$http.get('/editor/sidebar')
74 | 				.then(function (res) {
75 | 					this.sidebarList = res.body;
76 | 				});
77 | 			}
78 | 		}
79 | 	});
80 | };
81 | 


--------------------------------------------------------------------------------
/tests/prosilver/scss/objects/_action-bar.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @object: Action Bar
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // @settings
 10 | 
 11 | // Layout Variables
 12 | $action-spacing: 16px !default;
 13 | $action-size: 40px !default;
 14 | 
 15 | 
 16 | // Theme Variables
 17 | $action-bg-color: $gray-100 !default;
 18 | $action-bg-hover-color: $default-action-bg-hover !default;
 19 | $action-color: $black-54 !default;
 20 | $action-hover-color: $default-action-color-hover !default;
 21 | 
 22 | 
 23 | //
 24 | // @scss
 25 | .o-action-bar {
 26 | 	background-color: $action-bg-color;
 27 | 	display: flex;
 28 | 	flex-direction: row;
 29 | 	flex-wrap: nowrap;
 30 | 
 31 | 	&-avatar {
 32 | 		width: $action-size;
 33 | 		height: $action-size;
 34 | 		margin: ($action-spacing / 2) 0 ($action-spacing / 2) $action-spacing;
 35 | 		padding: 0;
 36 | 	}
 37 | 
 38 | 	&-title {
 39 | 		@include type(title);
 40 | 		line-height: 1;
 41 | 		float: left;
 42 | 		flex: 1;
 43 | 		margin-bottom: 0;
 44 | 		padding: $action-spacing;
 45 | 	}
 46 | 
 47 | 	&-list {
 48 | 		float: left;
 49 | 		flex: 1;
 50 | 		margin: 0;
 51 | 		padding: 0;
 52 | 		list-style: none;
 53 | 	}
 54 | 
 55 | 	&-list-item {
 56 | 		display: flex;
 57 | 		float: left;
 58 | 		padding: $action-spacing;
 59 | 
 60 | 		&:first-of-type {
 61 | 			padding-right: 0;
 62 | 		}
 63 | 	}
 64 | 
 65 | 	&-actions {
 66 | 		margin: 0;
 67 | 		padding: 0;
 68 | 		list-style: none;
 69 | 	}
 70 | 
 71 | 	&-action {
 72 | 		display: flex;
 73 | 		float: right;
 74 | 
 75 | 		&-item {
 76 | 			position: relative;
 77 | 		}
 78 | 
 79 | 		&-link {
 80 | 			color: $action-color;
 81 | 			display: inline-block;
 82 | 			padding: $action-spacing;
 83 | 
 84 | 			&:hover,
 85 | 			&:focus {
 86 | 				background-color: $action-bg-hover-color;
 87 | 				color: $action-hover-color;
 88 | 			}
 89 | 		}
 90 | 
 91 | 		&-icon {
 92 | 			margin-right: 0;
 93 | 
 94 | 			&:hover {
 95 | 				text-decoration: none;
 96 | 			}
 97 | 		}
 98 | 	}
 99 | }
100 | 


--------------------------------------------------------------------------------
/assets/css/theme.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["theme.css"],"names":[],"mappings":"AAAA,UAEC,aAAc,AACd,gBAAiB,AAEjB,mBAAoB,AAEpB,gBAAkB,CAClB,AAED,eACC,kBAAmB,AACnB,gBAAiB,AACjB,gBAAiB,AACjB,cAAe,AACf,qBAAuB,AACvB,WAAY,AAEZ,OAAQ,AACR,gBAAiB,AACjB,YAAc,CACd,AAED,eACC,SAAU,AACV,UAAW,AACX,oBAAsB,CACtB,AAED,oBAEC,aAAc,AACd,WAAa,CACb,AAED,oBACC,eAAgB,AAChB,gBAAiB,AACjB,qBAAsB,AACtB,cAAe,AACf,qBAAsB,AACtB,cAAgB,CAChB,AAED,0BACC,aAAe,CACf,AAED,oBACC,aAAgB,CAChB,AAED,eACC,cAAgB,CAChB,AAED,UACC,iBAAmB,CACnB,AAED,WACC,6BAA8B,AAC9B,2BAA4B,AAE5B,aAAc,AACd,gBAAiB,AAEjB,iBAAkB,AAClB,SAAW,CACX,AAED,gBACC,SAAU,AACV,UAAW,AACX,oBAAsB,CACtB,AAED,qBAEC,YAAc,CACd,AAED,qBACC,eAAgB,AAChB,gBAAiB,AACjB,qBAAsB,AACtB,cAAe,AACf,cAAe,AACf,cAAgB,CAChB,AAED,2BACC,aAAe,CACf,AAED,qBACC,aAAgB,CAChB","file":"theme.min.css","sourcesContent":[".c-navbar {\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n\toverflow: hidden;\n\t-webkit-flex-direction: row;\n\tflex-direction: row;\n\t-webkit-flex-wrap: nowrap;\n\tflex-wrap: nowrap;\n}\n\n.c-navbar-logo {\n\tfont-size: 1.25rem;\n\tfont-weight: 500;\n\tline-height: 1.6;\n\tline-height: 1;\n\tletter-spacing: 0.02em;\n\tfloat: left;\n\t-webkit-flex: 1;\n\tflex: 1;\n\tmargin-bottom: 0;\n\tpadding: 1rem;\n}\n\n.c-navbar-menu {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style-type: none;\n}\n\n.c-navbar-menu-item {\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n\tfloat: right;\n}\n\n.c-navbar-menu-link {\n\tfont-size: 1rem;\n\tline-height: 3.5;\n\ttext-decoration: none;\n\tcolor: #757575;\n\tdisplay: inline-block;\n\tpadding: 0 1rem;\n}\n\n.c-navbar-menu-link:hover {\n\tcolor: #258cf4;\n}\n\n.c-navbar-menu-text {\n\tpadding: 0.5rem;\n}\n\n.c-navbar-icon {\n\tmargin-right: 0;\n}\n\n.c-footer {\n\ttext-align: center;\n}\n\n.c-sidebar {\n\tborder: 1px solid transparent;\n\tborder-right-color: #e7e7e7;\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n\toverflow: hidden;\n\t-webkit-flex-wrap: nowrap;\n\tflex-wrap: nowrap;\n\twidth: 16%;\n}\n\n.c-sidebar-menu {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style-type: none;\n}\n\n.c-sidebar-menu-item {\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n}\n\n.c-sidebar-menu-link {\n\tfont-size: 1rem;\n\tline-height: 3.5;\n\ttext-decoration: none;\n\tcolor: #757575;\n\tdisplay: block;\n\tpadding: 0 1rem;\n}\n\n.c-sidebar-menu-link:hover {\n\tcolor: #258cf4;\n}\n\n.c-sidebar-menu-text {\n\tpadding: 0.5rem;\n}\n\n/*# sourceMappingURL=theme.css.map */\n"]}


--------------------------------------------------------------------------------
/tests/all/scss/utilities/_visability.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // #utilities: Visability
  3 | //------------------------------------------------------------------------------
  4 | // #description:
  5 | //
  6 | // Responsive visability classes derived from bootstrap.
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // #scss
 12 | 
 13 | //
 14 | // Only display content to screen readers
 15 | // http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 16 | .u-sr-only {
 17 | 	border: 0;
 18 | 	position: absolute;
 19 | 	overflow: hidden;
 20 | 	clip: rect(0, 0, 0, 0);
 21 | 	width: 1px;
 22 | 	height: 1px;
 23 | 	margin: -1px;
 24 | 	padding: 0;
 25 | }
 26 | 
 27 | //
 28 | // Extends the .sr-only class to allow the element
 29 | // to be focusable when navigated to via the keyboard:
 30 | // https://www.drupal.org/node/897638
 31 | .u-sr-only.focusable:active,
 32 | .u-sr-only.focusable:focus {
 33 | 	position: static;
 34 | 	overflow: visible;
 35 | 	clip: auto;
 36 | 	width: auto;
 37 | 	height: auto;
 38 | 	margin: 0;
 39 | }
 40 | 
 41 | // Hide visually and from screen readers
 42 | .u-hidden {
 43 | 	display: none !important;
 44 | }
 45 | 
 46 | // Responsive visibility utilities
 47 | 
 48 | .u-hidden-xs-up {
 49 | 	display: none !important;
 50 | }
 51 | 
 52 | @media (max-width: ($bp-sm - 1)) {
 53 | 	.u-hidden-xs-down {
 54 | 		display: none !important;
 55 | 	}
 56 | }
 57 | 
 58 | @media (min-width: $bp-sm) {
 59 | 	.u-hidden-sm-up {
 60 | 		display: none !important;
 61 | 	}
 62 | }
 63 | 
 64 | @media (max-width: ($bp-md - 1)) {
 65 | 	.u-hidden-sm-down {
 66 | 		display: none !important;
 67 | 	}
 68 | }
 69 | 
 70 | @media (min-width: $bp-md) {
 71 | 	.u-hidden-md-up {
 72 | 		display: none !important;
 73 | 	}
 74 | }
 75 | 
 76 | @media (max-width: ($bp-lg - 1)) {
 77 | 	.u-hidden-md-down {
 78 | 		display: none !important;
 79 | 	}
 80 | }
 81 | 
 82 | @media (min-width: $bp-lg) {
 83 | 	.u-hidden-lg-up {
 84 | 		display: none !important;
 85 | 	}
 86 | }
 87 | 
 88 | @media (max-width: ($bp-xl - 1)) {
 89 | 	.u-hidden-lg-down {
 90 | 		display: none !important;
 91 | 	}
 92 | }
 93 | 
 94 | @media (min-width: $bp-xl) {
 95 | 	.u-hidden-xl-up {
 96 | 		display: none !important;
 97 | 	}
 98 | }
 99 | 
100 | .u-hidden-xl-down {
101 | 	display: none !important;
102 | }
103 | 


--------------------------------------------------------------------------------
/tests/all/scss/base/_table.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #base: Tables
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #settings
10 | 
11 | // Layout Variables
12 | $table-row-height: 48px;
13 | $table-last-row-height: 56px;
14 | $table-header-height: $table-last-row-height;
15 | $table-header-padding-bottom: 8px;
16 | $table-column-spacing: 36px;
17 | $table-column-padding: $table-column-spacing / 2;
18 | $table-card-header-height: 64px;
19 | $table-card-title-top: 20px;
20 | $table-card-padding: 24px;
21 | $table-button-padding-right: 16px;
22 | $table-cell-top: $table-card-padding / 2;
23 | 
24 | //Theme Variables
25 | $table-header-color: $default-action-color;
26 | $table-divider-color: $default-gray-light;
27 | $table-hover-color: $default-action-bg-hover;
28 | $table-selection-color: $default-action-bg;
29 | 
30 | 
31 | //
32 | // #scss
33 | 
34 | table {
35 | 	@include type(body2);
36 | 	white-space: nowrap;
37 | 	background-color: $white;
38 | 	border: 1px solid $table-divider-color;
39 | 	display: block;
40 | 	overflow-x: auto;
41 | 	width: 100%;
42 | 
43 | 	thead {
44 | 		padding-bottom: ($table-header-padding-bottom / 2);
45 | 	}
46 | 
47 | 	tbody {
48 | 		tr {
49 | 			position: relative;
50 | 			height: $table-row-height;
51 | 			transition: background-color 0.28s $default-animation-curve;
52 | 
53 | 			&:hover {
54 | 				background-color: $table-hover-color;
55 | 			}
56 | 		}
57 | 	}
58 | 
59 | 	td,
60 | 	th {
61 | 		text-align: right;
62 | 		box-sizing: border-box;
63 | 		height: $table-row-height;
64 | 		padding: 0 $table-column-padding;
65 | 
66 | 		&:first-of-type {
67 | 			padding-left: $table-card-padding;
68 | 		}
69 | 
70 | 		&:last-of-type {
71 | 			padding-right: $table-card-padding;
72 | 		}
73 | 	}
74 | 
75 | 	td {
76 | 		vertical-align: top;
77 | 		border-top: 1px solid $table-divider-color;
78 | 		border-bottom: 1px solid $table-divider-color;
79 | 		padding-top: $table-cell-top;
80 | 	}
81 | 
82 | 	th {
83 | 		@include type(body2);
84 | 		vertical-align: bottom;
85 | 		text-overflow: ellipsis;
86 | 		color: $table-header-color;
87 | 		padding-bottom: $table-header-padding-bottom;
88 | 	}
89 | 	@media (min-width: $bp-md) {
90 | 		display: table;
91 | 	}
92 | 
93 | 	@media (min-width: $bp-md) {
94 | 		width: auto;
95 | 	}
96 | }
97 | 


--------------------------------------------------------------------------------
/tests/all/scss/base/_code.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #base: Code
 3 | //------------------------------------------------------------------------------
 4 | // #description:
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #settings
10 | 
11 | // Layout Variables
12 | $kbd-padding: 4px !default;
13 | $pre-padding: 16px !default;
14 | 
15 | // Theme Variables
16 | $code-font-family: $default-code-font;
17 | $code-bg: $default-action-bg-hover !default;
18 | $code-color: $default-primary-light-color !default;
19 | $code-border-radius: $default-border-radius !default;
20 | $kbd-nested-font-weight: 700 !default;
21 | $kbd-bg: $gray-900 !default;
22 | $kbd-color: $white !default;
23 | $kbd-border-color: rgba(0, 0, 0, 0.25) !default;
24 | $pre-bg: $gray-800 !default;
25 | $pre-border-width: 0 !default;
26 | $pre-border-style: solid !default;
27 | $pre-border-color: $default-gray !default;
28 | $pre-border-radius: $default-border-radius !default;
29 | $pre-color: $white !default;
30 | 
31 | //
32 | // #scss
33 | 
34 | // Inline and block code styles
35 | code,
36 | kbd,
37 | pre,
38 | samp {
39 | 	font-family: $code-font-family;
40 | }
41 | 
42 | // Inline code
43 | code,
44 | kbd {
45 | 	font-size: 90%;
46 | 	background-color: $code-bg;
47 | 	border-radius: $code-border-radius;
48 | 	color: $code-color;
49 | 	padding: ($kbd-padding / 2) $kbd-padding;
50 | }
51 | 
52 | // User input typically entered via keyboard
53 | kbd {
54 | 	background-color: $kbd-bg;
55 | 	box-shadow: inset 0 -1px 0 $kbd-border-color;
56 | 	color: $kbd-color;
57 | 	display: inline-block;
58 | 
59 | 	kbd {
60 | 		font-size: 100%;
61 | 		font-weight: $kbd-nested-font-weight;
62 | 		box-shadow: none;
63 | 		padding: 0;
64 | 	}
65 | }
66 | 
67 | // Blocks of code
68 | pre {
69 | 	font-size: 90%;
70 | 	word-wrap: break-word;
71 | 	word-break: break-all;
72 | 	background-color: $pre-bg;
73 | 	border-width: $pre-border-width;
74 | 	border-style: $pre-border-style;
75 | 	border-color: $pre-border-color;
76 | 	border-radius: $pre-border-radius;
77 | 	color: $pre-color;
78 | 	display: block;
79 | 	margin-top: 0;
80 | 	margin-bottom: $pre-padding;
81 | 	padding: $pre-padding;
82 | 
83 | 	// Account for some code outputs that place code tags in pre tags
84 | 	code {
85 | 		font-size: inherit;
86 | 		white-space: pre-wrap;
87 | 		background-color: transparent;
88 | 		border-radius: 0;
89 | 		color: inherit;
90 | 		padding: 0;
91 | 	}
92 | }
93 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var del = require('del');
  4 | var gulp = require('gulp');
  5 | var autoprefixer = require('gulp-autoprefixer');
  6 | var sass = require('gulp-sass');
  7 | var rename = require('gulp-rename');
  8 | var sourcemaps = require('gulp-sourcemaps');
  9 | var cssnano = require('gulp-cssnano');
 10 | var postcss = require('gulp-postcss');
 11 | var stylefmt = require('gulp-stylefmt');
 12 | var sorting = require('postcss-sorting');
 13 | var torem = require('postcss-pxtorem');
 14 | var sortOrder = require('./.postcss-sorting.json');
 15 | 
 16 | // Config
 17 | var build = {
 18 | 	css: './assets/css',
 19 | 	scss: './src/scss/'
 20 | };
 21 | 
 22 | var AUTOPREFIXER_BROWSERS = [
 23 | 	'ie >= 11',
 24 | 	'edge >= 12',
 25 | 	'ff >= 38',
 26 | 	'chrome >= 35',
 27 | 	'safari >= 8',
 28 | 	'opera >= 35',
 29 | 	'ios >= 8'
 30 | ];
 31 | 
 32 | gulp.task('css', function () {
 33 | 	var css = gulp
 34 | 	.src(build.scss + '*.scss')
 35 | 	.pipe(sourcemaps.init())
 36 | 	.pipe(sass({
 37 | 		indentType: 'tab',
 38 | 		indentWidth: 1,
 39 | 		outputStyle: 'expanded',
 40 | 		precision: 10,
 41 | 		onError: console.error.bind(console, 'Sass error:')
 42 | 	}))
 43 | 	.pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
 44 | 	.pipe(
 45 | 		postcss([
 46 | 			sorting(sortOrder),
 47 | 			torem({
 48 | 				rootValue: 16,
 49 | 				unitPrecision: 7,
 50 | 				propWhiteList: [
 51 | 					'font',
 52 | 					'font-size',
 53 | 					'margin',
 54 | 					'margin-left',
 55 | 					'margin-right',
 56 | 					'margin-top',
 57 | 					'margin-bottom',
 58 | 					'padding',
 59 | 					'padding-left',
 60 | 					'padding-right',
 61 | 					'padding-top',
 62 | 					'padding-bottom'],
 63 | 				selectorBlackList: [],
 64 | 				replace: true,
 65 | 				mediaQuery: false,
 66 | 				minPixelValue: 0
 67 | 			})
 68 | 		])
 69 | 	)
 70 | 	.pipe(stylefmt())
 71 | 	.pipe(sourcemaps.write('./'))
 72 | 	.pipe(gulp.dest(build.css));
 73 | 
 74 | 	return css;
 75 | });
 76 | 
 77 | gulp.task('clean', function () {
 78 | 	del(['dist']);
 79 | });
 80 | 
 81 | gulp.task('minify', ['css'], function () {
 82 | 	var css = gulp
 83 | 	.src(build.css + '/theme.css')
 84 | 	.pipe(sourcemaps.init())
 85 | 	.pipe(cssnano())
 86 | 	.pipe(rename({
 87 | 		suffix: '.min',
 88 | 		extname: '.css'
 89 | 	}))
 90 | 	.pipe(sourcemaps.write('./'))
 91 | 	.pipe(gulp.dest(build.css));
 92 | 
 93 | 	return css;
 94 | });
 95 | 
 96 | gulp.task('watch', function () {
 97 | 	gulp.watch('src/scss/**/*.scss', ['css', 'minify']);
 98 | });
 99 | 
100 | gulp.task('serve', ['watch']);
101 | gulp.task('test', ['css', 'minify']);
102 | gulp.task('default', ['css', 'minify', 'watch']);
103 | 


--------------------------------------------------------------------------------
/tests/all/scss/components/_menu.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Menu
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // @settings
 10 | 
 11 | // Layout Variables
 12 | $menu-spacing-vertical: 8px !default;
 13 | $menu-spacing-horizontal: 16px !default;
 14 | $menu-icon-margin: 24px !default;
 15 | $menu-icon-size: 32px !default;
 16 | $menu-link-size: 48px !default;
 17 | $menu-border-radius: $default-border-radius !default;
 18 | $menu-divider-height: 1px !default;
 19 | 
 20 | // Theme Variables
 21 | $menu-background-color: $white !default;
 22 | $menu-link-color: $default-text-color !default;
 23 | $menu-icon-color: $default-action-icon-color !default;
 24 | $menu-link-hover-color: $default-action-color-hover !default;
 25 | $menu-link-hover-background-color: $default-action-bg-hover !default;
 26 | $menu-divider-color: rgba(0, 0, 0, 0.125) !default;
 27 | 
 28 | 
 29 | //
 30 | // @scss
 31 | .c-menu-container {
 32 | 	@include shadow(1);
 33 | 	text-align: left;
 34 | 	background-color: $menu-background-color;
 35 | 	border-radius: $menu-border-radius;
 36 | 	position: absolute;
 37 | 	z-index: 999;
 38 | 	top: auto;
 39 | 	right: 0;
 40 | 	display: none;
 41 | 	overflow: auto;
 42 | }
 43 | 
 44 | .c-menu {
 45 | 	margin: 0;
 46 | 	padding: $menu-spacing-vertical 0;
 47 | 	list-style: none;
 48 | 
 49 | 	&-item {
 50 | 		position: relative;
 51 | 	}
 52 | 
 53 | 	&-toggle {
 54 | 		cursor: pointer;
 55 | 
 56 | 		&:hover,
 57 | 		&:focus {
 58 | 			> .c-menu-container,
 59 | 			a > .c-menu-container {
 60 | 				display: block;
 61 | 			}
 62 | 		}
 63 | 	}
 64 | 
 65 | 	&-link {
 66 | 		@include type(menu);
 67 | 		white-space: nowrap;
 68 | 		text-decoration: none;
 69 | 		color: $menu-link-color;
 70 | 		display: flex;
 71 | 		flex-direction: row;
 72 | 		align-items: center;
 73 | 		height: $menu-link-size;
 74 | 		padding: 0 $menu-spacing-horizontal 0 $menu-spacing-horizontal;
 75 | 		cursor: pointer;
 76 | 
 77 | 		&-icon {
 78 | 			color: $menu-icon-color;
 79 | 			width: $menu-icon-size;
 80 | 			height: $menu-icon-size;
 81 | 			margin-right: $menu-icon-margin;
 82 | 		}
 83 | 
 84 | 		&:hover {
 85 | 			text-decoration: none;
 86 | 			background-color: $menu-link-hover-background-color;
 87 | 			color: $menu-link-hover-color;
 88 | 
 89 | 			.c-menu-link-icon {
 90 | 				color: $menu-link-hover-color;
 91 | 			}
 92 | 		}
 93 | 	}
 94 | 
 95 | 	&-divider {
 96 | 		background-color: $menu-divider-color;
 97 | 		height: $menu-divider-height;
 98 | 		margin-top: $menu-spacing-vertical;
 99 | 		margin-bottom: $menu-spacing-vertical;
100 | 	}
101 | }
102 | 


--------------------------------------------------------------------------------
/tests/all/scss/components/_toolbar.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Toolbar
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | 
11 | // Layout Variables
12 | $toolbar-spacing: 16px !default;
13 | $toolbar-height: ($toolbar-spacing * 2.375) !default;
14 | $toolbar-border-radius: $default-border-radius !default;
15 | 
16 | // Theme Variables
17 | $toolbar-background-color: $default-action-bg !default;
18 | $toolbar-action-color: $default-action-color !default;
19 | $toolbar-action-hover-bg: $default-action-bg-hover !default;
20 | $toolbar-action-hover-color: $default-action-color-hover !default;
21 | 
22 | 
23 | //
24 | // @scss
25 | 
26 | //
27 | // 1. Allow us to style box model properties.
28 | // 2. Line different sized buttons up a little nicer.
29 | // 3. Make buttons inherit font styles (often necessary when styling `input`s as
30 | //    buttons).
31 | // 4. Reset/normalize some styles.
32 | // 5. Force all button-styled elements to appear clickable.
33 | // 6. Fixes odd inner spacing in IE7.
34 | // 7. Subtract the border size from the padding value so that buttons do not
35 | //    grow larger as we add borders.
36 | // 8. Prevent button text from being selectable.
37 | // 9. Prevent deafult browser outline halo
38 | //
39 | .c-toolbar {
40 | 	@include shadow(2);
41 | 	background-color: $toolbar-background-color;
42 | 	border-radius: $toolbar-border-radius;
43 | 	position: relative;
44 | 	display: inline-block;
45 | 	margin: 0;
46 | 	margin-bottom: $toolbar-spacing;
47 | 	padding: 0;
48 | 	list-style: none;
49 | 
50 | 	&-item {
51 | 		position: relative;
52 | 		display: inline-block;
53 | 	}
54 | 
55 | 	&-action {
56 | 		@include type(button);
57 | 		line-height: unitless($toolbar-height, map-get(map-get($type-styles, button), font-size));
58 | 		text-align: center; // [4]
59 | 		vertical-align: middle; // [2]
60 | 		white-space: nowrap; // bs only
61 | 		text-decoration: none; // [4]
62 | 		outline: none; // [9]
63 | 		color: $toolbar-action-color;
64 | 		position: relative;
65 | 		display: inline-block; // [1]
66 | 		overflow: hidden; // [6]
67 | 		margin: 0; // [4]
68 | 		padding: 0 $toolbar-spacing; // [7]
69 | 		cursor: pointer;
70 | 		user-select: none; // [8]
71 | 		transition:
72 | 			box-shadow 0.2s $animation-curve-fast-out-linear-in,
73 | 			background-color 0.2s $default-animation-curve,
74 | 			color 0.2s $default-animation-curve;
75 | 
76 | 		&:hover,
77 | 		&:focus {
78 | 			background-color: $toolbar-action-hover-bg;
79 | 			color: $toolbar-action-hover-color;
80 | 		}
81 | 	}
82 | 
83 | 	&-icon {
84 | 		margin-right: 0;
85 | 
86 | 		&:hover {
87 | 			text-decoration: none;
88 | 		}
89 | 	}
90 | }
91 | 


--------------------------------------------------------------------------------
/assets/css/utilities.0.12.0.css:
--------------------------------------------------------------------------------
  1 | [tabindex="-1"]:focus {
  2 | 	outline: none !important;
  3 | }
  4 | 
  5 | .u-clearfix:after {
  6 | 	display: table;
  7 | 	clear: both;
  8 | 	content: " ";
  9 | }
 10 | 
 11 | .u-sr-only {
 12 | 	border: 0;
 13 | 	position: absolute;
 14 | 	overflow: hidden;
 15 | 	clip: rect(0, 0, 0, 0);
 16 | 	width: 1px;
 17 | 	height: 1px;
 18 | 	margin: -0.0625rem;
 19 | 	padding: 0;
 20 | }
 21 | 
 22 | .u-sr-only.focusable:active,
 23 | .u-sr-only.focusable:focus {
 24 | 	position: static;
 25 | 	overflow: visible;
 26 | 	clip: auto;
 27 | 	width: auto;
 28 | 	height: auto;
 29 | 	margin: 0;
 30 | }
 31 | 
 32 | .u-hidden {
 33 | 	display: none !important;
 34 | }
 35 | 
 36 | .u-hidden-xs-up {
 37 | 	display: none !important;
 38 | }
 39 | 
 40 | @media (max-width: 575px) {
 41 | 	.u-hidden-xs-down {
 42 | 		display: none !important;
 43 | 	}
 44 | }
 45 | 
 46 | @media (min-width: 576px) {
 47 | 	.u-hidden-sm-up {
 48 | 		display: none !important;
 49 | 	}
 50 | }
 51 | 
 52 | @media (max-width: 767px) {
 53 | 	.u-hidden-sm-down {
 54 | 		display: none !important;
 55 | 	}
 56 | }
 57 | 
 58 | @media (min-width: 768px) {
 59 | 	.u-hidden-md-up {
 60 | 		display: none !important;
 61 | 	}
 62 | }
 63 | 
 64 | @media (max-width: 991px) {
 65 | 	.u-hidden-md-down {
 66 | 		display: none !important;
 67 | 	}
 68 | }
 69 | 
 70 | @media (min-width: 992px) {
 71 | 	.u-hidden-lg-up {
 72 | 		display: none !important;
 73 | 	}
 74 | }
 75 | 
 76 | @media (max-width: 1199px) {
 77 | 	.u-hidden-lg-down {
 78 | 		display: none !important;
 79 | 	}
 80 | }
 81 | 
 82 | @media (min-width: 1200px) {
 83 | 	.u-hidden-xl-up {
 84 | 		display: none !important;
 85 | 	}
 86 | }
 87 | 
 88 | .u-hidden-xl-down {
 89 | 	display: none !important;
 90 | }
 91 | 
 92 | @media print {
 93 | 	*,
 94 | 	*:before,
 95 | 	*:after,
 96 | 	*:first-letter,
 97 | 	*:first-line {
 98 | 		background: transparent !important;
 99 | 		box-shadow: none !important;
100 | 		text-shadow: none !important;
101 | 		color: #000000 !important;
102 | 	}
103 | 
104 | 	a,
105 | 	a:visited {
106 | 		text-decoration: underline;
107 | 	}
108 | 
109 | 	a[href]:after {
110 | 		content: " (" attr(href) ")";
111 | 	}
112 | 
113 | 	abbr[title]:after {
114 | 		content: " (" attr(title) ")";
115 | 	}
116 | 
117 | 	a[href^="#"]:after,
118 | 	a[href^="javascript:"]:after {
119 | 		content: "";
120 | 	}
121 | 
122 | 	pre,
123 | 	blockquote {
124 | 		border: 1px solid #9e9e9e;
125 | 		page-break-inside: avoid;
126 | 	}
127 | 
128 | 	thead {
129 | 		display: table-header-group;
130 | 	}
131 | 
132 | 	tr,
133 | 	img {
134 | 		page-break-inside: avoid;
135 | 	}
136 | 
137 | 	img {
138 | 		max-width: 100% !important;
139 | 	}
140 | 
141 | 	p,
142 | 	h2,
143 | 	h3 {
144 | 		orphans: 3;
145 | 		widows: 3;
146 | 	}
147 | 
148 | 	h2,
149 | 	h3 {
150 | 		page-break-after: avoid;
151 | 	}
152 | }
153 | 
154 | /*# sourceMappingURL=utilities.0.12.0.css.map */
155 | 


--------------------------------------------------------------------------------
/tests/all/css/utilities.0.12.0.css:
--------------------------------------------------------------------------------
  1 | [tabindex="-1"]:focus {
  2 | 	outline: none !important;
  3 | }
  4 | 
  5 | .u-clearfix:after {
  6 | 	display: table;
  7 | 	clear: both;
  8 | 	content: " ";
  9 | }
 10 | 
 11 | .u-sr-only {
 12 | 	border: 0;
 13 | 	position: absolute;
 14 | 	overflow: hidden;
 15 | 	clip: rect(0, 0, 0, 0);
 16 | 	width: 1px;
 17 | 	height: 1px;
 18 | 	margin: -0.0625rem;
 19 | 	padding: 0;
 20 | }
 21 | 
 22 | .u-sr-only.focusable:active,
 23 | .u-sr-only.focusable:focus {
 24 | 	position: static;
 25 | 	overflow: visible;
 26 | 	clip: auto;
 27 | 	width: auto;
 28 | 	height: auto;
 29 | 	margin: 0;
 30 | }
 31 | 
 32 | .u-hidden {
 33 | 	display: none !important;
 34 | }
 35 | 
 36 | .u-hidden-xs-up {
 37 | 	display: none !important;
 38 | }
 39 | 
 40 | @media (max-width: 575px) {
 41 | 	.u-hidden-xs-down {
 42 | 		display: none !important;
 43 | 	}
 44 | }
 45 | 
 46 | @media (min-width: 576px) {
 47 | 	.u-hidden-sm-up {
 48 | 		display: none !important;
 49 | 	}
 50 | }
 51 | 
 52 | @media (max-width: 767px) {
 53 | 	.u-hidden-sm-down {
 54 | 		display: none !important;
 55 | 	}
 56 | }
 57 | 
 58 | @media (min-width: 768px) {
 59 | 	.u-hidden-md-up {
 60 | 		display: none !important;
 61 | 	}
 62 | }
 63 | 
 64 | @media (max-width: 991px) {
 65 | 	.u-hidden-md-down {
 66 | 		display: none !important;
 67 | 	}
 68 | }
 69 | 
 70 | @media (min-width: 992px) {
 71 | 	.u-hidden-lg-up {
 72 | 		display: none !important;
 73 | 	}
 74 | }
 75 | 
 76 | @media (max-width: 1199px) {
 77 | 	.u-hidden-lg-down {
 78 | 		display: none !important;
 79 | 	}
 80 | }
 81 | 
 82 | @media (min-width: 1200px) {
 83 | 	.u-hidden-xl-up {
 84 | 		display: none !important;
 85 | 	}
 86 | }
 87 | 
 88 | .u-hidden-xl-down {
 89 | 	display: none !important;
 90 | }
 91 | 
 92 | @media print {
 93 | 	*,
 94 | 	*:before,
 95 | 	*:after,
 96 | 	*:first-letter,
 97 | 	*:first-line {
 98 | 		background: transparent !important;
 99 | 		box-shadow: none !important;
100 | 		text-shadow: none !important;
101 | 		color: #000000 !important;
102 | 	}
103 | 
104 | 	a,
105 | 	a:visited {
106 | 		text-decoration: underline;
107 | 	}
108 | 
109 | 	a[href]:after {
110 | 		content: " (" attr(href) ")";
111 | 	}
112 | 
113 | 	abbr[title]:after {
114 | 		content: " (" attr(title) ")";
115 | 	}
116 | 
117 | 	a[href^="#"]:after,
118 | 	a[href^="javascript:"]:after {
119 | 		content: "";
120 | 	}
121 | 
122 | 	pre,
123 | 	blockquote {
124 | 		border: 1px solid #9e9e9e;
125 | 		page-break-inside: avoid;
126 | 	}
127 | 
128 | 	thead {
129 | 		display: table-header-group;
130 | 	}
131 | 
132 | 	tr,
133 | 	img {
134 | 		page-break-inside: avoid;
135 | 	}
136 | 
137 | 	img {
138 | 		max-width: 100% !important;
139 | 	}
140 | 
141 | 	p,
142 | 	h2,
143 | 	h3 {
144 | 		orphans: 3;
145 | 		widows: 3;
146 | 	}
147 | 
148 | 	h2,
149 | 	h3 {
150 | 		page-break-after: avoid;
151 | 	}
152 | }
153 | 
154 | /*# sourceMappingURL=utilities.0.12.0.css.map */
155 | 


--------------------------------------------------------------------------------
/tests/all/scss/generic/reset/_type.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // #generic: Type
  3 | //------------------------------------------------------------------------------
  4 | // #description:
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // #scss
 10 | 
 11 | //
 12 | // Remove top margins from headings
 13 | //
 14 | // By default, `
    `-`
    ` all receive top and bottom margins. We nuked the
 15 | // top margin for easier control within type scales as it avoids margin
 16 | // collapsing.
 17 | //
 18 | h1,
 19 | h2,
 20 | h3,
 21 | h4,
 22 | h5,
 23 | h6 {
 24 | 	@include vertical-rhythm();
 25 | }
 26 | 
 27 | //
 28 | // Reestablish margins on paragraphs
 29 | //
 30 | p {
 31 | 	@include vertical-rhythm();
 32 | }
 33 | 
 34 | // Remove underlines from potentially troublesome elements.
 35 | u,
 36 | ins,
 37 | abbr[title] {
 38 | 	text-decoration: none;
 39 | }
 40 | 
 41 | abbr[title] {
 42 | 	border-bottom: $default-border-size dotted $default-gray;
 43 | }
 44 | 
 45 | // Apply faux underlines to inserted text via `border-bottom`.
 46 | ins {
 47 | 	border-bottom: $default-border-size solid;
 48 | }
 49 | 
 50 | // Give a help cursor to elements that give extra info on `:hover`.
 51 | abbr[title],
 52 | dfn[title] {
 53 | 	cursor: help;
 54 | }
 55 | 
 56 | address {
 57 | 	@include vertical-rhythm();
 58 | 	font-style: normal;
 59 | 	line-height: inherit;
 60 | }
 61 | 
 62 | ol,
 63 | ul,
 64 | dd {
 65 | 	@include vertical-rhythm();
 66 | 	@include space(margin-left);
 67 | }
 68 | 
 69 | dl {
 70 | 	@include vertical-rhythm();
 71 | }
 72 | 
 73 | li > ul,
 74 | li > ol {
 75 | 	margin-bottom: 0;
 76 | }
 77 | 
 78 | nav ol,
 79 | nav ul {
 80 | 	list-style: none;
 81 | }
 82 | 
 83 | nav > ol,
 84 | nav > ul {
 85 | 	@include vertical-rhythm();
 86 | 	padding: 0;
 87 | }
 88 | 
 89 | dt {
 90 | 	font-weight: 700;
 91 | }
 92 | 
 93 | //
 94 | // 1. Hang the opening quote of the blockquote.
 95 | //
 96 | blockquote {
 97 | 	@include vertical-rhythm();
 98 | 	/* stylelint-disable unit-blacklist, declaration-property-unit-whitelist */
 99 | 	text-indent: -0.41em; // [1]
100 | 	/* stylelint-enable unit-blacklist, declaration-property-unit-whitelist */
101 | }
102 | 
103 | q {
104 | 	quotes: "‘" "’" "“" "”";
105 | 
106 | 	&:before {
107 | 		content: "‘";
108 | 	}
109 | 
110 | 	&:after {
111 | 		content: "’";
112 | 	}
113 | 
114 | 	q:before {
115 | 		content: "“";
116 | 	}
117 | 
118 | 	q:after {
119 | 		content: "”";
120 | 	}
121 | 
122 | 	//
123 | 	// If an element opens with an inline quote, let’s hang that.
124 | 	//
125 | 	&:first-child {
126 | 		/* stylelint-disable unit-blacklist, declaration-property-unit-whitelist */
127 | 		text-indent: -0.22em;
128 | 		/* stylelint-enable unit-blacklist, declaration-property-unit-whitelist */
129 | 		display: inline-block;
130 | 	}
131 | }
132 | 


--------------------------------------------------------------------------------
/tests/all/scss/objects/_button.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // #object: Button
 3 | //------------------------------------------------------------------------------
 4 | // #description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // #settings
10 | 
11 | // Layout Variables
12 | $btn-spacing: 16px !default;
13 | $btn-border-radius: $default-border-radius !default;
14 | $btn-min-width: ($btn-spacing * 4) !default;
15 | $btn-height: ($btn-spacing * 2.375) !default;
16 | 
17 | // Theme Variables
18 | $btn-background-color: $default-action-bg !default;
19 | $btn-hover-color: $default-action-bg-hover !default;
20 | $btn-text-color: $default-action-color !default;
21 | $btn-text-hover-color: $default-link-color !default;
22 | 
23 | //
24 | // #scss
25 | 
26 | //
27 | // 1. Allow us to style box model properties.
28 | // 2. Line different sized buttons up a little nicer.
29 | // 3. Make buttons inherit font styles (often necessary when styling `input`s as
30 | //    buttons).
31 | // 4. Reset/normalize some styles.
32 | // 5. Force all button-styled elements to appear clickable.
33 | // 6. Fixes odd inner spacing in IE7.
34 | // 7. Subtract the border size from the padding value so that buttons do not
35 | //    grow larger as we add borders.
36 | // 8. Prevent button text from being selectable.
37 | // 9. Prevent deafult browser outline halo
38 | //
39 | .o-btn {
40 | 	@include type(button);
41 | 	@include shadow(2);
42 | 	line-height: unitless($btn-height, map-get(map-get($type-styles, button), font-size));
43 | 	text-align: center; // [4]
44 | 	vertical-align: middle; // [2]
45 | 	white-space: nowrap; // bs only
46 | 	text-decoration: none; // [4]
47 | 	background-color: $btn-background-color;
48 | 	border: none;
49 | 	border-radius: $btn-border-radius;
50 | 	outline: none; // [9]
51 | 	color: $btn-text-color;
52 | 	position: relative;
53 | 	display: inline-block; // [1]
54 | 	overflow: hidden; // [6]
55 | 	min-width: $btn-min-width; // google material design
56 | 	margin: 0; // [4]
57 | 	padding: 0 $btn-spacing; // [7]
58 | 	cursor: pointer;
59 | 	user-select: none; // [8]
60 | 	transition:
61 | 		box-shadow 0.2s $animation-curve-fast-out-linear-in,
62 | 		background-color 0.2s $default-animation-curve,
63 | 		color 0.2s $default-animation-curve;
64 | 	will-change: box-shadow; // google material design
65 | 
66 | 	// UI states
67 | 	&:hover {
68 | 		text-decoration: none;  // [4]
69 | 		background-color: $btn-hover-color;
70 | 		color: $btn-text-hover-color;
71 | 	}
72 | 
73 | 	&:focus {
74 | 		@include shadow(focus);
75 | 		outline: none; // [9]
76 | 	}
77 | 
78 | 	&:disabled {
79 | 		background-color: transparent;
80 | 		box-shadow: none;
81 | 		cursor: default;
82 | 	}
83 | 
84 | 	// Remove excess padding and border in Firefox 4+
85 | 	&::-moz-focus-inner {
86 | 		border: 0;
87 | 		padding: 0;
88 | 	}
89 | }
90 | 


--------------------------------------------------------------------------------
/tests/all/templates/includes/list-item.twig:
--------------------------------------------------------------------------------
 1 | 
  • 
 2 | 	
    
 3 | 		
 4 | 	
    
 5 | 	
    
 6 | 		
    
 7 | 			
    
 8 | 				{{topic.name}}
 9 | 				{% if topic.pages %}
10 | 					
      
11 | 						{% for page in topic.pages %}
12 | 							{% if loop.last %}
13 | 								
      • 
14 | 							{% else %}
15 | 								
    • {{ page }}
      • 
16 | 							{% endif %}
17 | 						{% endfor %}
18 | 					
    
19 | 				{% endif %}
20 | 			
    
21 | 			
    
22 | 				
    
23 | 					
33 | 				
    
34 | 				User Gravatar
35 | 			
    
36 | 		
    
37 | 		
    
38 | 			
39 | 				{{ topic.author }}
40 | 			
41 | 			
42 | 				
43 | 				
44 | 			
45 | 			
46 | 				{{ topic.views }}
47 | 			
48 | 			
49 | 				{{ topic.replies }}
50 | 			
51 | 		
    
52 | 	
    
53 | 
    • 
54 | 


--------------------------------------------------------------------------------
/assets/css/utilities.0.12.0.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["utilities.0.12.0.css"],"names":[],"mappings":"AAAA,sBACC,sBAAyB,CACzB,AAED,kBACC,cAAe,AACf,WAAY,AACZ,WAAa,CACb,AAED,WACC,SAAU,AACV,kBAAmB,AACnB,gBAAiB,AACjB,mBAAuB,AACvB,UAAW,AACX,WAAY,AACZ,iBAAmB,AACnB,SAAW,CACX,AAED,uDAEC,gBAAiB,AACjB,iBAAkB,AAClB,UAAW,AACX,WAAY,AACZ,YAAa,AACb,QAAU,CACV,AAMD,0BACC,sBAAyB,CACzB,AAED,yBACC,kBACC,sBAAyB,CACzB,CACD,AAED,yBACC,gBACC,sBAAyB,CACzB,CACD,AAED,yBACC,kBACC,sBAAyB,CACzB,CACD,AAED,yBACC,gBACC,sBAAyB,CACzB,CACD,AAED,yBACC,kBACC,sBAAyB,CACzB,CACD,AAED,yBACC,gBACC,sBAAyB,CACzB,CACD,AAED,0BACC,kBACC,sBAAyB,CACzB,CACD,AAED,0BACC,gBACC,sBAAyB,CACzB,CACD,AAED,kBACC,sBAAyB,CACzB,AAED,aACC,2CAKC,iCAAmC,AACnC,0BAA4B,AAC5B,2BAA6B,AAC7B,oBAA0B,CAC1B,AAED,YAEC,yBAA2B,CAC3B,AAED,cACC,2BAA6B,CAC7B,AAED,kBACC,4BAA8B,CAC9B,AAED,gDAEC,UAAY,CACZ,AAED,eAEC,yBAA0B,AAC1B,uBAAyB,CACzB,AAED,MACC,0BAA4B,CAC5B,AAED,OAEC,uBAAyB,CACzB,AAED,IACC,wBAA2B,CAC3B,AAED,QAGC,UAAW,AACX,QAAU,CACV,AAED,MAEC,sBAAwB,CACxB,CACD","file":"utilities.0.12.0.min.css","sourcesContent":["[tabindex=\"-1\"]:focus {\n\toutline: none !important;\n}\n\n.u-clearfix:after {\n\tdisplay: table;\n\tclear: both;\n\tcontent: \" \";\n}\n\n.u-sr-only {\n\tborder: 0;\n\tposition: absolute;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -0.0625rem;\n\tpadding: 0;\n}\n\n.u-sr-only.focusable:active,\n.u-sr-only.focusable:focus {\n\tposition: static;\n\toverflow: visible;\n\tclip: auto;\n\twidth: auto;\n\theight: auto;\n\tmargin: 0;\n}\n\n.u-hidden {\n\tdisplay: none !important;\n}\n\n.u-hidden-xs-up {\n\tdisplay: none !important;\n}\n\n@media (max-width: 575px) {\n\t.u-hidden-xs-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 576px) {\n\t.u-hidden-sm-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (max-width: 767px) {\n\t.u-hidden-sm-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 768px) {\n\t.u-hidden-md-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (max-width: 991px) {\n\t.u-hidden-md-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 992px) {\n\t.u-hidden-lg-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (max-width: 1199px) {\n\t.u-hidden-lg-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 1200px) {\n\t.u-hidden-xl-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n.u-hidden-xl-down {\n\tdisplay: none !important;\n}\n\n@media print {\n\t*,\n\t*:before,\n\t*:after,\n\t*:first-letter,\n\t*:first-line {\n\t\tbackground: transparent !important;\n\t\tbox-shadow: none !important;\n\t\ttext-shadow: none !important;\n\t\tcolor: #000000 !important;\n\t}\n\n\ta,\n\ta:visited {\n\t\ttext-decoration: underline;\n\t}\n\n\ta[href]:after {\n\t\tcontent: \" (\" attr(href) \")\";\n\t}\n\n\tabbr[title]:after {\n\t\tcontent: \" (\" attr(title) \")\";\n\t}\n\n\ta[href^=\"#\"]:after,\n\ta[href^=\"javascript:\"]:after {\n\t\tcontent: \"\";\n\t}\n\n\tpre,\n\tblockquote {\n\t\tborder: 1px solid #9e9e9e;\n\t\tpage-break-inside: avoid;\n\t}\n\n\tthead {\n\t\tdisplay: table-header-group;\n\t}\n\n\ttr,\n\timg {\n\t\tpage-break-inside: avoid;\n\t}\n\n\timg {\n\t\tmax-width: 100% !important;\n\t}\n\n\tp,\n\th2,\n\th3 {\n\t\torphans: 3;\n\t\twidows: 3;\n\t}\n\n\th2,\n\th3 {\n\t\tpage-break-after: avoid;\n\t}\n}\n\n/*# sourceMappingURL=utilities.0.12.0.css.map */\n"]}


--------------------------------------------------------------------------------
/tests/all/css/utilities.0.12.0.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["utilities.0.12.0.css"],"names":[],"mappings":"AAAA,sBACC,sBAAyB,CACzB,AAED,kBACC,cAAe,AACf,WAAY,AACZ,WAAa,CACb,AAED,WACC,SAAU,AACV,kBAAmB,AACnB,gBAAiB,AACjB,mBAAuB,AACvB,UAAW,AACX,WAAY,AACZ,iBAAmB,AACnB,SAAW,CACX,AAED,uDAEC,gBAAiB,AACjB,iBAAkB,AAClB,UAAW,AACX,WAAY,AACZ,YAAa,AACb,QAAU,CACV,AAMD,0BACC,sBAAyB,CACzB,AAED,yBACC,kBACC,sBAAyB,CACzB,CACD,AAED,yBACC,gBACC,sBAAyB,CACzB,CACD,AAED,yBACC,kBACC,sBAAyB,CACzB,CACD,AAED,yBACC,gBACC,sBAAyB,CACzB,CACD,AAED,yBACC,kBACC,sBAAyB,CACzB,CACD,AAED,yBACC,gBACC,sBAAyB,CACzB,CACD,AAED,0BACC,kBACC,sBAAyB,CACzB,CACD,AAED,0BACC,gBACC,sBAAyB,CACzB,CACD,AAED,kBACC,sBAAyB,CACzB,AAED,aACC,2CAKC,iCAAmC,AACnC,0BAA4B,AAC5B,2BAA6B,AAC7B,oBAA0B,CAC1B,AAED,YAEC,yBAA2B,CAC3B,AAED,cACC,2BAA6B,CAC7B,AAED,kBACC,4BAA8B,CAC9B,AAED,gDAEC,UAAY,CACZ,AAED,eAEC,yBAA0B,AAC1B,uBAAyB,CACzB,AAED,MACC,0BAA4B,CAC5B,AAED,OAEC,uBAAyB,CACzB,AAED,IACC,wBAA2B,CAC3B,AAED,QAGC,UAAW,AACX,QAAU,CACV,AAED,MAEC,sBAAwB,CACxB,CACD","file":"utilities.0.12.0.min.css","sourcesContent":["[tabindex=\"-1\"]:focus {\n\toutline: none !important;\n}\n\n.u-clearfix:after {\n\tdisplay: table;\n\tclear: both;\n\tcontent: \" \";\n}\n\n.u-sr-only {\n\tborder: 0;\n\tposition: absolute;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -0.0625rem;\n\tpadding: 0;\n}\n\n.u-sr-only.focusable:active,\n.u-sr-only.focusable:focus {\n\tposition: static;\n\toverflow: visible;\n\tclip: auto;\n\twidth: auto;\n\theight: auto;\n\tmargin: 0;\n}\n\n.u-hidden {\n\tdisplay: none !important;\n}\n\n.u-hidden-xs-up {\n\tdisplay: none !important;\n}\n\n@media (max-width: 575px) {\n\t.u-hidden-xs-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 576px) {\n\t.u-hidden-sm-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (max-width: 767px) {\n\t.u-hidden-sm-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 768px) {\n\t.u-hidden-md-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (max-width: 991px) {\n\t.u-hidden-md-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 992px) {\n\t.u-hidden-lg-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (max-width: 1199px) {\n\t.u-hidden-lg-down {\n\t\tdisplay: none !important;\n\t}\n}\n\n@media (min-width: 1200px) {\n\t.u-hidden-xl-up {\n\t\tdisplay: none !important;\n\t}\n}\n\n.u-hidden-xl-down {\n\tdisplay: none !important;\n}\n\n@media print {\n\t*,\n\t*:before,\n\t*:after,\n\t*:first-letter,\n\t*:first-line {\n\t\tbackground: transparent !important;\n\t\tbox-shadow: none !important;\n\t\ttext-shadow: none !important;\n\t\tcolor: #000000 !important;\n\t}\n\n\ta,\n\ta:visited {\n\t\ttext-decoration: underline;\n\t}\n\n\ta[href]:after {\n\t\tcontent: \" (\" attr(href) \")\";\n\t}\n\n\tabbr[title]:after {\n\t\tcontent: \" (\" attr(title) \")\";\n\t}\n\n\ta[href^=\"#\"]:after,\n\ta[href^=\"javascript:\"]:after {\n\t\tcontent: \"\";\n\t}\n\n\tpre,\n\tblockquote {\n\t\tborder: 1px solid #9e9e9e;\n\t\tpage-break-inside: avoid;\n\t}\n\n\tthead {\n\t\tdisplay: table-header-group;\n\t}\n\n\ttr,\n\timg {\n\t\tpage-break-inside: avoid;\n\t}\n\n\timg {\n\t\tmax-width: 100% !important;\n\t}\n\n\tp,\n\th2,\n\th3 {\n\t\torphans: 3;\n\t\twidows: 3;\n\t}\n\n\th2,\n\th3 {\n\t\tpage-break-after: avoid;\n\t}\n}\n\n/*# sourceMappingURL=utilities.0.12.0.css.map */\n"]}


--------------------------------------------------------------------------------
/tests/all/scss/components/_forum.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Forum
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // @settings
 10 | 
 11 | // Layout Variables
 12 | $forum-spacing: 16px !default;
 13 | $forum-spacing-sm: 12px !default;
 14 | $forum-spacing-lg: 24px !default;
 15 | $forum-border-radius: $default-border-radius !default;
 16 | $forum-media-size: 40px !default;
 17 | $forum-media-margin: 0 !default;
 18 | $forum-border-style: solid !default;
 19 | $forum-border-size: 1px !default;
 20 | 
 21 | 
 22 | // Theme Variables
 23 | $forum-background-color: $white !default;
 24 | $forum-border-color: rgba(0, 0, 0, 0.125) !default;
 25 | $forum-media-color: $default-secondary-color !default;
 26 | $forum-media-read-color: $default-primary-color !default;
 27 | 
 28 | 
 29 | //
 30 | // @scss
 31 | .c-forum {
 32 | 	@include shadow(2);
 33 | 	background-color: $forum-background-color;
 34 | 	border-radius: $forum-border-radius;
 35 | 	position: relative;
 36 | 	display: flex;
 37 | 	flex-direction: column;
 38 | 	margin-bottom: $forum-spacing;
 39 | 
 40 | 	&-body {
 41 | 		flex: 1 1 auto;
 42 | 		margin-bottom: $forum-spacing;
 43 | 	}
 44 | 
 45 | 	&-media {
 46 | 		display: flex;
 47 | 		float: left;
 48 | 		flex: 1;
 49 | 		flex-direction: column;
 50 | 		margin: $forum-spacing $forum-spacing 0;
 51 | 	}
 52 | 
 53 | 	&-media-icon {
 54 | 		color: $forum-media-color;
 55 | 		width: $forum-media-size;
 56 | 		height: $forum-media-size;
 57 | 		margin-right: $forum-media-margin;
 58 | 
 59 | 		&-read {
 60 | 			color: $forum-media-read-color;
 61 | 		}
 62 | 	}
 63 | 
 64 | 	&-info {
 65 | 		display: flex;
 66 | 		flex-direction: column;
 67 | 		margin-right: $forum-spacing;
 68 | 	}
 69 | 
 70 | 	&-title {
 71 | 		@include type(headline);
 72 | 		margin-top: $forum-spacing-lg;
 73 | 		margin-bottom: $forum-spacing-sm;
 74 | 
 75 | 		&-link {
 76 | 			line-height: 1;
 77 | 		}
 78 | 		@media (min-width: $bp-lg) {
 79 | 			margin-bottom: 0;
 80 | 		}
 81 | 	}
 82 | 
 83 | 	&-text {
 84 | 		@include type(body1);
 85 | 		margin: $forum-spacing 0 0;
 86 | 
 87 | 	}
 88 | 
 89 | 	&-footer {
 90 | 		border-top: $forum-border-size $forum-border-style $forum-border-color;
 91 | 		border-radius: 0 0 $forum-border-radius $forum-border-radius;
 92 | 	}
 93 | 
 94 | 	&-cat {
 95 | 		&-title {
 96 | 			@include type(headline);
 97 | 			border-bottom: $forum-border-size $forum-border-style $forum-border-color;
 98 | 			margin-top: $forum-spacing;
 99 | 			margin-bottom: $forum-spacing-lg;
100 | 			padding-bottom: ($forum-spacing / 4);
101 | 
102 | 			&-link {
103 | 				line-height: 1;
104 | 			}
105 | 		}
106 | 	}
107 | 
108 | 	@media (min-width: $bp-lg) {
109 | 		&-deck {
110 | 			display: flex;
111 | 			flex-flow: row wrap;
112 | 		}
113 | 
114 | 		&-deck .c-forum {
115 | 			display: flex;
116 | 			flex: 1 0 0%;
117 | 			flex-direction: column;
118 | 			min-width: calc((100% / 2) - (12px));
119 | 			max-width: calc((100% / 2) - (12px));
120 | 			margin-bottom: $forum-spacing-lg;
121 | 			margin-left: $forum-spacing-lg;
122 | 
123 | 			&:first-child,
124 | 			&:nth-child(2n+1) {
125 | 				margin-left: 0;
126 | 			}
127 | 		}
128 | 	}
129 | }
130 | 


--------------------------------------------------------------------------------
/src/scss/settings/_default.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @setting: Default
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | 
11 | $default-font-size:             16px !default;
12 | $default-line-height:           24px !default;
13 | 
14 | $default-border-size:           1px !default;
15 | $default-border-radius:         2px !default;
16 | 
17 | $default-grid-gutter:           16px !default;
18 | 
19 | // Grid
20 | $sm: 540px !default;
21 | $md: 720px !default;
22 | $lg: 960px !default;
23 | $xl: 1140px !default;
24 | 
25 | $bp-sm: 576px !default;
26 | $bp-md: 768px !default;
27 | $bp-lg: 992px !default;
28 | $bp-xl: 1200px !default;
29 | 
30 | // Fonts
31 | $default-font: Roboto, Helvetica, Arial, sans-serif !default;
32 | $default-code-font: Monaco, Andale Mono, Courier New, Courier, Mono !default;
33 | 
34 | // icons
35 | $default-icon-sm: $default-font-size !default;
36 | $default-icon-md: $default-line-height !default;
37 | $default-icon-lg: 2 * $default-font-size !default;
38 | 
39 | //
40 | // color scheme
41 | 
42 | // body
43 | $default-body-bg:                 $white !default;
44 | $default-body-color:              $gray-800 !default;
45 | $default-text-color:              $black-87 !default; // 87%
46 | $default-gray-light:              $black-12 !default; // 12%
47 | $default-gray:                    $black-38 !default; // 38%
48 | $default-gray-dark:               $black-54 !default; // 54%
49 | 
50 | // color scheme Main
51 | $default-primary-color:           $blue-500 !default;
52 | $default-secondary-color:         $pink-500 !default;
53 | $default-accent-color:            $yellow-500 !default;
54 | $default-warning-color:           $amber-500 !default;
55 | $default-info-color:              $blue-gray-500 !default;
56 | $default-important-color:         $red-500 !default;
57 | $default-success-color:           $green-500 !default;
58 | 
59 | // color scheme Light
60 | $default-primary-light-color:      $blue-300 !default;
61 | $default-secondary-light-color:    $pink-300 !default;
62 | $default-accent-light-color:       $yellow-300 !default;
63 | $default-warning-light-color:      $amber-300 !default;
64 | $default-info-light-color:         $blue-gray-300 !default;
65 | $default-important-light-color:    $red-300 !default;
66 | $default-success-light-color:      $green-300 !default;
67 | 
68 | // color scheme Dark
69 | $default-primary-dark-color:      $blue-700 !default;
70 | $default-secondary-dark-color:    $pink-700 !default;
71 | $default-accent-dark-color:       $yellow-700 !default;
72 | $default-warning-dark-color:      $amber-700 !default;
73 | $default-info-dark-color:         $blue-gray-700 !default;
74 | $default-important-dark-color:    $red-700 !default;
75 | $default-success-dark-color:      $green-700 !default;
76 | 
77 | // color scheme
78 | $default-link-color:              $blue-500 !default;
79 | $default-link-color-hover:        $blue-700 !default;
80 | $default-action-bg:               $gray-100 !default;
81 | $default-action-bg-hover:         $gray-200 !default;
82 | $default-action-color:            $black-54 !default;
83 | $default-action-color-hover:      $blue-500 !default;
84 | $default-action-icon-color:       $black-54 !default;
85 | 


--------------------------------------------------------------------------------
/tests/all/scss/settings/_default.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @setting: Default
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | //------------------------------------------------------------------------------
 7 | 
 8 | //
 9 | // @settings
10 | 
11 | $default-font-size:             16px !default;
12 | $default-line-height:           24px !default;
13 | 
14 | $default-border-size:           1px !default;
15 | $default-border-radius:         2px !default;
16 | 
17 | $default-grid-gutter:           16px !default;
18 | 
19 | // Grid
20 | $sm: 540px !default;
21 | $md: 720px !default;
22 | $lg: 960px !default;
23 | $xl: 1140px !default;
24 | 
25 | $bp-sm: 576px !default;
26 | $bp-md: 768px !default;
27 | $bp-lg: 992px !default;
28 | $bp-xl: 1200px !default;
29 | 
30 | // Fonts
31 | $default-font: Roboto, Helvetica, Arial, sans-serif !default;
32 | $default-code-font: Monaco, Andale Mono, Courier New, Courier, Mono !default;
33 | 
34 | // icons
35 | $default-icon-sm: $default-font-size !default;
36 | $default-icon-md: $default-line-height !default;
37 | $default-icon-lg: 2 * $default-font-size !default;
38 | 
39 | //
40 | // color scheme
41 | 
42 | // body
43 | $default-body-bg:                 $white !default;
44 | $default-body-color:              $gray-800 !default;
45 | $default-text-color:              $black-87 !default; // 87%
46 | $default-gray-light:              $black-12 !default; // 12%
47 | $default-gray:                    $black-38 !default; // 38%
48 | $default-gray-dark:               $black-54 !default; // 54%
49 | 
50 | // color scheme Main
51 | $default-primary-color:           $blue-500 !default;
52 | $default-secondary-color:         $pink-500 !default;
53 | $default-accent-color:            $yellow-500 !default;
54 | $default-warning-color:           $amber-500 !default;
55 | $default-info-color:              $blue-gray-500 !default;
56 | $default-important-color:         $red-500 !default;
57 | $default-success-color:           $green-500 !default;
58 | 
59 | // color scheme Light
60 | $default-primary-light-color:      $blue-300 !default;
61 | $default-secondary-light-color:    $pink-300 !default;
62 | $default-accent-light-color:       $yellow-300 !default;
63 | $default-warning-light-color:      $amber-300 !default;
64 | $default-info-light-color:         $blue-gray-300 !default;
65 | $default-important-light-color:    $red-300 !default;
66 | $default-success-light-color:      $green-300 !default;
67 | 
68 | // color scheme Dark
69 | $default-primary-dark-color:      $blue-700 !default;
70 | $default-secondary-dark-color:    $pink-700 !default;
71 | $default-accent-dark-color:       $yellow-700 !default;
72 | $default-warning-dark-color:      $amber-700 !default;
73 | $default-info-dark-color:         $blue-gray-700 !default;
74 | $default-important-dark-color:    $red-700 !default;
75 | $default-success-dark-color:      $green-700 !default;
76 | 
77 | // color scheme
78 | $default-link-color:              $blue-500 !default;
79 | $default-link-color-hover:        $blue-700 !default;
80 | $default-action-bg:               $gray-100 !default;
81 | $default-action-bg-hover:         $gray-200 !default;
82 | $default-action-color:            $black-54 !default;
83 | $default-action-color-hover:      $blue-500 !default;
84 | $default-action-icon-color:       $black-54 !default;
85 | 


--------------------------------------------------------------------------------
/tests/all/scss/objects/_col.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // #object: Col
  3 | //------------------------------------------------------------------------------
  4 | // #description:
  5 | //
  6 | // This grid system is uses flex-box based on the BS4 grid system
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | 
 11 | //
 12 | // #scss
 13 | 
 14 | //
 15 | // Setup all grid columns to use table cell layout and use the default gutter
 16 | @for $i from 1 through 12 {
 17 | 	.o-col-#{$i} {
 18 | 		@include col-width($i);
 19 | 	}
 20 | }
 21 | 
 22 | @for $i from 1 through 12 {
 23 | 	.o-pull-#{$i} {
 24 | 		@include pull($i);
 25 | 	}
 26 | }
 27 | 
 28 | @for $i from 1 through 12 {
 29 | 	.o-push-#{$i} {
 30 | 		@include push($i);
 31 | 	}
 32 | }
 33 | 
 34 | @for $i from 1 through 12 {
 35 | 	.o-offset-#{$i} {
 36 | 		@include offset($i);
 37 | 	}
 38 | }
 39 | 
 40 | //
 41 | // small widths
 42 | @media (min-width: $bp-sm) {
 43 | 	.o-pull-sm-0 {
 44 | 		right: auto;
 45 | 	}
 46 | 
 47 | 	.o-push-sm-0 {
 48 | 		left: auto;
 49 | 	}
 50 | 	@for $i from 1 through 12 {
 51 | 		.o-col-sm-#{$i} {
 52 | 			@include col-width($i);
 53 | 		}
 54 | 	}
 55 | 
 56 | 	@for $i from 1 through 12 {
 57 | 		.o-pull-sm-#{$i} {
 58 | 			@include pull($i);
 59 | 		}
 60 | 	}
 61 | 
 62 | 	@for $i from 1 through 12 {
 63 | 		.o-push-sm-#{$i} {
 64 | 			@include push($i);
 65 | 		}
 66 | 	}
 67 | 
 68 | 	@for $i from 1 through 12 {
 69 | 		.o-offset-sm-#{$i} {
 70 | 			@include offset($i);
 71 | 		}
 72 | 	}
 73 | }
 74 | 
 75 | //
 76 | // medium widths
 77 | @media (min-width: $bp-md) {
 78 | 	.o-pull-md-0 {
 79 | 		right: auto;
 80 | 	}
 81 | 
 82 | 	.o-push-md-0 {
 83 | 		left: auto;
 84 | 	}
 85 | 	@for $i from 1 through 12 {
 86 | 		.o-col-md-#{$i} {
 87 | 			@include col-width($i);
 88 | 		}
 89 | 	}
 90 | 
 91 | 	@for $i from 1 through 12 {
 92 | 		.o-pull-md-#{$i} {
 93 | 			@include pull($i);
 94 | 		}
 95 | 	}
 96 | 
 97 | 	@for $i from 1 through 12 {
 98 | 		.o-push-md-#{$i} {
 99 | 			@include push($i);
100 | 		}
101 | 	}
102 | 
103 | 	@for $i from 1 through 12 {
104 | 		.o-offset-md-#{$i} {
105 | 			@include offset($i);
106 | 		}
107 | 	}
108 | }
109 | 
110 | //
111 | // large widths
112 | @media (min-width: $bp-lg) {
113 | 	.o-pull-lg-0 {
114 | 		right: auto;
115 | 	}
116 | 
117 | 	.o-push-lg-0 {
118 | 		left: auto;
119 | 	}
120 | 	@for $i from 1 through 12 {
121 | 		.o-col-lg-#{$i} {
122 | 			@include col-width($i);
123 | 		}
124 | 	}
125 | 
126 | 	@for $i from 1 through 12 {
127 | 		.o-pull-lg-#{$i} {
128 | 			@include pull($i);
129 | 		}
130 | 	}
131 | 
132 | 	@for $i from 1 through 12 {
133 | 		.o-push-lg-#{$i} {
134 | 			@include push($i);
135 | 		}
136 | 	}
137 | 
138 | 	@for $i from 1 through 12 {
139 | 		.o-offset-lg-#{$i} {
140 | 			@include offset($i);
141 | 		}
142 | 	}
143 | }
144 | 
145 | //
146 | // extra-large widths
147 | @media (min-width: $bp-xl) {
148 | 	.o-pull-xl-0 {
149 | 		right: auto;
150 | 	}
151 | 
152 | 	.o-push-xl-0 {
153 | 		left: auto;
154 | 	}
155 | 	@for $i from 1 through 12 {
156 | 		.o-col-xl-#{$i} {
157 | 			@include col-width($i);
158 | 		}
159 | 	}
160 | 
161 | 	@for $i from 1 through 12 {
162 | 		.o-pull-xl-#{$i} {
163 | 			@include pull($i);
164 | 		}
165 | 	}
166 | 
167 | 	@for $i from 1 through 12 {
168 | 		.o-push-xl-#{$i} {
169 | 			@include push($i);
170 | 		}
171 | 	}
172 | 
173 | 	@for $i from 1 through 12 {
174 | 		.o-offset-xl-#{$i} {
175 | 			@include offset($i);
176 | 		}
177 | 	}
178 | }
179 | 
180 | .o-pull-0 {
181 | 	right: auto;
182 | }
183 | 
184 | .o-push-0 {
185 | 	left: auto;
186 | }
187 | 


--------------------------------------------------------------------------------
/views/includes/sprite.pug:
--------------------------------------------------------------------------------
 1 | div(style="position: absolute; width: 0; height: 0;")
 2 | 			svg.app-icons(xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0;")
 3 | 				symbol#app(viewbox="0 0 24 24")
 4 | 					path(fill-rule="evenodd" d="M19 8.999c1.654 0 3-1.346 3-3s-1.346-3-3-3a2.993 2.993 0 0 0-2.815 2H2v2h14.185a2.993 2.993 0 0 0 2.815 2zm0-4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-10 4c1.302 0 2.401.838 2.815 2H22v2H11.815a2.994 2.994 0 0 1-2.815 2 2.994 2.994 0 0 1-2.815-2H2v-2h4.185a2.993 2.993 0 0 1 2.815-2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 2c1.654 0 3 1.346 3 3s-1.346 3-3 3a2.994 2.994 0 0 1-2.815-2H2v-2h14.185a2.993 2.993 0 0 1 2.815-2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z")
 5 | 				symbol#settings(viewbox="0 0 24 24")
 6 | 					path(fill-rule="nonzero" d="M19.713 12c0 .34-.031.66-.072.98l2.169 1.65c.195.15.247.42.123.64l-2.056 3.46c-.123.22-.39.31-.627.22l-2.56-1a7.94 7.94 0 0 1-1.737.98l-.39 2.65a.497.497 0 0 1-.505.42H9.946a.497.497 0 0 1-.504-.42l-.39-2.65a7.564 7.564 0 0 1-1.738-.98l-2.56 1a.524.524 0 0 1-.627-.22l-2.056-3.46a.495.495 0 0 1 .124-.64l2.169-1.65a7.718 7.718 0 0 1-.072-.98c0-.33.03-.66.072-.98l-2.17-1.65a.484.484 0 0 1-.123-.64l2.056-3.46a.508.508 0 0 1 .627-.22l2.56 1c.535-.39 1.11-.73 1.738-.98l.39-2.65A.498.498 0 0 1 9.946 2h4.112c.257 0 .473.18.504.42l.39 2.65c.628.25 1.204.58 1.738.98l2.56-1c.226-.08.504 0 .627.22l2.056 3.46c.124.22.072.49-.123.64l-2.17 1.65c.042.32.073.64.073.98zm-3.316-3.79l-.848-.635a5.66 5.66 0 0 0-1.302-.736l-1.019-.406-.16-1.085-.216-1.443-1.706.018-.37 2.51-1.019.406a6.05 6.05 0 0 0-1.32.75l-.843.615-.973-.38-1.471-.546-.791 1.345 2.034 1.548-.14 1.092c-.038.295-.056.53-.056.737 0 .206.018.442.056.737l.14 1.092-.876.667-1.164.885.823 1.36 2.432-.95.847.634c.414.31.845.553 1.302.736l1.02.406.16 1.085.214 1.443 1.702.016.375-2.544 1.02-.406a6.05 6.05 0 0 0 1.32-.75l.843-.615.972.38 1.457.57.812-1.364-2.04-1.553.14-1.092c.038-.302.056-.525.056-.737 0-.212-.018-.435-.057-.737l-.14-1.092.877-.667 1.164-.885-.79-1.33-2.465.92zM12 13.429A1.43 1.43 0 0 1 10.571 12c0-.788.641-1.429 1.429-1.429s1.429.641 1.429 1.429A1.43 1.43 0 0 1 12 13.429z")
 7 | 				symbol#faq(viewbox="0 0 24 24")
 8 | 					path(fill-rule="evenodd" d="M12 22C6.486 22 2 17.515 2 12 2 6.487 6.486 2 12 2s10 4.486 10 10c0 5.515-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm1 11v-1.125A4.011 4.011 0 0 0 16 10c0-2.205-1.795-4-4-4s-4 1.795-4 4h2a2 2 0 1 1 2 2h-1v3h2zm-1 3.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z")
 9 | 				symbol#home(viewbox="0 0 24 24")
10 | 					path(fill-rule="nonzero" d="M5.828 11l-2 2h-2l-.242-.586L3 11h2.828zM6 11v9h2v-7h8v7h2v-9l-6-6.172L6 11zm4 11H4v-9H1L12 2l11 11h-3v9h-6v-7h-4v7z")
11 | 				symbol#github(viewbox="0 0 24 24")
12 | 					path(d="M13.9 16.653c.4-.103.8-.103 1.199-.206 1.198-.31 2.197-.93 2.696-2.067.6-1.24.699-2.48.4-3.823-.1-.62-.4-1.033-.8-1.55-.1-.103-.1-.206-.1-.31.2-.826.2-1.549-.1-2.376 0-.103-.1-.206-.299-.206-.5 0-.899.206-1.298.413-.4.207-.7.413-.999.62-.1.103-.2.103-.3.103a9.039 9.039 0 0 0-4.693 0c-.1 0-.2 0-.3-.103-.698-.413-1.298-.827-2.096-.93-.5-.103-.5-.103-.6.413a4 4 0 0 0 0 2.17v.207c-.898 1.033-1.098 2.376-.898 3.616.1.413.1.723.2 1.136.499 1.447 1.497 2.273 2.995 2.687.4.103.8.206 1.298.31-.3.31-.499.826-.599 1.24 0 .103-.1.103-.1.103-.998.413-2.097.31-2.796-.827-.3-.516-.699-.93-1.398-1.033h-.5c-.199 0-.199.207-.099.31l.2.207c.499.31.898.826 1.098 1.446.4.93 1.099 1.343 2.097 1.447.4 0 .9 0 1.398-.104v1.963c0 .31-.3.517-.699.414a13.25 13.25 0 0 1-2.396-1.24c-2.996-2.17-4.594-5.166-4.394-8.989.2-4.753 3.595-8.575 8.089-9.505C15.298 1.156 20.29 4.462 21.69 9.73c1.298 5.166-1.598 10.538-6.392 12.192-.499.206-.799 0-.799-.62v-2.48c.1-.827 0-1.55-.599-2.17z")


--------------------------------------------------------------------------------
/src/scss/tools/function/_functions.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 2.1 Functions
78 | @import "strip-unit";
79 | @import "unitless";
80 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/function/_functions.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 2.1 Functions
78 | @import "strip-unit";
79 | @import "unitless";
80 | 


--------------------------------------------------------------------------------
/src/scss/settings/_settings.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 1. Global Settings
78 | //-------------------------
79 | @import "color";
80 | @import "default";
81 | 


--------------------------------------------------------------------------------
/tests/all/scss/settings/_settings.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 1. Global Settings
78 | //-------------------------
79 | @import "color";
80 | @import "default";
81 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_mixins.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 2.2 Mixins
78 | @import "animations";
79 | @import "background-triangle";
80 | @import "clearfix";
81 | @import "font-size";
82 | @import "grid";
83 | @import "shadows";
84 | @import "space";
85 | @import "type";
86 | @import "vertical-rhythm";
87 | @import "border_radius";
88 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_mixins.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 2.2 Mixins
78 | @import "animations";
79 | @import "background-triangle";
80 | @import "clearfix";
81 | @import "font-size";
82 | @import "grid";
83 | @import "shadows";
84 | @import "space";
85 | @import "type";
86 | @import "vertical-rhythm";
87 | @import "border_radius";
88 | 


--------------------------------------------------------------------------------
/tests/all/scss/utilities.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 1. Global Settings
78 | //-------------------------
79 | @import "settings/settings";
80 | 
81 | 
82 | // 2. Tools
83 | //-------------------------
84 | @import "tools/function/functions";
85 | @import "tools/mixin/mixins";
86 | 
87 | 
88 | // 8. Utilities
89 | //-------------------------
90 | @import "utilities/resets";
91 | @import "utilities/clearfix";
92 | @import "utilities/visability";
93 | @import "utilities/print";
94 | 


--------------------------------------------------------------------------------
/src/scss/theme.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Base-L
 3 | //------------------------------------------------------------------------------
 4 | // @description
 5 | //
 6 | // @hanakin -- @midaym
 7 | //
 8 | // Base-L is a true core css framework.
 9 | //
10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
11 | //
12 | // Providing a strong foundation to add components and objects to. It provides
13 | // true scalability and extendability while keeping maintainability and
14 | // specificity in check.
15 | //
16 | // It provides a strict structure and guidlines for how your css is to be written
17 | // to keep your projects in check as they grow and evolve.
18 | //
19 | // The frmework was designed and developed along side the popular forum software
20 | // PHPBB as its core template library. By providing the most comon foundations
21 | // in a higher layer we allow for better control and flexability in component
22 | // design and themeing while still balancing maintainability and specificity.
23 | //
24 | //
25 | // The MIT License (MIT)
26 | //
27 | // Copyright (c) 2015 Michael Miday
28 | //
29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
30 | // of this software and associated documentation files (the "Software"), to
31 | // deal in the Software without restriction, including without limitation the
32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
33 | // sell copies of the Software, and to permit persons to whom the Software is
34 | // furnished to do so, subject to the following conditions:
35 | //
36 | // The above copyright notice and this permission notice shall be included in
37 | // all copies or substantial portions of the Software.
38 | //
39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
45 | // SOFTWARE.
46 | //
47 | 
48 | //
49 | // CONTENTS
50 | //
51 | // 1. Settings.....................The global settings only no object or
52 | //                                 component settings. Those belong in the
53 | //                                 individual partial files
54 | //
55 | // 2. Tools........................These are the mixins & functions used.
56 | //
57 | // 3. Generic......................This is for normalizing and reseting the css.
58 | //
59 | // 4. Base.........................This contains only the default html entitiy
60 | //                                 styles, no classes or ids here.
61 | //
62 | // 5. Objects......................This contains all objects or partials to
63 | //                                 build components.
64 | //
65 | // 6. Components...................Her is where you can build the component
66 | //                                 library for your project.
67 | //
68 | // 7. Theme........................Here you can specifiy and theme ulterations
69 | //                                 to use with your objects & components.
70 | //
71 | // 8. Utilities....................This is where all your trumps or utility
72 | //                                 classes go those that usually contain the
73 | //                                 highest specificity.
74 | //
75 | 
76 | 
77 | // 1. Global Settings
78 | //-------------------------
79 | @import "settings/settings";
80 | 
81 | 
82 | // 2. Tools
83 | //-------------------------
84 | @import "tools/function/functions";
85 | @import "tools/mixin/mixins";
86 | 
87 | 
88 | // 6. Components
89 | //-------------------------
90 | @import "components/_navbar";
91 | @import "components/_footer";
92 | @import "components/_sidebar";
93 | 
94 | 
95 | // 7. Theme
96 | //-------------------------
97 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_type.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @tool: Type
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | // A mixin for generating type settings based on Google Material Design types
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //@settings
 11 | $type-font-weight: (
 12 | 	thin: 100,
 13 | 	light: 300,
 14 | 	regular: 400,
 15 | 	medium: 500,
 16 | 	bold: 700,
 17 | 	black: 900
 18 | );
 19 | 
 20 | $type-styles: (
 21 | 	display4: (
 22 | 		font-size: 112px,
 23 | 		letter-spacing: -0.04em,
 24 | 		font-weight: map-get($type-font-weight, light),
 25 | 		line-height: unitless(112px, 112px),
 26 | 		opacity: 0.54
 27 | 	),
 28 | 	display3: (
 29 | 		font-size: 56px,
 30 | 		letter-spacing: -0.02em,
 31 | 		font-weight: map-get($type-font-weight, regular),
 32 | 		line-height: unitless(56px, 56px),
 33 | 		opacity: 0.54
 34 | 	),
 35 | 	display2: (
 36 | 		font-size: 45px,
 37 | 		letter-spacing: normal,
 38 | 		font-weight: map-get($type-font-weight, regular),
 39 | 		line-height: unitless(48px, 45px),
 40 | 		opacity: 0.54
 41 | 	),
 42 | 	display1: (
 43 | 		font-size: 34px,
 44 | 		letter-spacing: normal,
 45 | 		font-weight: map-get($type-font-weight, regular),
 46 | 		line-height: unitless(40px, 34px),
 47 | 		opacity: 0.87
 48 | 	),
 49 | 	headline: (
 50 | 		font-size: 24px,
 51 | 		letter-spacing: normal,
 52 | 		font-weight: map-get($type-font-weight, regular),
 53 | 		line-height: unitless(32px, 24px),
 54 | 		opacity: 0.87
 55 | 	),
 56 | 	blockquote: (
 57 | 		font-size: 24px,
 58 | 		letter-spacing: 0.02em,
 59 | 		font-weight: map-get($type-font-weight, thin),
 60 | 		line-height: normal,
 61 | 		opacity: 0.54
 62 | 	),
 63 | 	title: (
 64 | 		font-size: 20px,
 65 | 		letter-spacing: 0.02em,
 66 | 		font-weight: map-get($type-font-weight, medium),
 67 | 		line-height: unitless(32px, 20px),
 68 | 		opacity: 0.87
 69 | 	),
 70 | 	subhead2: (
 71 | 		font-size: 16px,
 72 | 		letter-spacing: 0.04em,
 73 | 		font-weight: map-get($type-font-weight, regular),
 74 | 		line-height: unitless(28px),
 75 | 		opacity: 0.87
 76 | 	),
 77 | 	subhead1: (
 78 | 		font-size: 15px,
 79 | 		letter-spacing: 0.04em,
 80 | 		font-weight: map-get($type-font-weight, regular),
 81 | 		line-height: unitless(24px, 15px),
 82 | 		opacity: 0.87
 83 | 	),
 84 | 	body2: (
 85 | 		font-size: 14px,
 86 | 		letter-spacing: 0.04em,
 87 | 		font-weight: map-get($type-font-weight, medium),
 88 | 		line-height: unitless(24px, 14px),
 89 | 		opacity: 0.87
 90 | 	),
 91 | 	body1: (
 92 | 		font-size: 14px,
 93 | 		letter-spacing: 0.04em,
 94 | 		font-weight: map-get($type-font-weight, regular),
 95 | 		line-height: unitless(20px, 14px),
 96 | 		opacity: 0.87
 97 | 	),
 98 | 	button: (
 99 | 		font-size: 14px,
100 | 		letter-spacing: normal,
101 | 		font-weight: map-get($type-font-weight, medium),
102 | 		line-height: 1,
103 | 		opacity: 0.54
104 | 	),
105 | 	menu: (
106 | 		font-size: 14px,
107 | 		letter-spacing: normal,
108 | 		font-weight: map-get($type-font-weight, medium),
109 | 		line-height: normal,
110 | 		opacity: 0.54
111 | 	),
112 | 	caption: (
113 | 		font-size: 12px,
114 | 		letter-spacing: 0.08em,
115 | 		font-weight: map-get($type-font-weight, regular),
116 | 		line-height: unitless(20px, 12px),
117 | 		opacity: 0.87
118 | 	)
119 | );
120 | 
121 | //
122 | // @scss
123 | @mixin type($type, $color-contrast: false) {
124 | 	$type-props: map-get($type-styles, $type);
125 | 	@if not map-has-key($type-styles, $type) {
126 | 		@error "Invalid style specified! Choose one of #{map-keys($type-styles)}";
127 | 	}
128 | 	@if $type == blockquote {
129 | 		font-style: italic;
130 | 	}
131 | 	@if $type == button {
132 | 		text-transform: uppercase;
133 | 	}
134 | 	@if $type == blockquote {
135 | 		position: relative;
136 | 	}
137 | 	@if $color-contrast {
138 | 		opacity: map-get($type-props, opacity);
139 | 	}
140 | 	font-size: map-get($type-props, font-size);
141 | 	font-weight: #{map-get($type-props, font-weight)};
142 | 	line-height: map-get($type-props, line-height);
143 | 	letter-spacing: map-get($type-props, letter-spacing);
144 | }
145 | 


--------------------------------------------------------------------------------
/tests/all/templates/forum.twig:
--------------------------------------------------------------------------------
 1 | {# forum.twig #}
 2 | {% extends "./layout/layout.twig" %}
 3 | 
 4 | {% block component %}
 5 | 				{% for item in forums %}
 6 | 					{% if item.cat === 1 %}
 7 | 						{% if loop.first %}
 8 | 							
    
 9 | 								
    
10 | 									{{ item.name }}
11 | 								
    
12 | 								
    
13 | 						{% else %}
14 | 								
    
15 | 							
    
16 | 							
    
17 | 								
    
18 | 									{{ item.name }}
19 | 								
    
20 | 								
    
21 | 						{% endif %}
22 | 					{% else %}
23 | 									
    
24 | 										
    
25 | 											
    
26 | 												
27 | 											
    
28 | 											
    
29 | 												
    
30 | 													{{ item.name }}
31 | 												
    
32 | 												{% if item.desc %}
33 | 													
    
34 | 														{{ item.desc }}
35 | 													
    
36 | 												{% endif %}
37 | 											
    
38 | 										
    
39 | 										
    
40 | 											
      
41 | 												
    •  {{ item.topics }}
      • 
42 | 												
    •  {{ item.posts }}
      • 
43 | 											
    
44 | 											
      
45 | 												{% if item.subs %}
46 | 													
    • 
47 | 														
48 | 															
49 | 														
50 | 														
      
51 | 															
60 | 														
      
61 | 													
      • 
62 | 												{% endif %}
63 | 												{% if item.last_subject %}
64 | 													
    • 
65 | 														
66 | 															
67 | 														
68 | 													
      • 
69 | 												{% endif %}
70 | 											
    
71 | 										
    
72 | 									
    
73 | 						{% if loop.last %}
74 | 								
    
75 | 							
    
76 | 						{% endif %}
77 | 					{% endif %}
78 | 				{% endfor %}
79 | {% endblock %}
80 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_type.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @tool: Type
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | // A mixin for generating type settings based on Google Material Design types
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //@settings
 11 | $type-font-weight: (
 12 | 	thin: 100,
 13 | 	light: 300,
 14 | 	regular: 400,
 15 | 	medium: 500,
 16 | 	bold: 700,
 17 | 	black: 900
 18 | );
 19 | 
 20 | $type-styles: (
 21 | 	display4: (
 22 | 		font-size: 112px,
 23 | 		letter-spacing: -0.04em,
 24 | 		font-weight: map-get($type-font-weight, light),
 25 | 		line-height: unitless(112px, 112px),
 26 | 		opacity: 0.54
 27 | 	),
 28 | 	display3: (
 29 | 		font-size: 56px,
 30 | 		letter-spacing: -0.02em,
 31 | 		font-weight: map-get($type-font-weight, regular),
 32 | 		line-height: unitless(56px, 56px),
 33 | 		opacity: 0.54
 34 | 	),
 35 | 	display2: (
 36 | 		font-size: 45px,
 37 | 		letter-spacing: normal,
 38 | 		font-weight: map-get($type-font-weight, regular),
 39 | 		line-height: unitless(48px, 45px),
 40 | 		opacity: 0.54
 41 | 	),
 42 | 	display1: (
 43 | 		font-size: 34px,
 44 | 		letter-spacing: normal,
 45 | 		font-weight: map-get($type-font-weight, regular),
 46 | 		line-height: unitless(40px, 34px),
 47 | 		opacity: 0.87
 48 | 	),
 49 | 	headline: (
 50 | 		font-size: 24px,
 51 | 		letter-spacing: normal,
 52 | 		font-weight: map-get($type-font-weight, regular),
 53 | 		line-height: unitless(32px, 24px),
 54 | 		opacity: 0.87
 55 | 	),
 56 | 	blockquote: (
 57 | 		font-size: 24px,
 58 | 		letter-spacing: 0.02em,
 59 | 		font-weight: map-get($type-font-weight, thin),
 60 | 		line-height: normal,
 61 | 		opacity: 0.54
 62 | 	),
 63 | 	title: (
 64 | 		font-size: 20px,
 65 | 		letter-spacing: 0.02em,
 66 | 		font-weight: map-get($type-font-weight, medium),
 67 | 		line-height: unitless(32px, 20px),
 68 | 		opacity: 0.87
 69 | 	),
 70 | 	subhead2: (
 71 | 		font-size: 16px,
 72 | 		letter-spacing: 0.04em,
 73 | 		font-weight: map-get($type-font-weight, regular),
 74 | 		line-height: unitless(28px),
 75 | 		opacity: 0.87
 76 | 	),
 77 | 	subhead1: (
 78 | 		font-size: 15px,
 79 | 		letter-spacing: 0.04em,
 80 | 		font-weight: map-get($type-font-weight, regular),
 81 | 		line-height: unitless(24px, 15px),
 82 | 		opacity: 0.87
 83 | 	),
 84 | 	body2: (
 85 | 		font-size: 14px,
 86 | 		letter-spacing: 0.04em,
 87 | 		font-weight: map-get($type-font-weight, medium),
 88 | 		line-height: unitless(24px, 14px),
 89 | 		opacity: 0.87
 90 | 	),
 91 | 	body1: (
 92 | 		font-size: 14px,
 93 | 		letter-spacing: 0.04em,
 94 | 		font-weight: map-get($type-font-weight, regular),
 95 | 		line-height: unitless(20px, 14px),
 96 | 		opacity: 0.87
 97 | 	),
 98 | 	button: (
 99 | 		font-size: 14px,
100 | 		letter-spacing: normal,
101 | 		font-weight: map-get($type-font-weight, medium),
102 | 		line-height: 1,
103 | 		opacity: 0.54
104 | 	),
105 | 	menu: (
106 | 		font-size: 14px,
107 | 		letter-spacing: normal,
108 | 		font-weight: map-get($type-font-weight, medium),
109 | 		line-height: normal,
110 | 		opacity: 0.54
111 | 	),
112 | 	caption: (
113 | 		font-size: 12px,
114 | 		letter-spacing: 0.08em,
115 | 		font-weight: map-get($type-font-weight, regular),
116 | 		line-height: unitless(20px, 12px),
117 | 		opacity: 0.87
118 | 	)
119 | );
120 | 
121 | //
122 | // @scss
123 | @mixin type($type, $color-contrast: false) {
124 | 	$type-props: map-get($type-styles, $type);
125 | 	@if not map-has-key($type-styles, $type) {
126 | 		@error "Invalid style specified! Choose one of #{map-keys($type-styles)}";
127 | 	}
128 | 	@if $type == blockquote {
129 | 		font-style: italic;
130 | 	}
131 | 	@if $type == button {
132 | 		text-transform: uppercase;
133 | 	}
134 | 	@if $type == blockquote {
135 | 		position: relative;
136 | 	}
137 | 	@if $color-contrast {
138 | 		opacity: map-get($type-props, opacity);
139 | 	}
140 | 	font-size: map-get($type-props, font-size);
141 | 	font-weight: #{map-get($type-props, font-weight)};
142 | 	line-height: map-get($type-props, line-height);
143 | 	letter-spacing: map-get($type-props, letter-spacing);
144 | }
145 | 


--------------------------------------------------------------------------------
/tests/prosilver/scss/theme.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @render: Base-L
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | // @hanakin -- @midaym
  7 | //
  8 | // Base-L is a true core css framework.
  9 | //
 10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
 11 | //
 12 | // Providing a strong foundation to add components and objects to. It provides
 13 | // true scalability and extendability while keeping maintainability and
 14 | // specificity in check.
 15 | //
 16 | // It provides a strict structure and guidlines for how your css is to be written
 17 | // to keep your projects in check as they grow and evolve.
 18 | //
 19 | // The frmework was designed and developed along side the popular forum software
 20 | // PHPBB as its core template library. By providing the most comon foundations
 21 | // in a higher layer we allow for better control and flexability in component
 22 | // design and themeing while still balancing maintainability and specificity.
 23 | //
 24 | //
 25 | // The MIT License (MIT)
 26 | //
 27 | // Copyright (c) 2015 Michael Miday
 28 | //
 29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
 30 | // of this software and associated documentation files (the "Software"), to
 31 | // deal in the Software without restriction, including without limitation the
 32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 33 | // sell copies of the Software, and to permit persons to whom the Software is
 34 | // furnished to do so, subject to the following conditions:
 35 | //
 36 | // The above copyright notice and this permission notice shall be included in
 37 | // all copies or substantial portions of the Software.
 38 | //
 39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 45 | // SOFTWARE.
 46 | //
 47 | 
 48 | //
 49 | // CONTENTS
 50 | //
 51 | // 1. Settings.....................The global settings only no object or
 52 | //                                 component settings. Those belong in the
 53 | //                                 individual partial files
 54 | //
 55 | // 2. Tools........................These are the mixins & functions used.
 56 | //
 57 | // 3. Generic......................This is for normalizing and reseting the css.
 58 | //
 59 | // 4. Base.........................This contains only the default html entitiy
 60 | //                                 styles, no classes or ids here.
 61 | //
 62 | // 5. Objects......................This contains all objects or partials to
 63 | //                                 build components.
 64 | //
 65 | // 6. Components...................Her is where you can build the component
 66 | //                                 library for your project.
 67 | //
 68 | // 7. Theme........................Here you can specifiy and theme ulterations
 69 | //                                 to use with your objects & components.
 70 | //
 71 | // 8. Utilities....................This is where all your trumps or utility
 72 | //                                 classes go those that usually contain the
 73 | //                                 highest specificity.
 74 | //
 75 | 
 76 | 
 77 | // 1. Global Settings
 78 | //-------------------------
 79 | @import "../../all/scss/settings/settings";
 80 | 
 81 | 
 82 | // 2. Tools
 83 | //-------------------------
 84 | @import "../../all/scss/tools/function/functions";
 85 | @import "../../all/scss/tools/mixin/mixins";
 86 | 
 87 | 
 88 | // 5. Objects
 89 | //-------------------------
 90 | @import "objects/action-bar";
 91 | 
 92 | // 6. Components
 93 | //-------------------------
 94 | @import "../../all/scss/components/forum";
 95 | @import "../../all/scss/components/list";
 96 | @import "../../all/scss/components/menu";
 97 | @import "../../all/scss/components/toolbar";
 98 | @import "../../all/scss/components/paging";
 99 | @import "../../all/scss/components/topic";
100 | 
101 | 
102 | // 7. Theme
103 | //------------------------- 
104 | 


--------------------------------------------------------------------------------
/tests/all/scss/generic/reset/_global.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // #generic: Global
  3 | //------------------------------------------------------------------------------
  4 | // #description:
  5 | //
  6 | // A thin layer on top of normalize.css that provides a starting point more
  7 | // suitable for web applications.
  8 | //
  9 | //------------------------------------------------------------------------------
 10 | 
 11 | //
 12 | // #scss
 13 | 
 14 | //
 15 | // 1. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 16 | //    navigating between pages that do/do not have enough content to produce
 17 | //    scrollbars naturally.
 18 | // 2. Ensure the page always fills at least the entire height of the viewport.
 19 | // 3. Fonts on OSX will look more consistent with other systems that do not
 20 | //    render text using sub-pixel anti-aliasing.
 21 | // 4. Changes the default tap highlight to be completely transparent in iOS.
 22 | // 5. Set touch-action to avoid touch delay on mobile IE
 23 | // 6. Make html take up the entire screen
 24 | //
 25 | html {
 26 | 	-webkit-font-smoothing: antialiased;
 27 | 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // [4]
 28 | 	overflow-y: scroll; // [1]
 29 | 	width: 100%; // [6]
 30 | 	height: 100%; // [6]
 31 | 	min-height: 100%; // [2]
 32 | 	-ms-touch-action: manipulation; // [5]
 33 | 	touch-action: manipulation;
 34 | 	/* stylelint-disable order/declaration-block-properties-specified-order */
 35 | 	-moz-osx-font-smoothing: grayscale;  // [3]
 36 | 	/* stylelint-enable order/declaration-block-properties-specified-order */
 37 | 	-ms-overflow-style: -ms-autohiding-scrollbar; // [1] Edge 12+, IE 11
 38 | }
 39 | 
 40 | body {
 41 | 	width: 100%;
 42 | 	min-height: 100%;
 43 | }
 44 | 
 45 | //
 46 | // Removes the default spacing and border for appropriate elements.
 47 | //
 48 | iframe {
 49 | 	border: 0;
 50 | }
 51 | 
 52 | //
 53 | // Remove the gap between audio, canvas, iframes,
 54 | // images, videos and the bottom of their containers:
 55 | // https://github.com/h5bp/html5-boilerplate/issues/440
 56 | //
 57 | audio,
 58 | canvas,
 59 | iframe,
 60 | img,
 61 | svg,
 62 | video {
 63 | 	vertical-align: middle;
 64 | }
 65 | 
 66 | //
 67 | // Avoid 300ms click delay on touch devices that support the `touch-action`
 68 | // CSS property.
 69 | //
 70 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch
 71 | // devices and IE Mobile 10-11 DON'T remove the click delay when
 72 | // `` is present.
 73 | //
 74 | // However, they DO support removing the click delay via
 75 | // `touch-action: manipulation`.
 76 | //
 77 | // See:
 78 | // * http://caniuse.com/#feat=css-touch-action
 79 | // * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 80 | //
 81 | a,
 82 | area,
 83 | button,
 84 | [role="button"],
 85 | input,
 86 | label,
 87 | select,
 88 | summary,
 89 | textarea,
 90 | [tabindex] {
 91 | 	touch-action: manipulation;
 92 | }
 93 | 
 94 | //
 95 | // Remove text-shadow in selection highlight:
 96 | // https://twitter.com/miketaylr/status/12228805301
 97 | //
 98 | // These selection rule sets have to be separate.
 99 | // Customize the background color to match your design.
100 | //
101 | ::-moz-selection {
102 | 	background: $blue-200;
103 | 	text-shadow: none;
104 | }
105 | 
106 | ::selection {
107 | 	background: $blue-200;
108 | 	text-shadow: none;
109 | 	color: $white;
110 | }
111 | 
112 | //
113 | // use current current as the default fill of svg elements
114 | //
115 | svg {
116 | 	fill: currentColor;
117 | }
118 | 
119 | //
120 | // specify the progress cursor of updating elements
121 | //
122 | [aria-busy="true"] {
123 | 	cursor: progress;
124 | }
125 | 
126 | //
127 | // specify the pointer cursor of trigger elements
128 | //
129 | [aria-controls] {
130 | 	cursor: pointer;
131 | }
132 | 
133 | //
134 | // specify the unstyled cursor of disabled, not-editable, or otherwise
135 | // inoperable elements
136 | //
137 | [aria-disabled] {
138 | 	cursor: default;
139 | }
140 | 
141 | //
142 | // specify the style of visually hidden yet accessible elements
143 | //
144 | [hidden][aria-hidden="false"] {
145 | 	position: absolute;
146 | 	display: inherit;
147 | 	clip: rect(0 0 0 0);
148 | 
149 | 	&:focus {
150 | 		clip: auto;
151 | 	}
152 | }
153 | 
154 | //
155 | // from bootstrap grid...not sure if we need this
156 | //
157 | /* stylelint-disable at-rule-no-vendor-prefix */
158 | @-ms-viewport {
159 | 	width: device-width;
160 | }
161 | /* stylelint-enable at-rule-no-vendor-prefix */
162 | 


--------------------------------------------------------------------------------
/tests/all/scss/core.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @render: Base-L
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | // @hanakin -- @midaym
  7 | //
  8 | // Base-L is a true core css framework.
  9 | //
 10 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
 11 | //
 12 | // Providing a strong foundation to add components and objects to. It provides
 13 | // true scalability and extendability while keeping maintainability and
 14 | // specificity in check.
 15 | //
 16 | // It provides a strict structure and guidlines for how your css is to be written
 17 | // to keep your projects in check as they grow and evolve.
 18 | //
 19 | // The frmework was designed and developed along side the popular forum software
 20 | // PHPBB as its core template library. By providing the most comon foundations
 21 | // in a higher layer we allow for better control and flexability in component
 22 | // design and themeing while still balancing maintainability and specificity.
 23 | //
 24 | //
 25 | // The MIT License (MIT)
 26 | //
 27 | // Copyright (c) 2015 Michael Miday
 28 | //
 29 | // Permission is hereby granted, free of charge, to any person obtaining a copy
 30 | // of this software and associated documentation files (the "Software"), to
 31 | // deal in the Software without restriction, including without limitation the
 32 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 33 | // sell copies of the Software, and to permit persons to whom the Software is
 34 | // furnished to do so, subject to the following conditions:
 35 | //
 36 | // The above copyright notice and this permission notice shall be included in
 37 | // all copies or substantial portions of the Software.
 38 | //
 39 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 40 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 41 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 42 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 43 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 44 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 45 | // SOFTWARE.
 46 | //
 47 | 
 48 | //
 49 | // CONTENTS
 50 | //
 51 | // 1. Settings.....................The global settings only no object or
 52 | //                                 component settings. Those belong in the
 53 | //                                 individual partial files
 54 | //
 55 | // 2. Tools........................These are the mixins & functions used.
 56 | //
 57 | // 3. Generic......................This is for normalizing and reseting the css.
 58 | //
 59 | // 4. Base.........................This contains only the default html entitiy
 60 | //                                 styles, no classes or ids here.
 61 | //
 62 | // 5. Objects......................This contains all objects or partials to
 63 | //                                 build components.
 64 | //
 65 | // 6. Components...................Her is where you can build the component
 66 | //                                 library for your project.
 67 | //
 68 | // 7. Theme........................Here you can specifiy and theme ulterations
 69 | //                                 to use with your objects & components.
 70 | //
 71 | // 8. Utilities....................This is where all your trumps or utility
 72 | //                                 classes go those that usually contain the
 73 | //                                 highest specificity.
 74 | //
 75 | 
 76 | 
 77 | // 1. Global Settings
 78 | //-------------------------
 79 | @import "settings/settings";
 80 | 
 81 | 
 82 | // 2. Tools
 83 | //-------------------------
 84 | @import "tools/function/functions";
 85 | @import "tools/mixin/mixins";
 86 | 
 87 | 
 88 | // 3. Generic
 89 | //-------------------------
 90 | /* stylelint-disable no-duplicate-selectors */
 91 | @import "generic/normalize";
 92 | @import "generic/box-sizing";
 93 | 
 94 | // Resets
 95 | @import "generic/reset/global";
 96 | @import "generic/reset/type";
 97 | @import "generic/reset/groupings";
 98 | @import "generic/reset/other";
 99 | @import "generic/reset/tables";
100 | @import "generic/reset/forms";
101 | 
102 | 
103 | // 4. Base
104 | //-------------------------
105 | @import "base/global";
106 | @import "base/links";
107 | @import "base/type";
108 | @import "base/forms";
109 | @import "base/table";
110 | @import "base/code";
111 | /* stylelint-enable no-duplicate-selectors */
112 | 
113 | // 5. Ojbjects
114 | //-------------------------
115 | @import "objects/button";
116 | @import "objects/icon";
117 | @import "objects/grid";
118 | @import "objects/col";
119 | @import "objects/tag";
120 | 


--------------------------------------------------------------------------------
/.postcss-sorting.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"order": [
  3 | 		"custom-properties",
  4 | 		"dollar-variables",
  5 | 		{
  6 | 			"type": "at-rule",
  7 | 			"name": "include"
  8 | 		},
  9 | 		"declarations",
 10 | 		"rules",
 11 | 		{
 12 | 			"type": "at-rule",
 13 | 			"name": "media"
 14 | 		}
 15 | 	],
 16 | 	"properties-order": [
 17 | 		{
 18 | 			"emptyLineBefore": false,
 19 | 			"properties": [
 20 | 				"font",
 21 | 				"font-family",
 22 | 				"font-size",
 23 | 				"font-weight",
 24 | 				"font-style",
 25 | 				"font-variant",
 26 | 				"font-size-adjust",
 27 | 				"font-stretch",
 28 | 				"font-effect",
 29 | 				"font-emphasize",
 30 | 				"font-emphasize-position",
 31 | 				"font-emphasize-style",
 32 | 				"font-smooth",
 33 | 				"font-smoothing",
 34 | 				"line-height",
 35 | 				"text-align",
 36 | 				"text-align-last",
 37 | 				"vertical-align",
 38 | 				"white-space",
 39 | 				"text-decoration",
 40 | 				"text-emphasis",
 41 | 				"text-emphasis-color",
 42 | 				"text-emphasis-style",
 43 | 				"text-emphasis-position",
 44 | 				"text-indent",
 45 | 				"text-justify",
 46 | 				"letter-spacing",
 47 | 				"word-spacing",
 48 | 				"writing-mode",
 49 | 				"text-outline",
 50 | 				"text-transform",
 51 | 				"text-size-adjust",
 52 | 				"text-wrap",
 53 | 				"text-overflow",
 54 | 				"text-overflow-ellipsis",
 55 | 				"text-overflow-mode",
 56 | 				"word-wrap",
 57 | 				"word-break",
 58 | 				"tab-size",
 59 | 				"hyphens"
 60 | 			]
 61 | 		},
 62 | 		{
 63 | 			"emptyLineBefore": false,
 64 | 			"properties": [
 65 | 				"background",
 66 | 				"background-color",
 67 | 				"background-image",
 68 | 				"background-repeat",
 69 | 				"background-attachment",
 70 | 				"background-position",
 71 | 				"background-position-x",
 72 | 				"background-position-y",
 73 | 				"background-clip",
 74 | 				"background-origin",
 75 | 				"background-size",
 76 | 				"interpolation-mode",
 77 | 				"filter",
 78 | 				"border",
 79 | 				"border-width",
 80 | 				"border-style",
 81 | 				"border-color",
 82 | 				"border-top",
 83 | 				"border-top-width",
 84 | 				"border-top-style",
 85 | 				"border-top-color",
 86 | 				"border-right",
 87 | 				"border-right-width",
 88 | 				"border-right-style",
 89 | 				"border-right-color",
 90 | 				"border-bottom",
 91 | 				"border-bottom-width",
 92 | 				"border-bottom-style",
 93 | 				"border-bottom-color",
 94 | 				"border-left",
 95 | 				"border-left-width",
 96 | 				"border-left-style",
 97 | 				"border-left-color",
 98 | 				"border-radius",
 99 | 				"border-top-left-radius",
100 | 				"border-top-right-radius",
101 | 				"border-bottom-right-radius",
102 | 				"border-bottom-left-radius",
103 | 				"border-image",
104 | 				"border-image-source",
105 | 				"border-image-slice",
106 | 				"border-image-width",
107 | 				"border-image-outset",
108 | 				"border-image-repeat",
109 | 				"outline",
110 | 				"outline-width",
111 | 				"outline-style",
112 | 				"outline-color",
113 | 				"outline-offset",
114 | 				"tap-highlight-color"
115 | 			]
116 | 		},
117 | 		{
118 | 			"emptyLineBefore": false,
119 | 			"properties": [
120 | 				"box-decoration-break",
121 | 				"box-shadow",
122 | 				"text-shadow"
123 | 			]
124 | 		},
125 | 		{
126 | 			"emptyLineBefore": false,
127 | 			"properties": [
128 | 				"color",
129 | 				"opacity"
130 | 			]
131 | 		},
132 | 		{
133 | 			"emptyLineBefore": false,
134 | 			"properties": [
135 | 				"position",
136 | 				"z-index",
137 | 				"top",
138 | 				"right",
139 | 				"bottom",
140 | 				"left"
141 | 			]
142 | 		},
143 | 		{
144 | 			"emptyLineBefore": false,
145 | 			"properties": [
146 | 				"display",
147 | 				"visibility",
148 | 				"float",
149 | 				"clear",
150 | 				"overflow",
151 | 				"overflow-x",
152 | 				"overflow-y",
153 | 				"overflow-scrolling",
154 | 				"clip",
155 | 				"zoom",
156 | 				"flex",
157 | 				"flex-direction",
158 | 				"flex-order",
159 | 				"flex-pack",
160 | 				"flex-align",
161 | 				"flex-basis",
162 | 				"flex-grow",
163 | 				"flex-shrink",
164 | 				"flex-wrap",
165 | 				"justify-content",
166 | 				"align-items",
167 | 				"align-self"
168 | 			]
169 | 		},
170 | 		{
171 | 			"emptyLineBefore": false,
172 | 			"properties": [
173 | 				"box-sizing",
174 | 				"width",
175 | 				"min-width",
176 | 				"max-width",
177 | 				"height",
178 | 				"min-height",
179 | 				"max-height",
180 | 				"margin",
181 | 				"margin-top",
182 | 				"margin-right",
183 | 				"margin-bottom",
184 | 				"margin-left",
185 | 				"padding",
186 | 				"padding-top",
187 | 				"padding-right",
188 | 				"padding-bottom",
189 | 				"padding-left"
190 | 			]
191 | 		},
192 | 		{
193 | 			"emptyLineBefore": false,
194 | 			"properties": [
195 | 				"table-layout",
196 | 				"empty-cells",
197 | 				"caption-side",
198 | 				"border-spacing",
199 | 				"border-collapse",
200 | 				"list-style",
201 | 				"list-style-position",
202 | 				"list-style-type",
203 | 				"list-style-image"
204 | 			]
205 | 		},
206 | 		{
207 | 			"emptyLineBefore": false,
208 | 			"properties": [
209 | 				"content",
210 | 				"quotes",
211 | 				"counter-reset",
212 | 				"counter-increment",
213 | 				"resize",
214 | 				"cursor",
215 | 				"touch-callout",
216 | 				"touch-action",
217 | 				"user-select",
218 | 				"nav-index",
219 | 				"nav-up",
220 | 				"nav-right",
221 | 				"nav-down",
222 | 				"nav-left",
223 | 				"transition",
224 | 				"transition-delay",
225 | 				"transition-timing-function",
226 | 				"transition-duration",
227 | 				"transition-property",
228 | 				"transform",
229 | 				"transform-origin",
230 | 				"animation",
231 | 				"animation-name",
232 | 				"animation-duration",
233 | 				"animation-play-state",
234 | 				"animation-timing-function",
235 | 				"animation-delay",
236 | 				"animation-iteration-count",
237 | 				"animation-direction",
238 | 				"pointer-events"
239 | 			]
240 | 		}
241 | 	],
242 | 	"unspecified-properties-position": "bottomAlphabetical"
243 | }


--------------------------------------------------------------------------------
/tests/all/scss/generic/reset/_forms.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // #generic: Forms
  3 | //------------------------------------------------------------------------------
  4 | // #description:
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // #settings
 10 | // Layout Variables
 11 | $base-form-spacing: ($default-line-height / 3);
 12 | $base-double-spacing: ($base-form-spacing * 2);
 13 | $base-half-spacing: ($base-form-spacing / 2);
 14 | $base-quarter-spacing: ($base-half-spacing / 2);
 15 | 
 16 | //
 17 | // #scss
 18 | 
 19 | form {
 20 | 	@include vertical-rhythm();
 21 | 	padding: 0;
 22 | }
 23 | 
 24 | //
 25 | // Organizational elements
 26 | //------------------------------------------------------------------------------
 27 | //
 28 | // 1. Allow labels to use `margin` for spacing.
 29 | // 2. Chrome and Firefox set a `min-width: min-content;` on fieldsets,
 30 | //    so we reset that to ensure it behaves more like a standard block element.
 31 | //    See https://github.com/twbs/bootstrap/issues/12359.
 32 | //
 33 | label {
 34 | 	display: inline-block;
 35 | 	margin: 0 $base-form-spacing $base-double-spacing; // [1]
 36 | }
 37 | 
 38 | fieldset { // [2]
 39 | 	@include vertical-rhythm();
 40 | 	border: 0;
 41 | 	min-width: 0;
 42 | 	padding: 0;
 43 | }
 44 | 
 45 | legend {
 46 | 	@include type(headline);
 47 | 	display: block;
 48 | 	width: 100%;
 49 | 	margin: 0 0 $base-double-spacing;
 50 | }
 51 | 
 52 | //
 53 | // Control elements
 54 | //------------------------------------------------------------------------------
 55 | //
 56 | // 1. Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc
 57 | //    are properly inherited. However, `line-height` isn't addressed there.
 58 | //    Using this ensures we don't need to unnecessarily redeclare the global
 59 | //    font stack.
 60 | // 2. iOS adds rounded borders by default
 61 | // 3. Ensure all elements have same inital alignment
 62 | //
 63 | input,
 64 | button,
 65 | select,
 66 | optgroup,
 67 | textarea {
 68 | 	line-height: inherit; // [1]
 69 | 	vertical-align: middle; // [3]
 70 | 	background-color: transparent;
 71 | 	background-image: none; // [2]
 72 | 	background-clip: padding-box;
 73 | 	-webkit-border-radius: 0; // [2] iOS 8+
 74 | 	border-radius: 0; // [2]
 75 | 	color: inherit;
 76 | }
 77 | 
 78 | //
 79 | // Buttons
 80 | //------------------------------------------------------------------------------
 81 | //
 82 | // 1. Work around a Firefox/IE bug where the transparent `button` background
 83 | //    results in a loss of the default `button` focus styles.
 84 | // 2. iOS 'clickable elements' fix for role="button" Fixes 'clickability' issue
 85 | //    (and more generally, the firing of events such as focus as well) for
 86 | //    traditionally non-focusable elements with role="button"
 87 | //    see: https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 88 | //
 89 | button {
 90 | 	background: transparent;
 91 | 	border: $default-border-size solid $default-gray;
 92 | 	padding: ($base-double-spacing / 2) $base-quarter-spacing;
 93 | 	cursor: pointer;
 94 | 
 95 | 	&:focus {
 96 | 		outline: 1px dotted; // [1]
 97 | 		outline: 4px auto -webkit-focus-ring-color; // [1]
 98 | 	}
 99 | }
100 | 
101 | // [2]
102 | [role="button"] {
103 | 	cursor: pointer;
104 | }
105 | 
106 | //
107 | // Inputs
108 | //------------------------------------------------------------------------------
109 | //
110 | // 1. Radios & Checkboxes require slight spacing on the right to account for
111 | //    labels.
112 | // 2. Apply a disabled cursor for radios and checkboxes.
113 | // 3. Remove the default appearance of temporal inputs to avoid a Mobile Safari
114 | //    bug where setting a custom line-height prevents text from being vertically
115 | //    centered within the input. Bug report: https://github.com/twbs/bootstrap/issues/11266
116 | // 4. This overrides the extra rounded corners on search inputs in iOS so that
117 | //    our `.form-control` class can properly style them. Note that this cannot
118 | //    simply be added to `.form-control` as it's not specific enough.
119 | //    For details, see: https://github.com/twbs/bootstrap/issues/11586.
120 | // 5. specify the minimum height of form controls.
121 | //
122 | // Note: Neither radios nor checkboxes can be readonly.
123 | //
124 | input[type="radio"],
125 | input[type="checkbox"] {
126 | 	margin-right: $base-form-spacing; // [1]
127 | 
128 | 	&:disabled {
129 | 		cursor: not-allowed; // [2]
130 | 	}
131 | }
132 | 
133 | // [3]
134 | input[type="date"],
135 | input[type="time"],
136 | input[type="datetime-local"],
137 | input[type="month"] {
138 | 	-webkit-appearance: listbox;
139 | }
140 | 
141 | [type="number"]::-webkit-inner-spin-button,
142 | [type="number"]::-webkit-outer-spin-button {
143 | 	height: auto;
144 | }
145 | 
146 | [type="date"]::-webkit-inner-spin-button {
147 | 	display: none;
148 | 	-webkit-appearance: none;
149 | }
150 | 
151 | // [4]
152 | input[type="search"] {
153 | 	-webkit-appearance: none;
154 | }
155 | 
156 | // todo: needed?
157 | output {
158 | 	display: inline-block;
159 | }
160 | 
161 | // [5]
162 | button,
163 | [type="button"],
164 | [type="date"],
165 | [type="datetime"],
166 | [type="datetime-local"],
167 | [type="email"],
168 | [type="month"],
169 | [type="number"],
170 | [type="password"],
171 | [type="reset"],
172 | [type="search"],
173 | [type="submit"],
174 | [type="tel"],
175 | [type="text"],
176 | [type="time"],
177 | [type="url"],
178 | [type="week"],
179 | [type="color"],
180 | select,
181 | textarea {
182 | 	min-height: $default-line-height;
183 | }
184 | 
185 | input[type="color"] {
186 | 	vertical-align: middle; // [1]
187 | 	padding: $base-quarter-spacing;
188 | }
189 | 
190 | //
191 | // Selects & Textareas
192 | //------------------------------------------------------------------------------
193 | //
194 | // 1. Align when inline to top for better conssistant alignments.
195 | // 2. Allow only vertical resizing of textareas.
196 | // 3. Specify the standard appearance of selects
197 | //
198 | select[multiple="multiple"],
199 | textarea {
200 | 	vertical-align: top; // [1]
201 | }
202 | 
203 | select[multiple="multiple"] {
204 | 	height: auto;
205 | }
206 | 
207 | textarea {
208 | 	resize: vertical; // [2]
209 | }
210 | 
211 | // [3]
212 | select {
213 | 	-moz-appearance: none; // Firefox 40+
214 | 	-webkit-appearance: none; // Chrome 45+
215 | 
216 | 	&::-ms-expand {
217 | 		background-color: transparent; // IE 10+
218 | 		border: 0; // IE 10+
219 | 		display: none; // Edge 12+, IE 11-
220 | 	}
221 | 
222 | 	&::-ms-value {
223 | 		color: currentColor; // Edge 12+, IE 11-
224 | 	}
225 | }
226 | 


--------------------------------------------------------------------------------
/tests/all/scss/components/_list.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // @component: List
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // @settings
 10 | 
 11 | // Layout Variables
 12 | $list-spacing: 16px !default;
 13 | $list-border-radius: $default-border-radius !default;
 14 | $list-height: 72px !default;
 15 | $list-icon-size: 40px !default;
 16 | $list-margin-bottom: 24px !default;
 17 | $list-heading-margin-bottom: -32px !default;
 18 | $list-title-line-height: 20px !default;
 19 | $list-subheader-line-height: 18px !default;
 20 | $list-data-spacing: 16px !default;
 21 | $list-data-icon-size: 18px !default;
 22 | $list-data-icon-margin: ($list-data-icon-size / 2) !default;
 23 | $list-action-icon-margin-left: 8px !default;
 24 | $list-action-img-size: 34px !default;
 25 | $list-action-img-margin-bottom: 8px !default;
 26 | $list-border-style: solid !default;
 27 | 
 28 | // Theme Variables
 29 | $list-icon-color: $default-secondary-color !default;
 30 | $list-icon-color-read: $default-primary-color !default;
 31 | $list-hover-color: $gray-50 !default;
 32 | $list-action-hover-color: $default-action-bg-hover !default;
 33 | $list-action-icon-color: $default-action-color !default;
 34 | $list-action-hover-icon-color: $default-action-color-hover !default;
 35 | $list-header-color: $default-action-bg !default;
 36 | $list-border-color: rgba(0, 0, 0, 0.125) !default;
 37 | 
 38 | 
 39 | //
 40 | // @scss
 41 | .c-list {
 42 | 	@include shadow(2);
 43 | 	border-radius: $list-border-radius;
 44 | 	margin: 0;
 45 | 	margin-bottom: $list-margin-bottom;
 46 | 	padding: 0;
 47 | 	list-style: none;
 48 | 
 49 | 	&-header {
 50 | 		background-color: $list-header-color;
 51 | 		display: flex;
 52 | 		flex-direction: row;
 53 | 		flex-wrap: nowrap;
 54 | 
 55 | 		&-title {
 56 | 			@include type(title);
 57 | 			line-height: unitless($list-title-line-height, map-get(map-get($type-styles, title), font-size));
 58 | 			float: left;
 59 | 			flex: 1;
 60 | 			margin-bottom: 0;
 61 | 			padding: $list-spacing;
 62 | 		}
 63 | 
 64 | 		&-actions {
 65 | 			margin: 0;
 66 | 			padding: 0;
 67 | 			list-style: none;
 68 | 		}
 69 | 
 70 | 		&-action {
 71 | 			display: flex;
 72 | 			float: right;
 73 | 
 74 | 			&-item {
 75 | 				position: relative;
 76 | 			}
 77 | 
 78 | 			&-link {
 79 | 				color: $list-action-icon-color;
 80 | 				display: inline-block;
 81 | 				padding: $list-spacing;
 82 | 
 83 | 				&:hover,
 84 | 				&:focus {
 85 | 					background-color: $list-action-hover-color;
 86 | 					color: $list-action-hover-icon-color;
 87 | 				}
 88 | 
 89 | 				&-icon {
 90 | 					margin-right: 0;
 91 | 				}
 92 | 
 93 | 				&-icon:hover {
 94 | 					text-decoration: none;
 95 | 				}
 96 | 			}
 97 | 		}
 98 | 	}
 99 | 
100 | 	&-item {
101 | 		@include type(subhead2);
102 | 		border-top: 1px solid $list-border-color;
103 | 		display: flex;
104 | 		flex-direction: row;
105 | 		flex-wrap: nowrap;
106 | 		min-height: $list-height;
107 | 		padding: $list-spacing;
108 | 
109 | 		&:hover {
110 | 			background-color: $list-hover-color;
111 | 		}
112 | 	}
113 | 
114 | 	&-type {
115 | 		padding-right: $list-spacing;
116 | 
117 | 		&-icon {
118 | 			color: $list-icon-color;
119 | 			width: $list-icon-size;
120 | 			height: $list-icon-size;
121 | 			margin-right: 0;
122 | 
123 | 			&-read {
124 | 				color: $list-icon-color-read;
125 | 			}
126 | 		}
127 | 	}
128 | 
129 | 	&-primary {
130 | 		display: flex;
131 | 		flex-direction: column;
132 | 		flex-wrap: nowrap;
133 | 		width: 100%;
134 | 	}
135 | 
136 | 	&-heading {
137 | 		display: flex;
138 | 		flex: 1;
139 | 		flex-direction: row;
140 | 		flex-wrap: nowrap;
141 | 		@media (min-width: $bp-md) {
142 | 			margin-bottom: $list-heading-margin-bottom;
143 | 		}
144 | 	}
145 | 
146 | 	&-title {
147 | 		@include type(subhead2);
148 | 		line-height: unitless($list-title-line-height, map-get(map-get($type-styles, subhead2), font-size));
149 | 		flex: 1;
150 | 		margin-bottom: 0;
151 | 	}
152 | 
153 | 	&-link:hover {
154 | 		text-decoration: underline;
155 | 	}
156 | 
157 | 	&-action {
158 | 		display: inline-flex;
159 | 		margin-left: $list-action-icon-margin-left;
160 | 
161 | 		&-body {
162 | 			@media (min-width: $bp-md) {
163 | 				margin-right: $list-spacing;
164 | 			}
165 | 		}
166 | 
167 | 		&-img {
168 | 			border-radius: 50%;
169 | 			display: none;
170 | 			width: $list-action-img-size;
171 | 			height: $list-action-img-size;
172 | 			margin-bottom: $list-action-img-margin-bottom;
173 | 			@media (min-width: $bp-lg) {
174 | 				display: inline;
175 | 			}
176 | 		}
177 | 
178 | 		&-list {
179 | 			text-align: right;
180 | 			margin: 0;
181 | 			padding: 0;
182 | 			list-style: none;
183 | 		}
184 | 
185 | 		&-link:hover {
186 | 			text-decoration: underline;
187 | 		}
188 | 
189 | 		&-user {
190 | 			display: none;
191 | 			@media (min-width: $bp-md) {
192 | 				display: inline-block;
193 | 			}
194 | 		}
195 | 
196 | 		&-time {
197 | 			@include type(caption);
198 | 			@media (min-width: $bp-md) {
199 | 				@include type(body1);
200 | 			}
201 | 		}
202 | 	}
203 | 
204 | 	&-subheader {
205 | 		@include type(body1);
206 | 		line-height: unitless($list-subheader-line-height, map-get(map-get($type-styles, body1), font-size));
207 | 		margin-top: ($list-data-spacing / 2);
208 | 		margin-bottom: 0;
209 | 	}
210 | 
211 | 	&-data {
212 | 		display: inline-block;
213 | 		padding-right: $list-data-spacing;
214 | 
215 | 		&-time {
216 | 			display: none;
217 | 			@media (min-width: $bp-lg) {
218 | 				display: inline-block;
219 | 			}
220 | 		}
221 | 
222 | 		&-views {
223 | 			display: none;
224 | 			@media (min-width: $bp-md) {
225 | 				display: inline-block;
226 | 			}
227 | 		}
228 | 
229 | 		// &-user {
230 | 		// 	display: none;
231 | 		// }
232 | 
233 | 		&-icon {
234 | 			width: $list-data-icon-size;
235 | 			height: $list-data-icon-size;
236 | 			margin-right: $list-data-icon-margin;
237 | 		}
238 | 
239 | 		&-link:hover {
240 | 			text-decoration: underline;
241 | 		}
242 | 	}
243 | }
244 | 
245 | .paging {
246 | 	display: inline-flex;
247 | 	margin: 0;
248 | 	padding: 0;
249 | 	list-style: none;
250 | 	align-content: center;
251 | 
252 | 	&-icon {
253 | 		margin-right: 8px;
254 | 	}
255 | 
256 | 	&-item {
257 | 		margin: 0 2px;
258 | 	}
259 | 
260 | 	&-link {
261 | 		@include type(caption);
262 | 		background: $gray-200;
263 | 		border-radius: 2px;
264 | 		margin: 0;
265 | 		padding: 2px 4px;
266 | 
267 | 		&:hover {
268 | 			text-decoration: none;
269 | 			background: $gray-400;
270 | 		}
271 | 
272 | 		&-icon {
273 | 			width: 18px;
274 | 			height: 18px;
275 | 			margin: 0;
276 | 		}
277 | 	}
278 | 	@media (min-width: $bp-md) {
279 | 		margin-left: 8px;
280 | 	}
281 | }
282 | 


--------------------------------------------------------------------------------
/tests/all/scss/components/_topic.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // @component: Topic
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | //------------------------------------------------------------------------------
  7 | 
  8 | //
  9 | // @settings
 10 | 
 11 | // Layout Variables
 12 | $topic-spacing: 16px !default;
 13 | $topic-border-radius: $default-border-radius !default;
 14 | $topic-height: 72px !default;
 15 | $topic-icon-size: 40px !default;
 16 | $topic-margin-bottom: 24px !default;
 17 | $topic-heading-margin-bottom: -32px !default;
 18 | $topic-title-line-height: 20px !default;
 19 | $topic-subheader-line-height: 18px !default;
 20 | $topic-data-spacing: 16px !default;
 21 | $topic-data-icon-size: 18px !default;
 22 | $topic-data-icon-margin: ($topic-data-icon-size / 2) !default;
 23 | $topic-action-icon-margin-left: 8px !default;
 24 | $topic-action-img-size: 34px !default;
 25 | $topic-action-img-margin-bottom: 8px !default;
 26 | $topic-border-style: solid !default;
 27 | 
 28 | // Theme Variables
 29 | $topic-icon-color: $default-secondary-color !default;
 30 | $topic-icon-color-read: $default-primary-color !default;
 31 | $topic-hover-color: $gray-50 !default;
 32 | $topic-action-hover-color: $default-action-bg-hover !default;
 33 | $topic-action-icon-color: $default-action-color !default;
 34 | $topic-action-hover-icon-color: $default-action-color-hover !default;
 35 | $topic-header-color: $default-action-bg !default;
 36 | $topic-border-color: rgba(0, 0, 0, 0.125) !default;
 37 | 
 38 | 
 39 | //
 40 | // @scss
 41 | .c-topic {
 42 | 	@include shadow(2);
 43 | 	border-radius: $topic-border-radius;
 44 | 	margin: 0;
 45 | 	margin-bottom: $topic-margin-bottom;
 46 | 	padding: 0;
 47 | 	list-style: none;
 48 | 
 49 | 	&-header {
 50 | 		background-color: $topic-header-color;
 51 | 		display: flex;
 52 | 		flex-direction: row;
 53 | 		flex-wrap: nowrap;
 54 | 
 55 | 		&-title {
 56 | 			@include type(title);
 57 | 			line-height: unitless($topic-title-line-height, map-get(map-get($type-styles, title), font-size));
 58 | 			float: left;
 59 | 			flex: 1;
 60 | 			margin-bottom: 0;
 61 | 			padding: $topic-spacing;
 62 | 		}
 63 | 
 64 | 		&-actions {
 65 | 			margin: 0;
 66 | 			padding: 0;
 67 | 			list-style: none;
 68 | 		}
 69 | 
 70 | 		&-action {
 71 | 			display: flex;
 72 | 			float: right;
 73 | 
 74 | 			&-item {
 75 | 				position: relative;
 76 | 			}
 77 | 
 78 | 			&-link {
 79 | 				color: $topic-action-icon-color;
 80 | 				display: inline-block;
 81 | 				padding: $topic-spacing;
 82 | 
 83 | 				&:hover,
 84 | 				&:focus {
 85 | 					background-color: $topic-action-hover-color;
 86 | 					color: $topic-action-hover-icon-color;
 87 | 				}
 88 | 
 89 | 				&-icon {
 90 | 					margin-right: 0;
 91 | 				}
 92 | 
 93 | 				&-icon:hover {
 94 | 					text-decoration: none;
 95 | 				}
 96 | 			}
 97 | 		}
 98 | 	}
 99 | 
100 | 	&-item {
101 | 		@include type(subhead2);
102 | 		border-top: 1px solid $topic-border-color;
103 | 		display: flex;
104 | 		flex-direction: row;
105 | 		flex-wrap: nowrap;
106 | 		min-height: $topic-height;
107 | 		padding: $topic-spacing;
108 | 
109 | 		&:hover {
110 | 			background-color: $topic-hover-color;
111 | 		}
112 | 	}
113 | 
114 | 	&-type {
115 | 		padding-right: $topic-spacing;
116 | 
117 | 		&-icon {
118 | 			color: $topic-icon-color;
119 | 			width: $topic-icon-size;
120 | 			height: $topic-icon-size;
121 | 			margin-right: 0;
122 | 
123 | 			&-read {
124 | 				color: $topic-icon-color-read;
125 | 			}
126 | 		}
127 | 	}
128 | 
129 | 	&-primary {
130 | 		display: flex;
131 | 		flex-direction: column;
132 | 		flex-wrap: nowrap;
133 | 		width: 100%;
134 | 	}
135 | 
136 | 	&-heading {
137 | 		display: flex;
138 | 		flex: 1;
139 | 		flex-direction: row;
140 | 		flex-wrap: nowrap;
141 | 		@media (min-width: $bp-md) {
142 | 			margin-bottom: $topic-heading-margin-bottom;
143 | 		}
144 | 	}
145 | 
146 | 	&-title {
147 | 		@include type(subhead2);
148 | 		line-height: unitless($topic-title-line-height, map-get(map-get($type-styles, subhead2), font-size));
149 | 		flex: 1;
150 | 		margin-bottom: 0;
151 | 	}
152 | 
153 | 	&-link:hover {
154 | 		text-decoration: underline;
155 | 	}
156 | 
157 | 	&-action {
158 | 		display: inline-flex;
159 | 		margin-left: $topic-action-icon-margin-left;
160 | 
161 | 		&-body {
162 | 			@media (min-width: $bp-md) {
163 | 				margin-right: $topic-spacing;
164 | 			}
165 | 		}
166 | 
167 | 		&-img {
168 | 			border-radius: 50%;
169 | 			display: none;
170 | 			width: $topic-action-img-size;
171 | 			height: $topic-action-img-size;
172 | 			margin-bottom: $topic-action-img-margin-bottom;
173 | 			@media (min-width: $bp-lg) {
174 | 				display: inline;
175 | 			}
176 | 		}
177 | 
178 | 		&-topic {
179 | 			text-align: right;
180 | 			margin: 0;
181 | 			padding: 0;
182 | 			list-style: none;
183 | 		}
184 | 
185 | 		&-link:hover {
186 | 			text-decoration: underline;
187 | 		}
188 | 
189 | 		&-user {
190 | 			display: none;
191 | 			@media (min-width: $bp-md) {
192 | 				display: inline-block;
193 | 			}
194 | 		}
195 | 
196 | 		&-time {
197 | 			@include type(caption);
198 | 			@media (min-width: $bp-md) {
199 | 				@include type(body1);
200 | 			}
201 | 		}
202 | 	}
203 | 
204 | 	&-subheader {
205 | 		@include type(body1);
206 | 		line-height: unitless($topic-subheader-line-height, map-get(map-get($type-styles, body1), font-size));
207 | 		margin-top: ($topic-data-spacing / 2);
208 | 		margin-bottom: 0;
209 | 	}
210 | 
211 | 	&-data {
212 | 		display: inline-block;
213 | 		padding-right: $topic-data-spacing;
214 | 
215 | 		&-time {
216 | 			display: none;
217 | 			@media (min-width: $bp-lg) {
218 | 				display: inline-block;
219 | 			}
220 | 		}
221 | 
222 | 		&-views {
223 | 			display: none;
224 | 			@media (min-width: $bp-md) {
225 | 				display: inline-block;
226 | 			}
227 | 		}
228 | 
229 | 		// &-user {
230 | 		// 	display: none;
231 | 		// }
232 | 
233 | 		&-icon {
234 | 			width: $topic-data-icon-size;
235 | 			height: $topic-data-icon-size;
236 | 			margin-right: $topic-data-icon-margin;
237 | 		}
238 | 
239 | 		&-link:hover {
240 | 			text-decoration: underline;
241 | 		}
242 | 	}
243 | }
244 | 
245 | .paging {
246 | 	display: inline-flex;
247 | 	margin: 0;
248 | 	padding: 0;
249 | 	list-style: none;
250 | 	align-content: center;
251 | 
252 | 	&-icon {
253 | 		margin-right: 8px;
254 | 	}
255 | 
256 | 	&-item {
257 | 		margin: 0 2px;
258 | 	}
259 | 
260 | 	&-link {
261 | 		@include type(caption);
262 | 		background: $gray-200;
263 | 		border-radius: 2px;
264 | 		margin: 0;
265 | 		padding: 2px 4px;
266 | 
267 | 		&:hover {
268 | 			text-decoration: none;
269 | 			background: $gray-400;
270 | 		}
271 | 
272 | 		&-icon {
273 | 			width: 18px;
274 | 			height: 18px;
275 | 			margin: 0;
276 | 		}
277 | 	}
278 | 	@media (min-width: $bp-md) {
279 | 		margin-left: 8px;
280 | 	}
281 | }
282 | 


--------------------------------------------------------------------------------
/src/scss/tools/mixin/_shadows.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @tool: Shadows
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | // Mixin for generating Google Material Design shadows
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | $shadow-key-umbra-opacity: 0.2 !default;
 13 | $shadow-key-penumbra-opacity: 0.14 !default;
 14 | $shadow-ambient-shadow-opacity: 0.12 !default;
 15 | 
 16 | $shadows: (
 17 | 	0: (
 18 | 		umbra: none
 19 | 	),
 20 | 	1: (
 21 | 		penumbra: 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 22 | 		umbra: 0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 23 | 		ambient: 0 1px 3px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 24 | 	),
 25 | 	2: (
 26 | 		penumbra: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 27 | 		umbra: 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 28 | 		ambient: 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 29 | 	),
 30 | 	3: (
 31 | 		penumbra: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 32 | 		umbra: 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 33 | 		ambient: 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 34 | 	),
 35 | 	4: (
 36 | 		penumbra: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 37 | 		umbra: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 38 | 		ambient: 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 39 | 	),
 40 | 	5: (
 41 | 		penumbra: 0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 42 | 		umbra: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 43 | 		ambient: 0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 44 | 	),
 45 | 	6: (
 46 | 		penumbra: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 47 | 		umbra: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 48 | 		ambient: 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 49 | 	),
 50 | 	7: (
 51 | 		penumbra: 0 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 52 | 		umbra: 0 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 53 | 		ambient: 0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 54 | 	),
 55 | 	8: (
 56 | 		penumbra: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 57 | 		umbra: 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 58 | 		ambient: 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 59 | 	),
 60 | 	9: (
 61 | 		penumbra: 0 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 62 | 		umbra: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 63 | 		ambient: 0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 64 | 	),
 65 | 	10: (
 66 | 		penumbra: 0 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 67 | 		umbra: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 68 | 		ambient: 0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 69 | 	),
 70 | 	11: (
 71 | 		penumbra: 0 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 72 | 		umbra: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 73 | 		ambient: 0 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 74 | 	),
 75 | 	12: (
 76 | 		penumbra: 0 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 77 | 		umbra: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 78 | 		ambient: 0 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 79 | 	),
 80 | 	13: (
 81 | 		penumbra: 0 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 82 | 		umbra: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 83 | 		ambient: 0 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 84 | 	),
 85 | 	14: (
 86 | 		penumbra: 0 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 87 | 		umbra: 0 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 88 | 		ambient: 0 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 89 | 	),
 90 | 	15: (
 91 | 		penumbra: 0 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 92 | 		umbra: 0 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 93 | 		ambient: 0 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 94 | 	),
 95 | 	16: (
 96 | 		penumbra: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 97 | 		umbra: 0 8px 10 -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 98 | 		ambient: 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 99 | 	),
100 | 	17: (
101 | 		penumbra: 0 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
102 | 		umbra: 0 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
103 | 		ambient: 0 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
104 | 	),
105 | 	18: (
106 | 		penumbra: 0 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
107 | 		umbra: 0 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
108 | 		ambient: 0 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
109 | 	),
110 | 	19: (
111 | 		penumbra: 0 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
112 | 		umbra: 0 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
113 | 		ambient: 0 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
114 | 	),
115 | 	20: (
116 | 		penumbra: 0 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
117 | 		umbra: 0 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
118 | 		ambient: 0 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
119 | 	),
120 | 	21: (
121 | 		penumbra: 0 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
122 | 		umbra: 0 10 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
123 | 		ambient: 0 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
124 | 	),
125 | 	22: (
126 | 		penumbra: 0 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
127 | 		umbra: 0 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
128 | 		ambient: 0 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
129 | 	),
130 | 	23: (
131 | 		penumbra: 0 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
132 | 		umbra: 0 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity),
133 | 		ambient: 0 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
134 | 	),
135 | 	24: (
136 | 		penumbra: 0 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
137 | 		umbra: 0 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity),
138 | 		ambient: 0 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
139 | 	)
140 | );
141 | 
142 | 
143 | //
144 | // @scss
145 | @mixin shadow($depth) {
146 | 	$shadow: map-get($shadows, $depth);
147 | 	// Focus Shadow
148 | 	@if not map-has-key($shadows, $depth) {
149 | 		box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36);
150 | 	} @else {
151 | 		box-shadow:
152 | 			map-get($shadow, penumbra),
153 | 			map-get($shadow, umbra),
154 | 			map-get($shadow, ambient);
155 | 	}
156 | }
157 | 


--------------------------------------------------------------------------------
/tests/all/scss/tools/mixin/_shadows.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @tool: Shadows
  3 | //------------------------------------------------------------------------------
  4 | // @description
  5 | //
  6 | // Mixin for generating Google Material Design shadows
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | $shadow-key-umbra-opacity: 0.2 !default;
 13 | $shadow-key-penumbra-opacity: 0.14 !default;
 14 | $shadow-ambient-shadow-opacity: 0.12 !default;
 15 | 
 16 | $shadows: (
 17 | 	0: (
 18 | 		umbra: none
 19 | 	),
 20 | 	1: (
 21 | 		penumbra: 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 22 | 		umbra: 0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 23 | 		ambient: 0 1px 3px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 24 | 	),
 25 | 	2: (
 26 | 		penumbra: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 27 | 		umbra: 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 28 | 		ambient: 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 29 | 	),
 30 | 	3: (
 31 | 		penumbra: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 32 | 		umbra: 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 33 | 		ambient: 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 34 | 	),
 35 | 	4: (
 36 | 		penumbra: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 37 | 		umbra: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 38 | 		ambient: 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 39 | 	),
 40 | 	5: (
 41 | 		penumbra: 0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 42 | 		umbra: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 43 | 		ambient: 0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 44 | 	),
 45 | 	6: (
 46 | 		penumbra: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 47 | 		umbra: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 48 | 		ambient: 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 49 | 	),
 50 | 	7: (
 51 | 		penumbra: 0 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 52 | 		umbra: 0 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 53 | 		ambient: 0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 54 | 	),
 55 | 	8: (
 56 | 		penumbra: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 57 | 		umbra: 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 58 | 		ambient: 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 59 | 	),
 60 | 	9: (
 61 | 		penumbra: 0 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 62 | 		umbra: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 63 | 		ambient: 0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 64 | 	),
 65 | 	10: (
 66 | 		penumbra: 0 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 67 | 		umbra: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 68 | 		ambient: 0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 69 | 	),
 70 | 	11: (
 71 | 		penumbra: 0 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 72 | 		umbra: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 73 | 		ambient: 0 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 74 | 	),
 75 | 	12: (
 76 | 		penumbra: 0 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 77 | 		umbra: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 78 | 		ambient: 0 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 79 | 	),
 80 | 	13: (
 81 | 		penumbra: 0 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 82 | 		umbra: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 83 | 		ambient: 0 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 84 | 	),
 85 | 	14: (
 86 | 		penumbra: 0 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 87 | 		umbra: 0 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 88 | 		ambient: 0 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 89 | 	),
 90 | 	15: (
 91 | 		penumbra: 0 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 92 | 		umbra: 0 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 93 | 		ambient: 0 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 94 | 	),
 95 | 	16: (
 96 | 		penumbra: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
 97 | 		umbra: 0 8px 10 -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
 98 | 		ambient: 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
 99 | 	),
100 | 	17: (
101 | 		penumbra: 0 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
102 | 		umbra: 0 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
103 | 		ambient: 0 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
104 | 	),
105 | 	18: (
106 | 		penumbra: 0 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
107 | 		umbra: 0 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
108 | 		ambient: 0 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
109 | 	),
110 | 	19: (
111 | 		penumbra: 0 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
112 | 		umbra: 0 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
113 | 		ambient: 0 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
114 | 	),
115 | 	20: (
116 | 		penumbra: 0 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
117 | 		umbra: 0 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
118 | 		ambient: 0 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
119 | 	),
120 | 	21: (
121 | 		penumbra: 0 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
122 | 		umbra: 0 10 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
123 | 		ambient: 0 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
124 | 	),
125 | 	22: (
126 | 		penumbra: 0 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
127 | 		umbra: 0 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
128 | 		ambient: 0 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
129 | 	),
130 | 	23: (
131 | 		penumbra: 0 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
132 | 		umbra: 0 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity),
133 | 		ambient: 0 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
134 | 	),
135 | 	24: (
136 | 		penumbra: 0 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
137 | 		umbra: 0 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity),
138 | 		ambient: 0 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity)
139 | 	)
140 | );
141 | 
142 | 
143 | //
144 | // @scss
145 | @mixin shadow($depth) {
146 | 	$shadow: map-get($shadows, $depth);
147 | 	// Focus Shadow
148 | 	@if not map-has-key($shadows, $depth) {
149 | 		box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36);
150 | 	} @else {
151 | 		box-shadow:
152 | 			map-get($shadow, penumbra),
153 | 			map-get($shadow, umbra),
154 | 			map-get($shadow, ambient);
155 | 	}
156 | }
157 | 


--------------------------------------------------------------------------------