1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-10-08 12:47:30 +00:00
This commit is contained in:
Tixie 2019-11-27 18:06:26 +01:00
parent 1e5b2d56f5
commit dd4b2c71ad
214 changed files with 3303 additions and 102 deletions

249
.csscomb.json Normal file
View 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"
]
]
}

View 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;
}
}

View 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;
}

View 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;
}

View 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;
}

View 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;
}

View 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;
}

View 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;
}
}

View 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();
}

View 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;
}

View file

@ -0,0 +1,11 @@
/* ----------------------------------------------------------- */
/* == colors */
/* ----------------------------------------------------------- */
.color-primary {
color: $color-primary;
}
.color-secondary {
color: $color-secondary;
}

View 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;
}

View file

@ -0,0 +1,7 @@
/* ----------------------------------------------------------- */
/* == state */
/* ----------------------------------------------------------- */
.is-disabled {
cursor: not-allowed;
}

View 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;
}

View 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%; }

View 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;
}

View 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;
}

View 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;
}

View 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%;
}

View 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;
}

View file

@ -0,0 +1,49 @@