refactored grid with flex, displayed footer tabs, diplay results, toggle results display
This commit is contained in:
+146
-12
@@ -1,7 +1,7 @@
|
||||
@import './base/reset';
|
||||
@import './base/variables';
|
||||
@import './base/colors';
|
||||
@import './base/grid';
|
||||
@import './base/grid-flex';
|
||||
@import './base/layout';
|
||||
@import './base/fonts';
|
||||
|
||||
@@ -10,6 +10,9 @@ body{
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
#root{
|
||||
}
|
||||
|
||||
header[role="banner"]{
|
||||
div.wrapper{
|
||||
display: grid;
|
||||
@@ -53,14 +56,67 @@ section[role="main-content"]{
|
||||
}
|
||||
footer[role="tools"]{
|
||||
#history{
|
||||
// color: #1a1a1a;
|
||||
background-color: $or;
|
||||
padding:1.2em $side-padding;
|
||||
}
|
||||
#results{
|
||||
// color: #1a1a1a;
|
||||
background-color: $gris;
|
||||
max-height: 50vh;
|
||||
padding:1.2em $side-padding;
|
||||
section.col-1{
|
||||
.results-count{
|
||||
font-size: 0.756em;
|
||||
}
|
||||
}
|
||||
.results-list{
|
||||
overflow-x: hidden;
|
||||
.wrapper{
|
||||
height:100%;
|
||||
overflow-y: auto;
|
||||
width:calc(100% + 1em);
|
||||
padding-right: 1em;
|
||||
>ul{
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
li.result{
|
||||
flex-basis: percentage(2/$default_sum);
|
||||
height: 5.3em;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1em;
|
||||
padding-right: 0.7em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
article.result.item{
|
||||
header{
|
||||
h1{
|
||||
font-size: 0.882em;
|
||||
font-weight: normal;
|
||||
margin:0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
.extract{
|
||||
p{
|
||||
font-size: 0.882em;
|
||||
margin:0;
|
||||
}
|
||||
code{
|
||||
background-color: lighten(desaturate($rouge,20%), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#footer-bottom{
|
||||
padding:0 $side-padding;
|
||||
background-color: $bleuroi;
|
||||
&>*{
|
||||
// disable grid gap
|
||||
padding-right: 0;
|
||||
}
|
||||
#footer-tabs{
|
||||
ul{
|
||||
padding:0; margin:0;
|
||||
@@ -68,21 +124,25 @@ footer[role="tools"]{
|
||||
flex-direction: column;
|
||||
li{
|
||||
flex: 1 1 auto;
|
||||
box-sizing: border-box;
|
||||
padding:0.3em;
|
||||
margin:0;
|
||||
line-height: 0.6em;
|
||||
height:2em;
|
||||
&.history{
|
||||
.wrapper{
|
||||
box-sizing: border-box;
|
||||
line-height: 0.6em;
|
||||
height:2em;
|
||||
width: calc(100% + $side-padding);
|
||||
margin-left:-$side-padding;
|
||||
padding:0.3em 0.5em 0.3em $side-padding;
|
||||
}
|
||||
&.history .wrapper{
|
||||
background-color: $or;
|
||||
}
|
||||
&.results{
|
||||
&.results .wrapper{
|
||||
background-color: $gris;
|
||||
}
|
||||
span{
|
||||
font-size: 0.693em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -90,8 +150,38 @@ footer[role="tools"]{
|
||||
#search{
|
||||
color: #fff;
|
||||
background-color: $bleuroi;
|
||||
label[for="keys"]{
|
||||
display: none;
|
||||
form{
|
||||
padding: 0.7em;
|
||||
label[for="keys"]{
|
||||
display: none;
|
||||
}
|
||||
input[type="text"]{
|
||||
padding:0.3em;
|
||||
font-size: 0.756em;
|
||||
line-height: 1;
|
||||
height:1em;
|
||||
border:none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// input[type="submit"]{
|
||||
// #submit-search{
|
||||
// border:none;
|
||||
//
|
||||
// }
|
||||
// }
|
||||
span.mdi{
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
line-height:1.1;
|
||||
vertical-align:middle;
|
||||
width:1.2em; height:1.2em;
|
||||
border-radius: 0.6em;
|
||||
background-color: #fff;
|
||||
color: $bleuroi;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -100,5 +190,49 @@ footer[role="tools"]{
|
||||
font-size: 0.756em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ___
|
||||
// |_ _|__ ___ _ _ ___
|
||||
// | |/ _/ _ \ ' \(_-<
|
||||
// |___\__\___/_||_/__/
|
||||
|
||||
span.mdi-close{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
span.mdi-loading{
|
||||
animation-name: spin;
|
||||
animation-duration: 2000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
|
||||
// _ _ _ _
|
||||
// | |_ _ _ __ _ _ _ __(_) |_(_)___ _ _ ___
|
||||
// | _| '_/ _` | ' \(_-< | _| / _ \ ' \(_-<
|
||||
// \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
|
||||
|
||||
.fade-roll-enter-active{
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
.fade-roll-leave-active{
|
||||
transition: all .8s ease;
|
||||
}
|
||||
.fade-roll-enter, .fade-roll-leave-to{
|
||||
opacity:0;
|
||||
// height:1px;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
// }
|
||||
@@ -1,3 +1,5 @@
|
||||
$side-padding:3em;
|
||||
|
||||
body, html{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -24,12 +26,12 @@ body{
|
||||
header[role="banner"]{
|
||||
flex: 0 0 auto;
|
||||
@extend %layout-element;
|
||||
padding:1em 1em 0 1em;
|
||||
padding:1em $side-padding 0 $side-padding;
|
||||
}
|
||||
section[role="main-content"]{
|
||||
flex:1 1 auto;
|
||||
@extend %layout-element;
|
||||
padding:0 1em 0 1em;
|
||||
padding:0 $side-padding 0 $side-padding;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
$base_font_size:16px;
|
||||
|
||||
// grid
|
||||
$default_gap: 0;
|
||||
$default_sum: 12;
|
||||
$default_gap: 1em;
|
||||
$default_sum: 12; // total number of columns
|
||||
|
||||
$small-bp:768px;
|
||||
$med-bp:1080px;
|
||||
|
||||
Reference in New Issue
Block a user