add css skeleton

This commit is contained in:
Tixie 2020-02-15 18:58:20 +01:00
parent 4ff59af24c
commit baa0951409
48 changed files with 1971 additions and 9 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"
]
]
}

6
.postcssrc Normal file
View File

@ -0,0 +1,6 @@
{
"modules": false,
"plugins": {
"autoprefixer": true
}
}

50
package-lock.json generated
View File

@ -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",

View File

@ -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": {

View File

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

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

View File

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

View File

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

View File

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

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-sh