starting point of vue app
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
$bleuroi: rgb(61,82,102);
|
||||
$gris: rgb(200,204,204);
|
||||
$grisfonce: rgb(57,57,64);
|
||||
$or: rgb(179,161,125);
|
||||
$rouge: rgb(204,61,82);
|
||||
@@ -0,0 +1,22 @@
|
||||
@import '../fonts/libertinus/libertinus.css';
|
||||
@import '../fonts/notosans/notosans.css';
|
||||
// @import '../fonts/notosans/notosans-semicondensed.css';
|
||||
// @import '../fonts/notosans/notosans-condensed.css';
|
||||
// @import '../fonts/notosans/notosans-extracondensed.css';
|
||||
|
||||
body{
|
||||
font-family: 'libertinus_serif';
|
||||
font-weight: 400;
|
||||
|
||||
// font-family: 'noto_sans';
|
||||
// font-weight: 900;
|
||||
// font-style: italic;
|
||||
}
|
||||
|
||||
#header-menu,
|
||||
#footer-tabs,
|
||||
#search,
|
||||
footer[role="tools"] .row>header,
|
||||
footer[role="tools"] .row>nav{
|
||||
font-family: "noto_sans";
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
// http://www.thesassway.com/intermediate/simple-grid-mixins
|
||||
|
||||
|
||||
@mixin row() {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
// &:after{
|
||||
// content:"";
|
||||
// clear:both;
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
|
||||
.row{
|
||||
@include row;
|
||||
}
|
||||
.row-rl{
|
||||
@include row;
|
||||
}
|
||||
|
||||
%col-reset {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
|
||||
@extend %col-reset;
|
||||
padding-left: $gap*$offset;
|
||||
@if $col == $default_sum {
|
||||
// if last col, then no gap
|
||||
padding-right: 0;
|
||||
}@else{
|
||||
padding-right: $gap;
|
||||
}
|
||||
&:last-child{padding-right: 0;}
|
||||
|
||||
// no offset with flex ??
|
||||
// margin-left: percentage(($col/$sum)*$offset);
|
||||
|
||||
// col width
|
||||
flex-basis: percentage($col/$sum);
|
||||
}
|
||||
|
||||
@for $c from 1 through $default_sum {
|
||||
.col-#{$c} {
|
||||
@include col($c);
|
||||
}
|
||||
|
||||
// small
|
||||
.small-col-#{$c} {
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
@include col($c);
|
||||
}
|
||||
}
|
||||
|
||||
// medium
|
||||
.med-col-#{$c} {
|
||||
@media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
|
||||
@include col($c);
|
||||
}
|
||||
}
|
||||
|
||||
// large
|
||||
.large-col-#{$c} {
|
||||
@media only screen and (min-width: $med-bp+1) {
|
||||
@include col($c);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@for $c from 1 through $default_sum - 1 {
|
||||
@for $o from 1 through $default_sum - $c {
|
||||
.col-#{$c}-offset-#{$o} {
|
||||
@include col($c, $o);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: replace with align-self:flex-start or flex-end
|
||||
// .col.float-right{
|
||||
// float: right;
|
||||
// padding-right: 0;
|
||||
// padding-left: $default_gap;
|
||||
// }
|
||||
@@ -0,0 +1,92 @@
|
||||
// http://www.thesassway.com/intermediate/simple-grid-mixins
|
||||
|
||||
|
||||
@mixin row() {
|
||||
// font-size: 0;
|
||||
// white-space: nowrap;
|
||||
position: relative;
|
||||
// >*{
|
||||
// font-size: 16px;
|
||||
// }
|
||||
&:after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
%col-reset {
|
||||
width: 100%;
|
||||
// display: inline-block;
|
||||
// white-space:normal;
|
||||
// font-size: 16px;
|
||||
float:left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
|
||||
@extend %col-reset;
|
||||
padding-left: $gap*$offset;
|
||||
@if $col == $default_sum {
|
||||
padding-right: 0;
|
||||
}@else{
|
||||
padding-right: $gap;
|
||||
}
|
||||
&:last-child{padding-right: 0;}
|
||||
|
||||
margin-left: percentage(($col/$sum)*$offset);
|
||||
|
||||
// @media only screen and (min-width: 768px) {
|
||||
width: percentage($col/$sum);
|
||||
// vertical-align: $align;
|
||||
// }
|
||||
}
|
||||
|
||||
.row{
|
||||
@include row;
|
||||
// html:not(.js) &{
|
||||
// overflow-y: auto;
|
||||
// }
|
||||
}
|
||||
|
||||
@for $c from 1 through $default_sum {
|
||||
.col-#{$c} {
|
||||
@include col($c);
|
||||
}
|
||||
|
||||
// small
|
||||
.small-col-#{$c} {
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
@include col($c);
|
||||
}
|
||||
}
|
||||
|
||||
// medium
|
||||
.med-col-#{$c} {
|
||||
@media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
|
||||
@include col($c);
|
||||
}
|
||||
}
|
||||
|
||||
// large
|
||||
.large-col-#{$c} {
|
||||
@media only screen and (min-width: $med-bp+1) {
|
||||
@include col($c);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@for $c from 1 through $default_sum - 1 {
|
||||
@for $o from 1 through $default_sum - $c {
|
||||
.col-#{$c}-offset-#{$o} {
|
||||
@include col($c, $o);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col.float-right{
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
padding-left: $default_gap;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
$side-padding:3em;
|
||||
|
||||
body, html{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
body{
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#root{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height:100vh;
|
||||
%layout-element{
|
||||
width:100vw;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
header[role="banner"]{
|
||||
flex: 0 0 auto;
|
||||
@extend %layout-element;
|
||||
padding:1em $side-padding 0 $side-padding;
|
||||
}
|
||||
section[role="main-content"]{
|
||||
flex:1 1 auto;
|
||||
@extend %layout-element;
|
||||
overflow: hidden;
|
||||
>.wrapper{
|
||||
padding:0 $side-padding 0 $side-padding;
|
||||
height:100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
footer[role="tools"]{
|
||||
flex:0 0 auto;
|
||||
@extend %layout-element;
|
||||
// padding-bottom: 1em;
|
||||
// >*{
|
||||
// padding:0.5em 1em;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
html, body{
|
||||
font-size:16px;
|
||||
line-height: 0.9;
|
||||
margin:0; padding:0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a, a:focus, a:active { outline: none; }
|
||||
a:focus{ -moz-outline-style: none; }
|
||||
|
||||
ul {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
li{
|
||||
padding:0;
|
||||
margin:0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.visualy-hidden {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
overflow: hidden;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
.visualy-hidden:active,
|
||||
.visualy-hidden:focus {
|
||||
position: static !important;
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
// _ _ _ _
|
||||
// | |_ _ _ __ _ _ _ __(_) |_(_)___ _ _ ___
|
||||
// | _| '_/ _` | ' \(_-< | _| / _ \ ' \(_-<
|
||||
// \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
|
||||
@mixin accordeon-transition($h){
|
||||
&.accordeon-enter,
|
||||
&.accordeon-leave-to{
|
||||
// opacity: 0;
|
||||
height:0.01vh;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
// transform: translateY(100%);
|
||||
// transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
&.accordeon-enter-to,
|
||||
&.accordeon-leave{
|
||||
// opacity:1;
|
||||
height:$h;
|
||||
// transform: translateY(0%);
|
||||
// transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&.accordeon-enter-active{
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
&.accordeon-leave-active{
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin fade-transition() {
|
||||
&.fade-enter,
|
||||
&.fade-leave-to{
|
||||
opacity: 0;
|
||||
}
|
||||
&.fade-enter-to,
|
||||
&.fade-leave{
|
||||
opacity:1;
|
||||
}
|
||||
&.fade-enter-active{
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
&.fade-leave-active{
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
$base_font_size:16px;
|
||||
|
||||
// grid
|
||||
$default_gap: 1em;
|
||||
$default_sum: 12; // total number of columns
|
||||
|
||||
$small-bp:768px;
|
||||
$med-bp:1080px;
|
||||
$large-bp:1900px;
|
||||
Reference in New Issue
Block a user