setup bootstrap file structure to allow overrides
This commit is contained in:
axolotle
@@ -0,0 +1,60 @@
|
||||
/*!
|
||||
* Import of all needed bootstrap files except variables, functions and mixins
|
||||
*/
|
||||
|
||||
|
||||
// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮
|
||||
// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯
|
||||
// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵
|
||||
|
||||
// TODO OPTI: import only used
|
||||
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/input-group";
|
||||
@import "~bootstrap/scss/custom-forms";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/jumbotron";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/media";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/toasts";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/spinners";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
@import "~bootstrap/scss/print";
|
||||
|
||||
|
||||
// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ ╷ ╷╷ ╷┌─╴
|
||||
// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯╶─╴│╭╯│ │├─╴
|
||||
// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵ ╰╯ ╰─╯╰─╴
|
||||
|
||||
// TODO OPTI: import only used
|
||||
|
||||
@import "~bootstrap-vue/src/utilities";
|
||||
|
||||
// General styling needed for special form controls
|
||||
@import "~bootstrap-vue/src/custom-controls";
|
||||
|
||||
// Include custom SCSS for components
|
||||
@import "~bootstrap-vue/src/components/index";
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +0,0 @@
|
||||
$bleuroi: rgb(61,82,102);
|
||||
$bleuroilight: lighten(rgb(61,82,102), 30%);
|
||||
$gris: rgb(200,204,204);
|
||||
$grisclair: rgb(230,234,234);
|
||||
$grisfonce: rgb(57,57,64);
|
||||
$or: rgb(179,161,125);
|
||||
$rouge: rgb(204,61,82);
|
||||
@@ -1,93 +0,0 @@
|
||||
@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';
|
||||
|
||||
@mixin fontsans {
|
||||
font-family: "noto_sans";
|
||||
}
|
||||
@mixin fontserif {
|
||||
font-family: 'libertinus_serif';
|
||||
}
|
||||
|
||||
body{
|
||||
@include fontserif;
|
||||
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{
|
||||
@include fontsans;
|
||||
}
|
||||
@mixin title1blue {
|
||||
@include fontserif;
|
||||
font-size: 2.268em;
|
||||
color: $bleuroi;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@mixin title1black {
|
||||
@include fontserif;
|
||||
font-size: 1.512em;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@mixin title2black {
|
||||
@include fontserif;
|
||||
font-size: 1.134em;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@mixin title3black {
|
||||
@include fontserif;
|
||||
font-size: 1em;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@mixin title4black {
|
||||
@include fontserif;
|
||||
font-size: 0.882em;;
|
||||
color: $gris;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
// TEI
|
||||
|
||||
@mixin teititlefrontblue {
|
||||
@include fontserif;
|
||||
font-size: 2.6em;
|
||||
color: $bleuroi;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@mixin teititle1blue {
|
||||
@include fontserif;
|
||||
font-size: 1.8em;
|
||||
color: $bleuroi;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@mixin fontcaption {
|
||||
@include fontsans;
|
||||
font-size: 0.643em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
// http://www.thesassway.com/intermediate/simple-grid-mixins
|
||||
|
||||
|
||||
@mixin row() {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.row{
|
||||
@include row;
|
||||
}
|
||||
.row-rl{
|
||||
@include row;
|
||||
}
|
||||
|
||||
// small
|
||||
.small-row {
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
@include row;
|
||||
}
|
||||
}
|
||||
|
||||
// medium
|
||||
.med-row {
|
||||
@media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
|
||||
@include row;
|
||||
}
|
||||
}
|
||||
|
||||
// large
|
||||
.large-row {
|
||||
@media only screen and (min-width: $med-bp+1) {
|
||||
@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,92 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
$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"]{
|
||||
z-index:10;
|
||||
flex: 0 0 auto;
|
||||
@extend %layout-element;
|
||||
padding:1em $side-padding 1em $side-padding;
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
padding:1em $side-padding/2 0 $side-padding/2;
|
||||
}
|
||||
}
|
||||
section[role="main-content"]{
|
||||
display: flex;
|
||||
flex:1 1 auto;
|
||||
@extend %layout-element;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
>.wrapper{
|
||||
position: relative;
|
||||
padding:0 $side-padding 0 $side-padding;
|
||||
// height:100%; max-height:100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
>*{
|
||||
@include fade-transition;
|
||||
}
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
overflow-y: auto;
|
||||
padding:0 $side-padding/2 0 $side-padding/2;
|
||||
}
|
||||
}
|
||||
.main-content-layout{
|
||||
position: relative;
|
||||
// https://stackoverflow.com/a/33644245
|
||||
display: flex;
|
||||
flex: 1;
|
||||
>section{
|
||||
max-height: 100%;
|
||||
}
|
||||
>header,
|
||||
>section>.wrapper,
|
||||
>nav{
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
padding-top:1em;
|
||||
}
|
||||
>section>.wrapper,
|
||||
>nav{
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: $small-bp) {
|
||||
.main-content-layout{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
footer[role="tools"]{
|
||||
flex:0 0 auto;
|
||||
@extend %layout-element;
|
||||
// padding-bottom: 1em;
|
||||
// >*{
|
||||
// padding:0.5em 1em;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
|
||||
// _ _ _ _
|
||||
// | |_ _ _ __ _ _ _ __(_) |_(_)___ _ _ ___
|
||||
// | _| '_/ _` | ' \(_-< | _| / _ \ ' \(_-<
|
||||
// \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active{
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
.fade-leave-active{
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
// .edition-texts-enter-active, .edition-texts-leave-active {
|
||||
// transition: all 1s;
|
||||
// }
|
||||
// .edition-texts-enter, .edition-texts-leave-to /* .list-leave-active below version 2.1.8 */ {
|
||||
// max-height: 0;
|
||||
// // transform: translateY(30px);
|
||||
// }
|
||||
@@ -1,10 +0,0 @@
|
||||
$base_font_size:16px;
|
||||
|
||||
// grid
|
||||
$default_gap: 1em;
|
||||
$default_sum: 12; // total number of columns
|
||||
|
||||
$small-bp:768px;
|
||||
$med-bp:1080px;
|
||||
$ipad-bp: 1536px;
|
||||
$large-bp:1900px;
|
||||
@@ -14,10 +14,27 @@
|
||||
|
||||
*/
|
||||
|
||||
|
||||
// Custom variables must be imported first.
|
||||
@import 'bootstrap-overrides/variables';
|
||||
@import 'variables';
|
||||
|
||||
|
||||
// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮
|
||||
// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯
|
||||
// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵
|
||||
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
|
||||
@import '~bootstrap-vue/src/variables';
|
||||
|
||||
// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ ╷ ╷╷ ╷┌─╴
|
||||
// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯╶─╴│╭╯│ │├─╴
|
||||
// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵ ╰╯ ╰─╯╰─╴
|
||||
|
||||
@import "~bootstrap-vue/src/variables";
|
||||
|
||||
|
||||
// mixins and functions overides must be imported after bootstrap's definitions.
|
||||
@import 'bootstrap-overrides/mixins';
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
@import 'variables';
|
||||
@import 'globals';
|
||||
|
||||
// Bootstrap (temp ?)
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
@import '~bootstrap-vue/src/index.scss';
|
||||
@import 'bootstrap';
|
||||
|
||||
|
||||
html, body, #app, main {
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user