websites/coopgo
2
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Ready for prod ?

Browse Source
This commit is contained in:
Arnaud Delcasse
2021-06-01 07:59:35 +02:00
parent 50801d45ce
commit d6705d77d7
16 changed files with 293 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss
View File

@@ -1,3 +1,3 @@
$breakpoint-prone: 600px !default;
$breakpoint-phone: 600px !default;
$breakpoint-tablet: 992px !default;

4
themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss
View File

@@ -33,6 +33,10 @@ $widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200,
width: 100% !important;
}
.h-full {
height: 100% !important;
}
/* POSITIONING */
.ta-r {

42
themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss
View File

@@ -1,27 +1,29 @@
nav {
z-index: 100;
height: 3em;
display: flex;
justify-content: flex-between;
align-items: center;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
/* Menus */
ul {
justify-content: flex-evenly;
&#navbar {
z-index: 100;
height: 3em;
display: flex;
justify-content: flex-between;
align-items: center;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
li {
flex: 1;
display: inline;
text-align: center;
list-style: none;
/* Menus */
ul {
justify-content: flex-evenly;
display: flex;
a {
color: inherit;
text-decoration: none;
li {
flex: 1;
display: inline;
text-align: center;
list-style: none;
a {
color: inherit;
text-decoration: none;
}
}
}
}

99
themes/coopgo-theme/assets/sass/main.scss
View File

@@ -1,32 +1,93 @@
@import 'coopgo-web-ui-kit/styles';
// @import 'colors' <- we use the library's default values for colors, we don't need this
nav {
.left {
flex:0;
text-align: left;
background-color: $backgroundcolor;
nav{
&#navbar {
.left {
flex:0;
text-align: left;
background-color: $backgroundcolor;
img {
margin: 1em;
height: 1.3em;
img {
margin: 1em;
height: 1.3em;
}
}
.center {
flex:1;
color: $primarycolor;
font-size: 1em;
background-color: $backgroundcolor;
}
.right {
font-family: $brandfont;
color: $white;
}
#menutoggle {
display: none;
}
@media(max-width: $breakpoint-phone) {
#menutoggle {
display: block;
}
.center {
display: none;
}
}
@media(max-width: $breakpoint-tablet) {
.right {
display: none;
}
}
}
.center {
flex:1;
color: $primarycolor;
font-size: 1em;
background-color: $backgroundcolor;
&#sidebar {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
z-index: 200;
box-shadow: 0 6px 12px rgba(107, 82, 82, 0.3);
background-color: $white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: ease 0.2s all;
}
.right {
font-family: $brandfont;
color: $white;
}
@media(max-width: $breakpoint-phone) {
nav#navbar {
background-color: $white;
}
}
#body-overlay {
width: 100vw;
height: 100vh;
display: none;
position: fixed;
z-index: 150;
top: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
}
body {
&.menu-open{
#body-overlay {
display: block;
}
}
@media(max-width: $breakpoint-tablet) {
.right {
display: none;
&.menu-open {
nav#sidebar {
left: 0;
}
}
}