add css skeleton
This commit is contained in:
Tixie
parent
4ff59af24c
commit
baa0951409
|
|
@ -0,0 +1,249 @@
|
|||
{
|
||||
"remove-empty-rulesets": true,
|
||||
"always-semicolon": true,
|
||||
"color-case": "lower",
|
||||
"block-indent": " ",
|
||||
"color-shorthand": true,
|
||||
"element-case": "lower",
|
||||
"eof-newline": true,
|
||||
"leading-zero": false,
|
||||
"quotes": "double",
|
||||
"space-after-colon": " ",
|
||||
"space-before-combinator": " ",
|
||||
"space-after-combinator": " ",
|
||||
"space-between-declarations": "\n",
|
||||
"space-before-opening-brace": " ",
|
||||
"space-after-opening-brace": "\n",
|
||||
"space-after-selector-delimiter": "\n",
|
||||
"space-before-selector-delimiter": "",
|
||||
"space-before-closing-brace": "\n",
|
||||
"strip-spaces": true,
|
||||
"sort-order": [
|
||||
[
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"z-index",
|
||||
"display",
|
||||
"visibility",
|
||||
"-moz-appearance",
|
||||
"-webkit-appearance",
|
||||
"appearance",
|
||||
"flex-direction",
|
||||
"flex-wrap",
|
||||
"flex-flow",
|
||||
"justify-content",
|
||||
"align-items",
|
||||
"align-content",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-basis",
|
||||
"flex",
|
||||
"order",
|
||||
"align-self",
|
||||
"flex-pack",
|
||||
"flex-align",
|
||||
"flex-item-align",
|
||||
"float",
|
||||
"clear",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"-webkit-overflow-scrolling",
|
||||
"clip",
|
||||
"box-sizing",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"min-width",
|
||||
"min-height",
|
||||
"max-width",
|
||||
"max-height",
|
||||
"width",
|
||||
"height",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"border",
|
||||
"border-spacing",
|
||||
"border-collapse",
|
||||
"border-width",
|
||||
"border-style",
|
||||
"border-color",
|
||||
"border-top",
|
||||
"border-top-width",
|
||||
"border-top-style",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-width",
|
||||
"border-right-style",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-width",
|
||||
"border-bottom-style",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-width",
|
||||
"border-left-style",
|
||||
"border-left-color",
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-image",
|
||||
"border-image-source",
|
||||
"border-image-slice",
|
||||
"border-image-width",
|
||||
"border-image-outset",
|
||||
"border-image-repeat",
|
||||
"border-top-image",
|
||||
"border-right-image",
|
||||
"border-bottom-image",
|
||||
"border-left-image",
|
||||
"border-corner-image",
|
||||
"border-top-left-image",
|
||||
"border-top-right-image",
|
||||
"border-bottom-right-image",
|
||||
"border-bottom-left-image",
|
||||
"background",
|
||||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"background-size",
|
||||
"background-repeat",
|
||||
"box-decoration-break",
|
||||
"box-shadow",
|
||||
"fill",
|
||||
"color",
|
||||
"table-layout",
|
||||
"caption-side",
|
||||
"empty-cells",
|
||||
"list-style",
|
||||
"list-style-position",
|
||||
"list-style-type",
|
||||
"list-style-image",
|
||||
"quotes",
|
||||
"content",
|
||||
"counter-increment",
|
||||
"counter-reset",
|
||||
"-ms-writing-mode",
|
||||
"vertical-align",
|
||||
"text-align",
|
||||
"text-align-last",
|
||||
"text-decoration",
|
||||
"text-emphasis",
|
||||
"text-emphasis-position",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-color",
|
||||
"text-indent",
|
||||
"-ms-text-justify",
|
||||
"text-justify",
|
||||
"text-outline",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"-ms-text-overflow",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"text-shadow",
|
||||
"white-space",
|
||||
"word-spacing",
|
||||
"-ms-word-wrap",
|
||||
"word-wrap",
|
||||
"-ms-word-break",
|
||||
"word-break",
|
||||
"-moz-tab-size",
|
||||
"-o-tab-size",
|
||||
"tab-size",
|
||||
"-webkit-hyphens",
|
||||
"-moz-hyphens",
|
||||
"hyphens",
|
||||
"letter-spacing",
|
||||
"font",
|
||||
"font-display",
|
||||
"font-weight",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"font-size",
|
||||
"font-family",
|
||||
"src",
|
||||
"line-height",
|
||||
"opacity",
|
||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||
"-ms-interpolation-mode",
|
||||
"-webkit-filter",
|
||||
"-ms-filter",
|
||||
"filter",
|
||||
"resize",
|
||||
"cursor",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-timing-function",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transform",
|
||||
"transform-origin",
|
||||
"animation",
|
||||
"animation-name",
|
||||
"animation-duration",
|
||||
"animation-play-state",
|
||||
"animation-timing-function",
|
||||
"animation-delay",
|
||||
"animation-iteration-count",
|
||||
"animation-direction",
|
||||
"pointer-events",
|
||||
"unicode-bidi",
|
||||
"direction",
|
||||
"columns",
|
||||
"column-span",
|
||||
"column-width",
|
||||
"column-count",
|
||||
"column-fill",
|
||||
"column-gap",
|
||||
"column-rule",
|
||||
"column-rule-width",
|
||||
"column-rule-style",
|
||||
"column-rule-color",
|
||||
"break-before",
|
||||
"break-inside",
|
||||
"break-after",
|
||||
"page-break-before",
|
||||
"page-break-inside",
|
||||
"page-break-after",
|
||||
"orphans",
|
||||
"widows",
|
||||
"-ms-zoom",
|
||||
"zoom",
|
||||
"max-zoom",
|
||||
"min-zoom",
|
||||
"user-zoom",
|
||||
"orientation"
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"modules": false,
|
||||
"plugins": {
|
||||
"autoprefixer": true
|
||||
}
|
||||
}
|
||||
|
|
@ -2889,6 +2889,35 @@
|
|||
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
|
||||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "9.7.4",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz",
|
||||
"integrity": "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.8.3",
|
||||
"caniuse-lite": "^1.0.30001020",
|
||||
"chalk": "^2.4.2",
|
||||
"normalize-range": "^0.1.2",
|
||||
"num2fraction": "^1.2.2",
|
||||
"postcss": "^7.0.26",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001027",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001027.tgz",
|
||||
"integrity": "sha512-7xvKeErvXZFtUItTHgNtLgS9RJpVnwBlWX8jSo/BO8VsF6deszemZSkJJJA1KOKrXuzZH4WALpAJdq5EyfgMLg==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
|
||||
"integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"aws-sign2": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
|
||||
|
|
@ -6592,6 +6621,12 @@
|
|||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-url": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
|
||||
|
|
@ -6607,6 +6642,12 @@
|
|||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"num2fraction": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
|
||||
"dev": true
|
||||
},
|
||||
"nwsapi": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
|
||||
|
|
@ -7930,6 +7971,15 @@
|
|||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.25.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz",
|
||||
"integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"sax": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
|
|
|
|||
|
|
@ -14,8 +14,10 @@
|
|||
"devDependencies": {
|
||||
"@babel/core": "^7.7.7",
|
||||
"@babel/preset-env": "^7.8.3",
|
||||
"autoprefixer": "^9.7.4",
|
||||
"parcel": "^1.12.4",
|
||||
"parcel-plugin-svelte": "^4.0.5",
|
||||
"sass": "^1.25.0",
|
||||
"svelte": "^3.16.7"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
// --------------------------------------------------------------
|
||||
// == mixins */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@mixin flow($font-size, $bf: $base-font, $lh: $line-height) {
|
||||
$lh-value: $base-font * $lh;
|
||||
$coeff: ceil($font-size / $lh-value);
|
||||
$new-lh: ($lh-value / $font-size) * $coeff;
|
||||
$margin-bottom: $new-lh / $coeff;
|
||||
|
||||
margin-bottom: $margin-bottom + em;
|
||||
font-size: $font-size / 10 + rem;
|
||||
line-height: $new-lh;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == reset */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
border-style: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* fix input no style on Safari */
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == typography */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
/* IE9-11 calculation fix */
|
||||
font-size: calc(1em * .625);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $base-font / 10 + em;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
td,
|
||||
th,
|
||||
label,
|
||||
textarea,
|
||||
caption {
|
||||
margin: 0 0 ($line-height + em) 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == helpers */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* screen readers
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
/* Hide only visually, but have it available for screen readers (from HTML5 Boilerplate) */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.visually-hidden.focusable:active,
|
||||
.visually-hidden.focusable:focus {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == layout */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* BFC to the rescue */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix:after,
|
||||
.line:after,
|
||||
.mod:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
// important: nth-child(n) is used to keep same specificity between grid (equal and unequal)
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
display: block; /* IE fix */
|
||||
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
// equal grid
|
||||
@mixin grid($number:$number, $gutter:$default-gutter, $mb:$gutter) {
|
||||
|
||||
// equal grid no gutter
|
||||
@if $gutter == 0 {
|
||||
& {
|
||||
margin-bottom: -$mb;
|
||||
}
|
||||
|
||||
& > *:nth-child(n) {
|
||||
margin-bottom: $mb;
|
||||
width: calc(100% * 1 / #{$number} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
// one column mode
|
||||
@if $number == 1 {
|
||||
& {
|
||||
margin-bottom: -$mb;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& > *:nth-child(n) {
|
||||
margin-bottom: $mb;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// with gutter (avoid percentage since it doesn't work well with margin bottom)
|
||||
@if $number>1 and $gutter>0 {
|
||||
& {
|
||||
margin-bottom: -$mb; /* avoid unwanted margin on last line */
|
||||
margin-left: -$gutter;
|
||||
}
|
||||
|
||||
& > *:nth-child(n) {
|
||||
margin-bottom: $mb;
|
||||
margin-left: $gutter;
|
||||
width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); // .01px = $bugfix IE
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// unequal grid
|
||||
@mixin unequalGrid($column1, $column2, $gutter:$default-gutter, $mb:$gutter) {
|
||||
|
||||
// no gutter (when gutter = 0)
|
||||
@if $gutter == 0 {
|
||||
& > *:nth-child(odd) {
|
||||
width: calc(#{$size});
|
||||
|
||||
$size : ($column1 * 100%) / ($column1 + $column2);
|
||||
}
|
||||
|
||||
& > *:nth-child(even) {
|
||||
width: calc(#{$size});
|
||||
|
||||
$size : ($column2 * 100%) / ($column1 + $column2);
|
||||
}
|
||||
}
|
||||
|
||||
// with gutter
|
||||
@else {
|
||||
$g : $gutter / 2;
|
||||
|
||||
&>* {
|
||||
margin-bottom: $mb;
|
||||
}
|
||||
|
||||
& > *:nth-child(odd) {
|
||||
$size : ($column1 * 100%) / ($column1 + $column2);
|
||||
|
||||
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
|
||||
}
|
||||
|
||||
& > *:nth-child(even) {
|
||||
$size : ($column2 * 100%) / ($column1 + $column2);
|
||||
|
||||
margin-left: $gutter;
|
||||
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* vertical align
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
[class*="grid-top"] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
[class*="grid-bottom"] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
[class*="grid-center"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* helpers
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
[class*="grid-"].grid-noMargin > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */
|
||||
|
||||
.responsive-iframe {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.responsive-iframe iframe,
|
||||
.responsive-iframe object,
|
||||
.responsive-iframe embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* utilities
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: ($large + 1)) {
|
||||
[class*="-l+"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: ($medium + 1)) and (max-width: $large) {
|
||||
[class*="-l"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: ($small + 1)) and (max-width: $medium) {
|
||||
[class*="-m"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: ($xsmall + 1)) and (max-width: $small) {
|
||||
[class*="-s"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: $xsmall) {
|
||||
[class*="-xs"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: $small) {
|
||||
.hidden-s-up {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: $xsmall) {
|
||||
.hidden-xs-up {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* xsmall
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $xsmall) {
|
||||
.mod {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == debug */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
* Generates a random color
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin randomColor {
|
||||
$red: round(random()*222);
|
||||
$green: round(random()*222);
|
||||
$blue: round(random()*222);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Easily debug an element
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin debug() {
|
||||
@include randomColor;
|
||||
border: .3rem dotted rgb($red, $green, $blue);
|
||||
background-color: rgba($red, $green, $blue, 30%);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Display grid for vertical rhythm
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin debug-rythm($bh: $line-height) {
|
||||
background: linear-gradient(to bottom, #ba9b9a .1em, transparent .1em ) !important;
|
||||
background-size: 100% ($bh + em) !important;
|
||||
}
|
||||
|
||||
.debug-rythm {
|
||||
@include debug-rythm();
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == alignment */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* block
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* text/inline
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vtop {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.vbottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.vmiddle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == colors */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.color-primary {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.color-secondary {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == spacings */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pa0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ma1 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.ma2 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.ma3 {
|
||||
margin: 3rem;
|
||||
}
|
||||
|
||||
.pa1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.pa2 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.pa3 {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mt1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mt3 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.mt4 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mr1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mr2 {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.mr3 {
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mb1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb3 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.mb4 {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ml1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ml2 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.ml3 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pt1 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt2 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pt3 {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pr1 {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pr2 {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.pr3 {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pb1 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb2 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb3 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pl1 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.pl2 {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.pl3 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == state */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == text */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* font size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.txtsmaller {
|
||||
@include flow($base-font - 4);
|
||||
}
|
||||
|
||||
.txtsmall {
|
||||
@include flow($base-font - 2);
|
||||
}
|
||||
|
||||
.txtbig {
|
||||
@include flow($base-font + 2);
|
||||
}
|
||||
|
||||
.txtbigger {
|
||||
@include flow($base-font + 4);
|
||||
}
|
||||
|
||||
/* transformations
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == width */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.w10 { width: 10%; }
|
||||
.w20 { width: 20%; }
|
||||
.w25 { width: 25%; }
|
||||
.w30 { width: 30%; }
|
||||
.w33 { width: 33.3333%; }
|
||||
.w40 { width: 40%; }
|
||||
.w50 { width: 50%; }
|
||||
.w60 { width: 60%; }
|
||||
.w66 { width: 66.6666%; }
|
||||
.w70 { width: 70%; }
|
||||
.w75 { width: 75%; }
|
||||
.w80 { width: 80%; }
|
||||
.w90 { width: 90%; }
|
||||
.w100 { width: 100%; }
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
/**
|
||||
* Button Module
|
||||
* namespace : .btn
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$btn-primary: $color-primary;
|
||||
$btn-secondary: $color-secondary;
|
||||
$btn-success: #1cb841;
|
||||
$btn-danger: #c53a3a;
|
||||
$btn-hover: 5%;
|
||||
$btn-radius: .2rem;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .8em 1.6em;
|
||||
border: none;
|
||||
border-radius: $btn-radius;
|
||||
background-color: $btn-primary;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
transition: background-color .4s;
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
/* colors
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.btn--primary,
|
||||
.btn--primary:link,
|
||||
.btn--primary:visited {
|
||||
background-color: $btn-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn--primary:hover,
|
||||
.btn--primary:active,
|
||||
.btn--primary:focus {
|
||||
background-color: darken($btn-primary, $btn-hover);
|
||||
}
|
||||
|
||||
.btn--secondary,
|
||||
.btn--secondary:link,
|
||||
.btn--secondary:visited {
|
||||
background-color: $btn-secondary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn--secondary:hover,
|
||||
.btn--secondary:active,
|
||||
.btn--secondary:focus {
|
||||
background-color: darken($btn-secondary, $btn-hover);
|
||||
}
|
||||
|
||||
.btn--danger,
|
||||
.btn--danger:link,
|
||||
.btn--danger:visited {
|
||||
background-color: $btn-danger;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.btn--danger:hover,
|
||||
.btn--danger:active,
|
||||
.btn--danger:focus {
|
||||
background-color: darken($btn-danger, $btn-hover);
|
||||
}
|
||||
|
||||
/* size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.btn--big {
|
||||
font-size: $base-font + 4;
|
||||
}
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
/**
|
||||
* Form Module
|
||||
* Namespace : .form
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$input-border-radius: .4rem;
|
||||
$input-border: .1rem solid #d8d8d8;
|
||||
$input-background-color: #fff;
|
||||
$input-hover: 5%;
|
||||
$input-placeholder-color: #c4c1be;
|
||||
$input-error: #ff3860;
|
||||
$input-required: #ff3860;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* placeholders
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
input:-moz-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
textarea:-moz-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
/* block form
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
label,
|
||||
.label {
|
||||
display: block;
|
||||
margin-top: 1.3em;
|
||||
margin-bottom: .8em;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* inline form
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.f-inline label,
|
||||
.f-inline .label {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.f-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.f-inline input,
|
||||
.f-inline .btn {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.f-inline .btn {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* basics style
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
fieldset {
|
||||
margin: 2.5rem 0;
|
||||
padding: 1em;
|
||||
border: .1rem solid #d8d8d8;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
label,
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
select {
|
||||
margin: 0;
|
||||
border: .1rem solid #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: .4em;
|
||||
min-width: 32rem;
|
||||
min-height: 8em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: .8em;
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
background: $input-background-color;
|
||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, .08);
|
||||
}
|
||||
|
||||
textarea:active,
|
||||
textarea:focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
input:active,
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
input[type="radio"] + label,
|
||||
input[type="checkbox"] + label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
padding: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/* autogrid
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
[class^="f-grid"] {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
[class^="f-grid"] > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
[class^="f-grid"] > *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[class^="f-grid"] input {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.f-size-1 {
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.f-size-2 {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.f-size-3 {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.f-size-4 {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.f-size-5 {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.f-size-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* errors
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.f-required {
|
||||
color: $input-error;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.f-error input {
|
||||
margin-bottom: .8rem;
|
||||
border: .1rem solid $input-error;
|
||||
}
|
||||
|
||||
.f-error-message {
|
||||
color: $input-error;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* Notification module
|
||||
* Namespace : .notif
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
$notif-success: #00d1b2;
|
||||
$notif-warning: #ffdd57;
|
||||
$notif-error: #ff3860;
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.notif {
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.notif--success {
|
||||
background-color: $notif-success;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notif--warning {
|
||||
background-color: $notif-warning;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notif--error {
|
||||
background-color: $notif-error;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* Pagination Module
|
||||
* namespace : .pagination
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$pagination-border-radius: .2rem;
|
||||
$pagination-border: .1rem solid grey;
|
||||
$pagination-hover-color: $color-secondary;
|
||||
$pagination-current-bg: $color-primary;
|
||||
$pagination-current-color: #fff;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
margin: 2rem 0;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
|
||||
.pagination,
|
||||
.pagination li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
display: inline-block;
|
||||
margin: 0 .3rem 1em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.pagination li a,
|
||||
.pagination li > span {
|
||||
padding: .3em .6em;
|
||||
border: $pagination-border;
|
||||
border-radius: $pagination-border-radius;
|
||||
}
|
||||
|
||||
.pagination li a:hover {
|
||||
color: $pagination-hover-color;
|
||||
}
|
||||
|
||||
.pagination li.current a {
|
||||
background-color: $pagination-current-bg;
|
||||
color: $pagination-current-color;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Radiobox Module
|
||||
* Namespace : .radiobox
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.radiobox {
|
||||
display: inline-flex;
|
||||
padding: .2rem;
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
|
||||
.radiobox--full {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radiobox input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.radiobox input + label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding: 1rem 1.8rem;
|
||||
min-height: 4rem;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
transition: all .05s ease-in;
|
||||
}
|
||||
|
||||
.radiobox input:first-child + label {
|
||||
border-radius: ($input-border-radius - .2rem) 0 0 ($input-border-radius - .2rem);
|
||||
}
|
||||
|
||||
.radiobox label:last-child {
|
||||
border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0;
|
||||
}
|
||||
|
||||
/* Checked state */
|
||||
|
||||
.radiobox input:checked + label {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Focus state */
|
||||
|
||||
.radiobox input:focus + label {
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
.radiobox:active,
|
||||
.radiobox:focus-within {
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
.radiobox:focus-within input:focus + label {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* Switch Module
|
||||
* Namespace: .switch
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.switch[type="checkbox"] {
|
||||
position: relative;
|
||||
margin-top: -.05em;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
outline: none;
|
||||
border: $input-border;
|
||||
border-radius: 42rem;
|
||||
background-color: white;
|
||||
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5);
|
||||
transition: .2s;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.switch[type="checkbox"]::-ms-check {
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE 8
|
||||
}
|
||||
|
||||
/* Checked state
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.switch[type="checkbox"]:checked {
|
||||
border-color: $color-primary;
|
||||
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7);
|
||||
}
|
||||
|
||||
/* Focus state
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.switch[type="checkbox"]:active,
|
||||
.switch[type="checkbox"]:focus {
|
||||
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5), $focus-ring;
|
||||
}
|
||||
|
||||
.switch[type="checkbox"]:checked:active,
|
||||
.switch[type="checkbox"]:checked:focus {
|
||||
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7), $focus-ring;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* Table Module
|
||||
* namespace : .table
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.table {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
border: .1rem solid #cbcbcb;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse /* remove spacing between table cells */;
|
||||
table-layout: fixed /* http://css-tricks.com/fixing-tables-long-strings */;
|
||||
}
|
||||
|
||||
.table caption {
|
||||
padding: 1em 0;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font: italic 85%/1 arial, sans-serif;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: .5em 1em;
|
||||
border-width: 0 0 0 .1rem;
|
||||
border-left: .1rem solid #cbcbcb;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.table td:first-child,
|
||||
.table th:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background: #e0e0e0;
|
||||
color: #000;
|
||||
vertical-align: bottom;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* Tooltip Module
|
||||
* namespace : .tooltip
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$tooltip-bg: rgba(0, 0, 0, .80);
|
||||
$tooltip-color: #fff;
|
||||
$tooltip-radius: .5em;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.tooltip:after {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
.tooltip:hover:after {
|
||||
position: absolute;
|
||||
bottom: 1.35em;
|
||||
left: 1em;
|
||||
padding: .5em 1em;
|
||||
border-radius: $tooltip-radius;
|
||||
background: $tooltip-bg;
|
||||
color: $tooltip-color;
|
||||
content: attr(data-tooltip);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tooltip:hover:before {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
left: 2em;
|
||||
display: block;
|
||||
border: solid;
|
||||
border-width: .4em .4em 0 .4em;
|
||||
border-color: $tooltip-bg transparent;
|
||||
content: "";
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == custom fonts */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == icons */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == grids */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
$grid-gutter: 2rem;
|
||||
$grid-mb: 2rem;
|
||||
|
||||
/**
|
||||
* Some grid examples
|
||||
*/
|
||||
|
||||
.grid-1 {
|
||||
@include grid(1, $grid-gutter, $grid-mb);
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
@include grid(2, $grid-gutter);
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
@include grid(3, $grid-gutter);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
@include grid(4, $grid-gutter);
|
||||
}
|
||||
|
||||
.grid-2-noGutter {
|
||||
@include grid(2, 0, 0);
|
||||
}
|
||||
|
||||
.grid-1-3 {
|
||||
@include unequalGrid(1, 3, $grid-gutter, 2rem);
|
||||
}
|
||||
|
||||
@media (max-width: $xsmall) {
|
||||
.grid-1-xs {
|
||||
@include grid(1);
|
||||
}
|
||||
|
||||
.grid-2-xs {
|
||||
@include grid(2);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == main */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
color: $color-dark-text;
|
||||
font-family: $fontstack1;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
max-width: 102.4rem;
|
||||
}
|
||||
|
||||
/* titles
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
h1 {
|
||||
@include flow(50);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include flow(22);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include flow(18);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include flow(16);
|
||||
}
|
||||
|
||||
/* links
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
border-radius: .3rem;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
/* lists
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
/* divers
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: .1rem;
|
||||
border: 0;
|
||||
border-top: .1rem solid #ccc;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == header */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.header {
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == navigation */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.navigation {
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == content */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.content {
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == footer */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.footer {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.footer ul,
|
||||
.footer li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer a,
|
||||
.footer a:hover,
|
||||
.footer a:visited {
|
||||
color: $color-link;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> large */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $large) {
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> medium */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $medium) {
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> small */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $small) {
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> xsmall */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $xsmall) {
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
// --------------------------------------------------------------
|
||||
// == colors */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// palette
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-primary: #3498db;
|
||||
$color-secondary: #1abc9c;
|
||||
$color-tertiary: #34495e;
|
||||
$color-info: #2185d0;
|
||||
|
||||
// texts
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-light-text: #fcfcfc;
|
||||
$color-dark-text: #000;
|
||||
|
||||
// links
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-link: $color-primary;
|
||||
|
||||
// brand
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-twitter: #55acee;
|
||||
$color-facebook: #3b5998;
|
||||
$color-google: #dd4b39;
|
||||
$color-youtube: #e52d27;
|
||||
$color-pinterest: #cc2127;
|
||||
$color-vimeo: #1ab7ea;
|
||||
$color-linkedin: #0976b4;
|
||||
$color-instagram: #3f729b;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// --------------------------------------------------------------
|
||||
// == config */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// base
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$base-font: 14; // px value (without unit), will be converted in em
|
||||
$line-height: 1.5;
|
||||
$fontstack1: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$fontstack2: Georgia, Times, "Times New Roman", serif;
|
||||
|
||||
// responsive
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$xsmall: 480px;
|
||||
$small: 768px;
|
||||
$medium: 960px;
|
||||
$large: 1280px;
|
||||
|
||||
// default gutter
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$default-gutter: 2rem;
|
||||
|
||||
// Focus ring
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$focus-ring: 0 0 0 .3rem rgba($color-info, .5);
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
// --------------------------------------------------------------
|
||||
// == config */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "_colors";
|
||||
@import "_config";
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == core */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "1-core/_00-mixins";
|
||||
@import "1-core/_01-reset";
|
||||
@import "1-core/_02-typography";
|
||||
@import "1-core/_03-helpers";
|
||||
@import "1-core/_04-layout";
|
||||
@import "1-core/_05-flexgrid";
|
||||
@import "1-core/_06-rwd";
|
||||
@import "1-core/_debug";
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == helpers */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "2-helpers/_alignment";
|
||||
@import "2-helpers/_colors";
|
||||
@import "2-helpers/_spacing";
|
||||
@import "2-helpers/_text";
|
||||
@import "2-helpers/_width";
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == components */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "3-components/_forms";
|
||||
@import "3-components/_switch";
|
||||
@import "3-components/_radiobox";
|
||||
@import "3-components/_buttons";
|
||||
@import "3-components/_pagination";
|
||||
@import "3-components/_tables";
|
||||
@import "3-components/_tooltips";
|
||||
@import "3-components/_notifications";
|
||||
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == base */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "4-base/_01-fonts";
|
||||
@import "4-base/_02-icons";
|
||||
@import "4-base/_03-grids";
|
||||
@import "4-base/_04-main";
|
||||
@import "4-base/_05-layout";
|
||||
@import "4-base/_06-header";
|
||||
@import "4-base/_07-navigation";
|
||||
@import "4-base/_08-content";
|
||||
@import "4-base/_09-footer";
|
||||
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == modules */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
//@import '5-modules/...';
|
||||
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == pages */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// @import '6-pages/...';
|
||||
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == vendors */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
|
||||
// In this context, "o" means "override" and you can use it as a convention.
|
||||
|
||||
// @import '7-vendors/o-vendor.scss';
|
||||
|
||||
|
||||
// --------------------------------------------------------------
|
||||
// == rwd */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "8-rwd/_rwd-large";
|
||||
@import "8-rwd/_rwd-medium";
|
||||
@import "8-rwd/_rwd-small";
|
||||
@import "8-rwd/_rwd-xsmall";
|
||||
@import "8-rwd/_rwd";
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Eldritch Radio</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="/assets/scss/style.scss">
|
||||
</head>
|
||||
<body>
|
||||
<script src="main.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue