mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-10-08 12:47:30 +00:00
pouet
This commit is contained in:
Tixie
parent
1e5b2d56f5
commit
dd4b2c71ad
214 changed files with 3303 additions and 102 deletions
249
.csscomb.json
Normal file
249
.csscomb.json
Normal file
|
|
@ -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"
|
||||
]
|
||||
]
|
||||
}
|
||||
64
assets/scss/1-core/_00-mixins.scss
Normal file
64
assets/scss/1-core/_00-mixins.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// --------------------------------------------------------------
|
||||
// == 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;
|
||||
}
|
||||
|
||||
|
||||
/* Glitch
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
|
||||
@mixin textGlitch($name, $intensity, $background, $highlightColor1, $highlightColor2, $width, $height) {
|
||||
|
||||
position: relative;
|
||||
$steps: $intensity;
|
||||
|
||||
// Ensure the @keyframes are generated at the root level
|
||||
@at-root {
|
||||
// We need two different ones
|
||||
@for $i from 1 through 2 {
|
||||
@keyframes #{$name}-anim-#{$i} {
|
||||
@for $i from 0 through $steps {
|
||||
#{percentage($i*(1/$steps)) - 60} {
|
||||
clip: rect(
|
||||
random($height)+px,
|
||||
$width+px,
|
||||
random($height)+px,
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: $background;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
&:after {
|
||||
left: 2px;
|
||||
text-shadow: -1px 0 $highlightColor1;
|
||||
animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
|
||||
}
|
||||
&:before {
|
||||
left: -2px;
|
||||
text-shadow: 2px 0 $highlightColor2;
|
||||
animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
|
||||
}
|
||||
}
|
||||
48
assets/scss/1-core/_01-reset.scss
Normal file
48
assets/scss/1-core/_01-reset.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
28
assets/scss/1-core/_02-typography.scss
Normal file
28
assets/scss/1-core/_02-typography.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
29
assets/scss/1-core/_03-helpers.scss
Normal file
29
assets/scss/1-core/_03-helpers.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
27
assets/scss/1-core/_04-layout.scss
Normal file
27
assets/scss/1-core/_04-layout.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
124
assets/scss/1-core/_05-flexgrid.scss
Normal file
124
assets/scss/1-core/_05-flexgrid.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
84
assets/scss/1-core/_06-rwd.scss
Normal file
84
assets/scss/1-core/_06-rwd.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
41
assets/scss/1-core/_debug.scss
Normal file
41
assets/scss/1-core/_debug.scss
Normal file
|
|
@ -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();
|
||||
}
|
||||
46
assets/scss/2-helpers/_alignment.scss
Normal file
46
assets/scss/2-helpers/_alignment.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
11
assets/scss/2-helpers/_colors.scss
Normal file
11
assets/scss/2-helpers/_colors.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == colors */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.color-primary {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.color-secondary {
|
||||
color: $color-secondary;
|
||||
}
|
||||
179
assets/scss/2-helpers/_spacing.scss
Normal file
179
assets/scss/2-helpers/_spacing.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
7
assets/scss/2-helpers/_state.scss
Normal file
7
assets/scss/2-helpers/_state.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == state */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
45
assets/scss/2-helpers/_text.scss
Normal file
45
assets/scss/2-helpers/_text.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
18
assets/scss/2-helpers/_width.scss
Normal file
18
assets/scss/2-helpers/_width.scss
Normal file
|
|
@ -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%; }
|
||||
122
assets/scss/3-components/_buttons.scss
Normal file
122
assets/scss/3-components/_buttons.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* Button Module
|
||||
* namespace : .btn
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$btn-primary: $color-secondary;
|
||||
$btn-secondary: rgba($color-light-text, .05);
|
||||
$btn-success: #1cb841;
|
||||
$btn-danger: #c53a3a;
|
||||
$btn-hover: 5%;
|
||||
$btn-radius: .2rem;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1.5rem 2.5rem;
|
||||
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;
|
||||
font-size: 2rem;
|
||||
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: rgba($btn-primary, .6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn--primary:hover,
|
||||
.btn--primary:active,
|
||||
.btn--primary:focus {
|
||||
background-color: $btn-primary;
|
||||
}
|
||||
|
||||
.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: rgba($color-light-text, .1);
|
||||
}
|
||||
|
||||
.btn--secondary.disabled,
|
||||
.btn--secondary.disabled:hover,
|
||||
.btn--secondary.disabled:active,
|
||||
.btn--secondary.disabled:focus {
|
||||
background-color: rgba($color-light-text, .05);
|
||||
box-shadow: none;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.btn--link,
|
||||
.btn--link:link,
|
||||
.btn--link:visited {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $color-light-text;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn--link:hover,
|
||||
.btn--link:active,
|
||||
.btn--link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.btn--big {
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
214
assets/scss/3-components/_forms.scss
Normal file
214
assets/scss/3-components/_forms.scss
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
/**
|
||||
* Form Module
|
||||
* Namespace : .form
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$input-border-radius: .3rem;
|
||||
$input-border: none;
|
||||
$input-background-color: rgba(#fff, .07);
|
||||
$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
|
||||
-------------------------------------------------------------- */
|
||||
.f-group {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
label,
|
||||
.label {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
vertical-align: middle;
|
||||
font-weight: 600;
|
||||
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 rgba(#fff, .1);
|
||||
}
|
||||
|
||||
legend {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
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: 1em 1.3rem;
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
background: $input-background-color;
|
||||
color: #fff;;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
42
assets/scss/3-components/_notifications.scss
Normal file
42
assets/scss/3-components/_notifications.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Notification module
|
||||
* Namespace : .notif
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
$notif-success: #00d1b2;
|
||||
$notif-warning: #ffdd57;
|
||||
$notif-error: #ff3860;
|
||||
$notif-info: $color-info;
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.notif {
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.notif--success {
|
||||
background-color: $notif-success;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notif--warning {
|
||||
background-color: $notif-warning;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.notif--error {
|
||||
background-color: $notif-error;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notif--info {
|
||||
background-color: $notif-info;
|
||||
color: #fff;
|
||||
}
|
||||
34
assets/scss/3-components/_pagination.scss
Normal file
34
assets/scss/3-components/_pagination.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* Pagination Module
|
||||
* namespace : .pagination
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-top: 10rem;
|
||||
width: 100%;
|
||||
border-radius: .4rem;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.pagination > .container {
|
||||
max-width: 68rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.pagination__side {
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.pagination__side > * {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
71
assets/scss/3-components/_radiobox.scss
Normal file
71
assets/scss/3-components/_radiobox.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
49
assets/scss/3-components/_switch.scss
Normal file
49
assets/scss/3-components/_switch.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||