add scss
This commit is contained in:
19
project-x/assets/styles/src/_import.scss
vendored
Normal file
19
project-x/assets/styles/src/_import.scss
vendored
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
// ============================================================================
|
||||||
|
// Imports
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
@import
|
||||||
|
'settings'
|
||||||
|
|
||||||
|
, 'vendor/jacket'
|
||||||
|
|
||||||
|
, 'tools/functions'
|
||||||
|
, 'tools/mixins'
|
||||||
|
, 'tools/trumps'
|
||||||
|
|
||||||
|
, 'base/fonts'
|
||||||
|
, 'base/normalize'
|
||||||
|
, 'base/page'
|
||||||
|
, 'base/headings'
|
||||||
|
|
||||||
|
;
|
||||||
37
project-x/assets/styles/src/_settings.scss
Normal file
37
project-x/assets/styles/src/_settings.scss
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
// ============================================================================
|
||||||
|
// Colour Palette
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Typography
|
||||||
|
// ============================================================================
|
||||||
|
$base-font-size : 16px;
|
||||||
|
$base-line-height : 24px;
|
||||||
|
$font-family-sans : Open Sans, Helmet, Freesans, Trebuchet MS, sans-serif;
|
||||||
|
|
||||||
|
|
||||||
|
$heading-size-1: 30px !default; // .alpha
|
||||||
|
$heading-size-2: 24px !default; // .beta
|
||||||
|
$heading-size-3: 20px !default; // .gamma
|
||||||
|
$heading-size-4: 18px !default; // .delta
|
||||||
|
$heading-size-5: 16px !default; // .epsilon
|
||||||
|
$heading-size-6: 14px !default; // .zeta
|
||||||
|
|
||||||
|
$milli-size: 12px !default;
|
||||||
|
$micro-size: 10px !default;
|
||||||
|
|
||||||
|
|
||||||
|
// Spacings
|
||||||
|
// ============================================================================
|
||||||
|
$margin10 : 10px;
|
||||||
|
$margin20 : 20px;
|
||||||
|
$margin30 : 30px;
|
||||||
|
$margin40 : 40px;
|
||||||
|
|
||||||
|
// z-index
|
||||||
|
// ============================================================================
|
||||||
|
$z-index-1: 50;
|
||||||
|
$z-index-2: 150;
|
||||||
|
$z-index-3: 250;
|
||||||
30
project-x/assets/styles/src/base/_headings.scss
Normal file
30
project-x/assets/styles/src/base/_headings.scss
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
h1, .h1, .alpha{
|
||||||
|
font-size: em($ia-heading-size-1);
|
||||||
|
line-height:1;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
h2, .h2, .beta{
|
||||||
|
font-size: em($ia-heading-size-2);
|
||||||
|
line-height:1;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
h3, .h3, .gamma{
|
||||||
|
font-size: em($ia-heading-size-3);
|
||||||
|
line-height:1;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
h4, .h4, .delta{
|
||||||
|
font-size: em($ia-heading-size-4);
|
||||||
|
line-height:1;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
h5, .h5, .epsilon{
|
||||||
|
font-size: em($ia-heading-size-5);
|
||||||
|
line-height:1;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
h6, .h6, .zeta{
|
||||||
|
font-size: em($ia-heading-size-6);
|
||||||
|
line-height:1;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
1
project-x/assets/styles/src/base/_normalize.scss
Normal file
1
project-x/assets/styles/src/base/_normalize.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
24
project-x/assets/styles/src/base/_page.scss
Normal file
24
project-x/assets/styles/src/base/_page.scss
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
* {
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size : ($ia-base-font-size / 16px) * 1em; /* [1] */
|
||||||
|
font-family : $ia-font-family-sans;
|
||||||
|
line-height : $ia-base-line-height / $ia-base-font-size; /* [1] */
|
||||||
|
background-color : $ia-body-background-color;
|
||||||
|
color : $ia-body-text-color;
|
||||||
|
overflow-y : scroll; /* [2] */
|
||||||
|
min-height : 100%; /* [3] */
|
||||||
|
|
||||||
|
-ms-text-size-adjust : 100%; /* [4] */
|
||||||
|
-webkit-text-size-adjust : 100%; /* [5] */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove default margin.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
8
project-x/assets/styles/src/project-x.scss
Normal file
8
project-x/assets/styles/src/project-x.scss
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Project-x / Public Site
|
||||||
|
* ==========================================================================
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
$jacket : vanilla;
|
||||||
|
|
||||||
|
@import 'import';
|
||||||
112
project-x/assets/styles/src/vendors/_jacket.scss
vendored
Normal file
112
project-x/assets/styles/src/vendors/_jacket.scss
vendored
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
// Jacket
|
||||||
|
// Conditional Styles with Sass. Dress you CSS appropriately.
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
// Jacket is a Compass component that prints and hides styles based on
|
||||||
|
// context variables you set in your stylesheet. Write and maintain a master
|
||||||
|
// stylesheet, then output custom tailored stylesheets for modern and legacy
|
||||||
|
// browsers, site and app builds, or any other context you can think of.
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
// Settings variables
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
// Default list of jacket contexts.
|
||||||
|
$jacket: null !default;
|
||||||
|
|
||||||
|
// Private variable used by jacket-context().
|
||||||
|
$jckt-context: null;
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
// Jacket mixin
|
||||||
|
// Takes a list of jacket contexts.
|
||||||
|
// Outputs a block of styles if a context is set.
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
@mixin jacket($contexts...) {
|
||||||
|
|
||||||
|
$naked: false;
|
||||||
|
$selectors: ();
|
||||||
|
$filtered: ();
|
||||||
|
$selector-string: '';
|
||||||
|
|
||||||
|
// Set the global context variable.
|
||||||
|
$jckt-context: $contexts;
|
||||||
|
|
||||||
|
// If jacket is a single context and selector list, encapsulate.
|
||||||
|
@if list-separator($jacket) == 'space' {
|
||||||
|
$jacket: $jacket, null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Test if a jacket context and jacket value match.
|
||||||
|
@each $item in $jacket {
|
||||||
|
@each $context in $contexts {
|
||||||
|
@if index($context, nth($item, 1)) {
|
||||||
|
|
||||||
|
// Gather wrapping selectors.
|
||||||
|
@if length($item) == 1 {
|
||||||
|
$naked: true;
|
||||||
|
}
|
||||||
|
@if length($item) == 2 {
|
||||||
|
$selectors: append($selectors, nth($item, 2) + ' &');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter out duplicate selectors.
|
||||||
|
// If reject() is added to Sass we can remove the $filtered holder variable.
|
||||||
|
@each $selector in $selectors {
|
||||||
|
@if index($filtered, $selector) == false {
|
||||||
|
$filtered: append($filtered, $selector);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build the selector string.
|
||||||
|
@each $selector in $filtered {
|
||||||
|
@if $selector-string != '' {
|
||||||
|
$selector-string: $selector-string + ", ";
|
||||||
|
}
|
||||||
|
$selector-string: $selector-string + $selector;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the weather is right, output that jacketed code!
|
||||||
|
@if $naked {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
@if $selector-string != '' {
|
||||||
|
#{$selector-string} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
// Jacket function
|
||||||
|
// Takes a list of jacket contexts.
|
||||||
|
// Outputs a value if a context is set.
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
@function jacket($value, $contexts...) {
|
||||||
|
|
||||||
|
@each $item in $jacket {
|
||||||
|
@each $context in $contexts {
|
||||||
|
@if index($context, nth($item, 1)) {
|
||||||
|
// If the weather is right, return the value!
|
||||||
|
@return $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Else return null. If null is the only value for a selector, the selector
|
||||||
|
// will not be printed.
|
||||||
|
@return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
// Jacket Context function
|
||||||
|
// Takes a jacket context value. Use when code inside a jacket
|
||||||
|
// needs to know if a specific jacket context is set.
|
||||||
|
///////////////////////////////////////////////////////////
|
||||||
|
@function jacket-context($context) {
|
||||||
|
@return if(index($jckt-context, $context), true, false);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user