ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'develop'

Browse Source
This commit is contained in:
Alice Gaudon 2021-01-26 13:17:51 +01:00
commit 2726fd16cc
3 changed files with 209 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/sass/_vars.scss
View File

@ -6,9 +6,10 @@ $secondaryForeground: $primaryForeground;
$backgroundColor: darken($primary, 4%); $backgroundColor: darken($primary, 4%);
$defaultTextColor: #ffffff; $defaultTextColor: #ffffff;
$headerBackground: darken($primary, 7.5%); $headerBackground: transparent;
$footerBackground: lighten($headerBackground, 1%); $headerContainer: true;
$panelBackground: lighten($headerBackground, 1%); $footerBackground: transparent;
$panelBackground: darken($backgroundColor, 3.2%);
$inputBackground: darken($panelBackground, 4%); $inputBackground: darken($panelBackground, 4%);
$info: #4499ff; $info: #4499ff;
@ -29,3 +30,4 @@ $errorColor: desaturate($errorText, 50%);
// Responsivity // Responsivity
$mobileThreshold: 632px; $mobileThreshold: 632px;
$desktopThreshold: 940px;

268
assets/sass/layout.scss
View File

@ -1,5 +1,6 @@
@import "vars"; @import "vars";
@import 'fonts'; @import 'fonts';
@import "responsivity_tools";
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -69,21 +70,31 @@ body {
body > header { body > header {
z-index: 50; z-index: 50;
display: flex; display: flex;
flex-direction: row; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
align-items: center;
$headerHeight: 64px; $headerHeight: 64px;
height: $headerHeight; height: $headerHeight;
line-height: $headerHeight; line-height: $headerHeight;
background-color: $headerBackground; background: $headerBackground;
@if $headerContainer {
@include container;
}
@media (max-width: $mobileThreshold) {
padding: 0;
}
.logo { .logo {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
padding: 0 24px 0 16px; padding: 0 16px 0 8px;
font-size: 32px; font-size: 24px;
color: $defaultTextColor; color: $defaultTextColor;
&:hover { &:hover {
@ -91,34 +102,48 @@ body > header {
} }
img { img {
width: $headerHeight; width: initial;
height: $headerHeight; height: calc(#{$headerHeight} - 16px);
margin-right: 16px; margin-right: 8px;
flex-shrink: 0;
} }
} }
nav { nav {
ul { > ul {
position: fixed;
z-index: -1;
top: 0;
left: 0;
height: 100%;
transform: translateX(-100%);
transition: transform ease-out 150ms;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
margin: 0; margin: 0;
padding: 0; padding: $headerHeight 8px 8px;
font-size: 20px; font-size: 20px;
background: $panelBackground;
li { li {
position: relative; position: relative;
list-style: none; list-style: none;
margin-top: 8px;
a, button { a, button {
position: relative; position: relative;
height: 64px;
margin: 0; margin: 0;
padding: 0 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: auto;
padding: 8px;
border-radius: 3px;
&:hover, &:active { &:hover, &:active {
&:not(button) { &:not(button) {
@ -127,7 +152,14 @@ body > header {
} }
.feather { .feather {
--icon-size: 24px; --icon-size: 16px;
}
.tip {
display: block;
margin-left: 8px;
text-transform: inherit;
font-weight: inherit;
} }
&:hover { &:hover {
@ -141,8 +173,7 @@ body > header {
} }
button { button {
margin: 8px; margin: 0;
padding: 24px;
height: 32px; height: 32px;
.feather { .feather {
@ -167,45 +198,27 @@ body > header {
} }
.dropdown { .dropdown {
position: absolute; position: initial;
z-index: -1;
top: 100%;
right: 0;
white-space: nowrap;
background: $headerBackground;
border-radius: 0 0 3px 3px;
a {
padding: 0 8px;
}
}
&:hover .dropdown {
display: block; display: block;
padding-left: 0;
} }
} }
> li:not(:first-child) {
border-top: 1px solid transparentize($defaultTextColor, 0.8);
padding-top: 8px;
}
&.open {
transform: translateX(0%);
box-shadow: 0 0 5px darken($panelBackground, 20%);
}
} }
#menu-button { #menu-button {
display: none; position: fixed;
} top: 0;
} left: 0;
@media (max-width: $mobileThreshold) {
flex-direction: row-reverse;
.logo {
padding: 0 16px 0 8px;
font-size: 24px;
img {
margin-right: 8px;
}
}
nav {
#menu-button {
display: block; display: block;
margin: 0; margin: 0;
padding: 0 16px; padding: 0 16px;
@ -221,42 +234,32 @@ body > header {
} }
} }
> ul { hr {
flex-direction: column; border: 0;
position: absolute; border-bottom: 1px solid $defaultTextColor;
z-index: 10; opacity: 0.2;
left: 0;
transform: translateX(-100%);
transition: transform ease-out 150ms;
background-color: $headerBackground;
&.open {
transform: translateX(0%);
}
li {
a, button {
.tip {
display: block;
margin-left: 8px;
text-transform: inherit;
font-weight: inherit;
}
}
.dropdown {
position: initial;
display: block;
padding-left: 32px;
}
}
}
} }
} }
@media (min-width: $mobileThreshold) { @media (min-width: $mobileThreshold) {
nav ul li { flex-direction: row;
nav {
#menu-button {
display: none;
}
ul {
position: static;
flex-direction: row;
transform: none;
padding: 0;
background: transparent;
li {
margin-top: 0;
margin-left: 8px;
a, button, .button { a, button, .button {
@include tip; @include tip;
} }
@ -270,11 +273,46 @@ body > header {
} }
} }
} }
.dropdown {
position: absolute;
z-index: -1;
top: 100%;
right: 0;
display: none;
padding: 8px;
white-space: nowrap;
background: $panelBackground;
border-radius: 0 0 3px 3px;
box-shadow: 0 2px 2px transparentize(darken($panelBackground, 20%), 0.75);
border-top: 4px solid lighten($panelBackground, 5%);
li {
margin-left: 0;
&:not(:first-child) {
margin-top: 8px;
}
}
}
&:hover .dropdown {
display: block;
}
}
> li:not(:first-child) {
border-top: 0;
padding-top: 0;
}
}
} }
} }
} }
footer { body > footer {
padding: 8px; padding: 8px;
margin-top: 8px; margin-top: 8px;
text-align: center; text-align: center;
@ -347,7 +385,7 @@ a {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: lighten($secondary, 10%); color: lighten($secondary, 30%);
} }
.feather.feather-external-link { .feather.feather-external-link {
@ -593,6 +631,10 @@ button, .button {
&.warning { &.warning {
background-color: $warningColor; background-color: $warningColor;
&:hover {
background-color: lighten($warningColor, 10%);
}
} }
&.error, &.danger { &.error, &.danger {
@ -612,6 +654,35 @@ button, .button {
} }
} }
// ---
// --- Tables
// ---
td.actions {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
form {
padding: 0;
display: inline;
}
button, .button {
margin: 0;
padding: 8px;
.feather {
margin-right: 0;
}
}
> *:not(:first-child) {
margin-left: 8px;
}
}
.data-table { .data-table {
width: 100%; width: 100%;
text-align: left; text-align: left;
@ -638,6 +709,10 @@ button, .button {
} }
} }
// ---
// --- Breadcrumb widget
// ---
.breadcrumb { .breadcrumb {
list-style: none; list-style: none;
display: flex; display: flex;
@ -651,6 +726,7 @@ button, .button {
} }
} }
// --- // ---
// --- Layout helpers // --- Layout helpers
// --- // ---
@ -658,24 +734,6 @@ button, .button {
text-align: center; text-align: center;
} }
@mixin container {
width: $mobileThreshold;
padding: 0 16px;
@media (min-width: $mobileThreshold) {
margin: 0 auto;
}
@media (max-width: $mobileThreshold) {
width: 100%;
padding: 0 8px;
}
}
.container {
@include container;
}
.panel { .panel {
position: relative; position: relative;
margin: 16px 0 48px; margin: 16px 0 48px;
@ -697,10 +755,14 @@ button, .button {
} }
.sub-panel { .sub-panel {
margin: 32px -18px; margin: 32px 0;
padding: 1px 16px; padding: 1px 16px;
border: 2px solid lighten($panelBackground, 4%); border: 2px solid lighten($panelBackground, 4%);
border-radius: 5px; border-radius: 5px;
form > & {
margin: 32px -18px;
}
} }
@ -724,6 +786,10 @@ button, .button {
stroke-linejoin: miter; stroke-linejoin: miter;
fill: none; fill: none;
vertical-align: middle; vertical-align: middle;
h1 > &, h2 > &, h3 > & {
--icon-size: 24px;
}
} }
// --- // ---

19
assets/sass/responsivity_tools.scss Normal file
View File

@ -0,0 +1,19 @@
@import "vars";
@mixin container {
width: 100%;
padding: 0 8px;
@media (min-width: $mobileThreshold) {
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: $desktopThreshold) {
width: $desktopThreshold;
}
}
.container {
@include container;
}