Moving sass and js files in to the assets directory.
This commit is contained in:
Fredrik Jonsson
parent
48a823f577
commit
b763e4f514
7 changed files with 139 additions and 9 deletions
73
assets/sass/init/_colors.scss
Normal file
73
assets/sass/init/_colors.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
// sass-lint:disable no-color-keywords; no-color-hex
|
||||
|
||||
// Base colors.
|
||||
$black: #000;
|
||||
$nearblack: lighten($black, 20%); // #333
|
||||
$grey-dark: lighten($black, 40%); // #666
|
||||
$grey: lighten($black, 60%); // #999
|
||||
$grey-light: lighten($black, 80%); // #ccc
|
||||
$grey-extra-light: lighten($black, 93.33%); // #eee
|
||||
$white: #fff;
|
||||
|
||||
$blue: #0072b9;
|
||||
$red: #c00;
|
||||
$green: #43a808;
|
||||
$yellow: #fd0;
|
||||
|
||||
// Colors used in the main content area.
|
||||
$brand: $nearblack;
|
||||
$brand-alt: $grey;
|
||||
$brand-dark: $grey-dark;
|
||||
$text: $black;
|
||||
$text-bg: $white;
|
||||
$text-meta: $grey-dark;
|
||||
|
||||
$link: $black;
|
||||
$link-visited: $black;
|
||||
$link-hover: $brand;
|
||||
$link-active: $red;
|
||||
|
||||
$border: $grey-light;
|
||||
$border-dark: $nearblack;
|
||||
|
||||
$autocomplete: $text;
|
||||
$autocomplete-bg: $text-bg;
|
||||
$autocomplete-select: $white;
|
||||
$autocomplete-select-bg: $blue;
|
||||
|
||||
$body-bg: $white;
|
||||
$header-bg: $brand;
|
||||
$backdrop: $grey-extra-light;
|
||||
|
||||
$mobile-menu: $header-bg;
|
||||
$mobile-menu-cover: rgba($black, .2);
|
||||
|
||||
$button: $nearblack;
|
||||
$button-disabled: $grey;
|
||||
|
||||
$form-error: $red;
|
||||
|
||||
$mark-highlight: $red;
|
||||
$mark-bg: $yellow;
|
||||
|
||||
$menu-active: $text;
|
||||
|
||||
$preview-bg: lighten($yellow, 43%);
|
||||
|
||||
$row-stripe: $white;
|
||||
$row-disabled: $grey-light;
|
||||
|
||||
$status: $green;
|
||||
$status-bg: lighten($status, 62%);
|
||||
$status-highlight: $text;
|
||||
$warning: $text;
|
||||
$warning-bg: lighten($yellow, 45%);
|
||||
$warning-border: $yellow;
|
||||
$error: $red;
|
||||
$error-bg: lighten($error, 57%);
|
||||
|
||||
$watermark: $grey-extra-light;
|
||||
|
||||
$headings: $nearblack;
|
||||
|
||||
$code: $nearblack;
|
||||
156
assets/sass/init/_variables.scss
Normal file
156
assets/sass/init/_variables.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// Variables
|
||||
//
|
||||
// Set variables for this site before a library sets its !default value.
|
||||
|
||||
|
||||
// Font faces, stacks and sizes.
|
||||
//
|
||||
// Font styling and line heights are controlled by the several variables that
|
||||
// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
|
||||
// These variable and mixins are documented on the [Typey
|
||||
// homepage](https://github.com/jptaranto/typey).
|
||||
|
||||
// The font size set on the root html element.
|
||||
$base-font-size: 22px;
|
||||
$base-font-size-2: 18px;
|
||||
|
||||
// The base line height determines the basic unit of vertical rhythm.
|
||||
$base-line-height: 31px;
|
||||
$base-line-height-2: 25px;
|
||||
|
||||
$base-multiplier: $base-font-size / $base-font-size-2;
|
||||
|
||||
$xxl-2: 34px * $base-multiplier;
|
||||
$xl-2: 28px * $base-multiplier;
|
||||
$l-2: 22px * $base-multiplier;
|
||||
$m-2: 18px * $base-multiplier;
|
||||
$s-2: 16px * $base-multiplier;
|
||||
$xs-2: 14px * $base-multiplier;
|
||||
|
||||
// The font sizes in our type hierarchy as tee shirt sizes.
|
||||
$font-size: (
|
||||
xxl: 28px,
|
||||
xl: 26px,
|
||||
l: 24px,
|
||||
m: $base-font-size,
|
||||
s: 18px,
|
||||
xs: 16px,
|
||||
xxl-2: $xxl-2,
|
||||
xl-2: $xl-2,
|
||||
l-2: $l-2,
|
||||
m-2: $m-2,
|
||||
s-2: $s-2,
|
||||
xs-2: $xs-2
|
||||
);
|
||||
|
||||
// Typey allows you to alter font weights site-wide with this map.
|
||||
$font-weight: (
|
||||
bold: bold,
|
||||
medium: 500,
|
||||
normal: normal,
|
||||
light: 300,
|
||||
lighter: lighter,
|
||||
);
|
||||
|
||||
// The following font family declarations use widely available fonts.
|
||||
// A user's web browser will look at the comma-separated list and will
|
||||
// attempt to use each font in turn until it finds one that is available
|
||||
// on the user's computer. The final "generic" font (sans-serif, serif or
|
||||
// monospace) hints at what type of font to use if the web browser doesn't
|
||||
// find any of the fonts in the list.
|
||||
|
||||
// Serif font stacks.
|
||||
$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
|
||||
$times: Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
|
||||
$georgia: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
|
||||
$garamond: 'Garamond Premier Pro', Charter, 'Times New Roman', serif;
|
||||
|
||||
// Sans-serif font stacks.
|
||||
$verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif;
|
||||
$tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif;
|
||||
$helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif;
|
||||
$arial: Arial, Helvetica, 'Nimbus Sans L', sans-serif;
|
||||
$impact: Impact, 'Arial Narrow', Helvetica, sans-serif;
|
||||
$lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
|
||||
$futura: Futura, 'Century Gothic', AppleGothic, sans-serif;
|
||||
|
||||
// System-ui font stack.
|
||||
$system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
|
||||
// Monospace font stacks.
|
||||
// For an explanation of why "sans-serif" is at the end of this list, see
|
||||
// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
|
||||
//$menlo: Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
|
||||
$menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
|
||||
|
||||
// The font faces you specify in the $typefaces map can be used in the
|
||||
// typeface() mixin.
|
||||
$typefaces: (
|
||||
body: (
|
||||
font-family: $garamond,
|
||||
),
|
||||
headings: (
|
||||
font-family: $futura,
|
||||
),
|
||||
monospace: (
|
||||
font-family: $menlo,
|
||||
),
|
||||
compact: (
|
||||
font-family: $impact,
|
||||
weight: bold,
|
||||
case: uppercase,
|
||||
// We could also specify the following property:
|
||||
// letter-spacing: .5px,
|
||||
),
|
||||
);
|
||||
|
||||
// Output a horizontal grid to help with debugging typography.
|
||||
$typey-debug: false;
|
||||
$with-wireframes: false;
|
||||
|
||||
// The length unit in which to output font size and margin values.
|
||||
// Supported values: px, em, rem.
|
||||
$base-unit: 'rem';
|
||||
|
||||
// px fallbacks for rem units are needed for IE 8 and earlier.
|
||||
$rem-fallback: false;
|
||||
|
||||
// We have separate print file.
|
||||
$auto-print-sizing: false;
|
||||
|
||||
// Breakpoints
|
||||
//
|
||||
// Use the `respond-to()` mixin to use named breakpoints.
|
||||
|
||||
$breakpoints: (
|
||||
'xxxs': 333px,
|
||||
'xxs': 444px,
|
||||
'xs': 555px,
|
||||
's': 666px,
|
||||
'm': 777px,
|
||||
'l': 888px,
|
||||
'xl': 999px,
|
||||
'xxl': 1111px,
|
||||
'xxxl': 1222px
|
||||
) !default;
|
||||
|
||||
// Layout
|
||||
|
||||
// The max content width.
|
||||
$max-content-width: 960px;
|
||||
|
||||
// The default left/right gutter/padding.
|
||||
$zen-gutters: 20px;
|
||||
|
||||
|
||||
// Miscellaneous variables
|
||||
//
|
||||
// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
|
||||
//
|
||||
// `$include-rtl` controls whether RTL styles are output.
|
||||
//
|
||||
// weight: 10
|
||||
|
||||
$indent-amount: 2 * $base-font-size;
|
||||
|
||||
$include-rtl: false;
|
||||
9
assets/sass/init/breakpoint/_respond-to.scss
Normal file
9
assets/sass/init/breakpoint/_respond-to.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@mixin respond-to($breakpoint) {
|
||||
// If the key exists in the map
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
assets/sass/init/clearfix/_clearfix.scss
Normal file
19
assets/sass/init/clearfix/_clearfix.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// clearfix()
|
||||
//
|
||||
// Allows the bottom of an element to extend to the bottom of all floated
|
||||
// children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
//
|
||||
// We use the micro-clearfix, optimized for use in `@extend` where fewer `&` is
|
||||
// better.
|
||||
@mixin clearfix() {
|
||||
&::before {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
47
assets/sass/init/image-url/_image-url.scss
Normal file
47
assets/sass/init/image-url/_image-url.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
// The relative path from the css directory to the sass directory.
|
||||
$image-url-path-to-source: '../sass' !default;
|
||||
// The relative path from the root sass directory to where your components usually lie.
|
||||
$image-url-subdirectory: 'components' !default;
|
||||
|
||||
// image-url()
|
||||
//
|
||||
// If you include your images next to your component Sass files, you need to
|
||||
// specify a url() to point from the generated CSS to the Sass source like this:
|
||||
//
|
||||
// ```css
|
||||
// content: url(../sass/components/is-quite/long.svg);
|
||||
// ```
|
||||
//
|
||||
// With the `image-url()` function the path to all your components is assumed to
|
||||
// start with `../sass/components/` and you just need to give it the last, short
|
||||
// bit of the path in your Sass code like this:
|
||||
//
|
||||
// ```scss
|
||||
// content: image-url(is-quite/short.svg);
|
||||
// ```
|
||||
//
|
||||
// If you want to point at an image that is not in the components sub-directory
|
||||
// of your sass directory, you can override the default $subdirectory by
|
||||
// passing it in as the first parameter of `image-url()` like this:
|
||||
//
|
||||
// ```scss
|
||||
// content: image-url(base, grouping/blockquote.svg);
|
||||
// ```
|
||||
//
|
||||
// which would output `url(../sass/base/grouping/blockquote.svg)`.
|
||||
//
|
||||
// $subdirectory = $image-url-subdirectory - Optional. The relative path from
|
||||
// the root of your Sass source to the sub-directory where
|
||||
// components usually lie.
|
||||
// $path - Required. The path to the image relative to the
|
||||
// `$subdirectory`.
|
||||
// $path-to-source = $image-url-path-to-source - Optional. The relative path
|
||||
// from the css build directory to the sass source directory.
|
||||
@function image-url($subdirectory, $path: null, $path-to-source: $image-url-path-to-source) {
|
||||
// If only 1 parameter is given, its value is intended for the $path.
|
||||
@if type-of($path) == 'null' {
|
||||
$path: $subdirectory;
|
||||
$subdirectory: $image-url-subdirectory;
|
||||
}
|
||||
@return url(unquote($path-to-source + '/' + $subdirectory + '/' + $path));
|
||||
}
|
||||
26
assets/sass/init/rtl/_rtl.scss
Normal file
26
assets/sass/init/rtl/_rtl.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
$include-rtl: true !default;
|
||||
|
||||
// rtl()
|
||||
//
|
||||
// Includes Right-To-Left language support by adding a parent selector of
|
||||
// `[dir="rtl"]`. Since the dir attribute is usually defined on the html element
|
||||
// of a page, using this mixin on a ruleset that matches the html element won't
|
||||
// work.
|
||||
//
|
||||
// Can be turned off globally by setting `$include-rtl: false;`.
|
||||
//
|
||||
// $selector = '[dir="rtl"]' - The RTL parent selector.
|
||||
@mixin rtl($selector: '[dir="rtl"]') {
|
||||
@if $include-rtl {
|
||||
@if & {
|
||||
#{$selector} & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
#{$selector} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
assets/sass/init/visually-hidden/_visually-hidden.scss
Normal file
38
assets/sass/init/visually-hidden/_visually-hidden.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// sass-lint:disable no-important
|
||||
|
||||
// visually-hidden()
|
||||
//
|
||||
// Make an element visually hidden, but accessible to screen readers, etc.
|
||||
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
@mixin visually-hidden {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
// visually-hidden--off()
|
||||
//
|
||||
// Turns off the visually-hidden effect.
|
||||
@mixin visually-hidden--off {
|
||||
position: static !important;
|
||||
clip: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// visually-hidden--focusable()
|
||||
//
|
||||
// Makes an element visually hidden by default, but visible when receiving
|
||||
// focus.
|
||||
@mixin visually-hidden--focusable {
|
||||
@include visually-hidden;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@include visually-hidden--off;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue