diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss index 39529f9..29352e5 100644 --- a/assets/sass/_vars.scss +++ b/assets/sass/_vars.scss @@ -6,9 +6,10 @@ $secondaryForeground: $primaryForeground; $backgroundColor: darken($primary, 4%); $defaultTextColor: #ffffff; -$headerBackground: darken($primary, 7.5%); -$footerBackground: lighten($headerBackground, 1%); -$panelBackground: lighten($headerBackground, 1%); +$headerBackground: transparent; +$headerContainer: true; +$footerBackground: transparent; +$panelBackground: darken($backgroundColor, 3.2%); $inputBackground: darken($panelBackground, 4%); $info: #4499ff; @@ -29,3 +30,4 @@ $errorColor: desaturate($errorText, 50%); // Responsivity $mobileThreshold: 632px; +$desktopThreshold: 940px; diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 209c852..7a97a6f 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -1,5 +1,6 @@ @import "vars"; @import 'fonts'; +@import "responsivity_tools"; * { box-sizing: border-box; @@ -69,21 +70,31 @@ body { body > header { z-index: 50; display: flex; - flex-direction: row; + flex-direction: row-reverse; justify-content: space-between; + align-items: center; $headerHeight: 64px; height: $headerHeight; line-height: $headerHeight; - background-color: $headerBackground; + background: $headerBackground; + + @if $headerContainer { + @include container; + } + + @media (max-width: $mobileThreshold) { + padding: 0; + } .logo { display: flex; flex-direction: row; + align-items: center; - padding: 0 24px 0 16px; - font-size: 32px; + padding: 0 16px 0 8px; + font-size: 24px; color: $defaultTextColor; &:hover { @@ -91,34 +102,48 @@ body > header { } img { - width: $headerHeight; - height: $headerHeight; - margin-right: 16px; + width: initial; + height: calc(#{$headerHeight} - 16px); + margin-right: 8px; + flex-shrink: 0; } } nav { - ul { + > ul { + position: fixed; + z-index: -1; + top: 0; + left: 0; + height: 100%; + transform: translateX(-100%); + transition: transform ease-out 150ms; + display: flex; - flex-direction: row; + flex-direction: column; margin: 0; - padding: 0; + padding: $headerHeight 8px 8px; font-size: 20px; + background: $panelBackground; + li { position: relative; list-style: none; + margin-top: 8px; a, button { position: relative; - height: 64px; margin: 0; - padding: 0 24px; display: flex; flex-direction: row; align-items: center; + height: auto; + padding: 8px; + + border-radius: 3px; &:hover, &:active { &:not(button) { @@ -127,7 +152,14 @@ body > header { } .feather { - --icon-size: 24px; + --icon-size: 16px; + } + + .tip { + display: block; + margin-left: 8px; + text-transform: inherit; + font-weight: inherit; } &:hover { @@ -141,8 +173,7 @@ body > header { } button { - margin: 8px; - padding: 24px; + margin: 0; height: 32px; .feather { @@ -167,114 +198,121 @@ body > header { } .dropdown { - position: absolute; - z-index: -1; - top: 100%; - right: 0; - - white-space: nowrap; - background: $headerBackground; - border-radius: 0 0 3px 3px; - - a { - padding: 0 8px; - } - } - - &:hover .dropdown { + position: initial; 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 { - display: none; - } - } + position: fixed; + top: 0; + left: 0; + display: block; + margin: 0; + padding: 0 16px; + line-height: $headerHeight; - @media (max-width: $mobileThreshold) { - flex-direction: row-reverse; + cursor: pointer; + background: transparent; + border-radius: 0; - .logo { - padding: 0 16px 0 8px; - font-size: 24px; - - img { - margin-right: 8px; + .feather { + --icon-size: 28px; + margin: 0 8px; } } - nav { - #menu-button { - display: block; - margin: 0; - padding: 0 16px; - line-height: $headerHeight; - - cursor: pointer; - background: transparent; - border-radius: 0; - - .feather { - --icon-size: 28px; - margin: 0 8px; - } - } - - > ul { - flex-direction: column; - position: absolute; - z-index: 10; - 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; - } - } - } + hr { + border: 0; + border-bottom: 1px solid $defaultTextColor; + opacity: 0.2; } } @media (min-width: $mobileThreshold) { - nav ul li { - a, button, .button { - @include tip; + flex-direction: row; + + nav { + #menu-button { + display: none; } - &:last-child { - a, button, .button { - .tip { - left: unset; - right: 4px; - transform: none; + ul { + position: static; + flex-direction: row; + transform: none; + padding: 0; + background: transparent; + + li { + margin-top: 0; + margin-left: 8px; + + a, button, .button { + @include tip; } + + &:last-child { + a, button, .button { + .tip { + left: unset; + right: 4px; + transform: none; + } + } + } + + .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; margin-top: 8px; text-align: center; @@ -347,7 +385,7 @@ a { text-decoration: none; &:hover { - color: lighten($secondary, 10%); + color: lighten($secondary, 30%); } .feather.feather-external-link { @@ -593,6 +631,10 @@ button, .button { &.warning { background-color: $warningColor; + + &:hover { + background-color: lighten($warningColor, 10%); + } } &.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 { width: 100%; text-align: left; @@ -642,6 +713,10 @@ button, .button { } } + +// --- +// --- Breadcrumb widget +// --- .breadcrumb { list-style: none; display: flex; @@ -655,6 +730,7 @@ button, .button { } } + // --- // --- Layout helpers // --- @@ -662,24 +738,6 @@ button, .button { 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 { position: relative; margin: 16px 0 48px; @@ -701,10 +759,14 @@ button, .button { } .sub-panel { - margin: 32px -18px; + margin: 32px 0; padding: 1px 16px; border: 2px solid lighten($panelBackground, 4%); border-radius: 5px; + + form > & { + margin: 32px -18px; + } } @@ -728,6 +790,10 @@ button, .button { stroke-linejoin: miter; fill: none; vertical-align: middle; + + h1 > &, h2 > &, h3 > & { + --icon-size: 24px; + } } // --- diff --git a/assets/sass/responsivity_tools.scss b/assets/sass/responsivity_tools.scss new file mode 100644 index 0000000..0e3d232 --- /dev/null +++ b/assets/sass/responsivity_tools.scss @@ -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; +}