mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-31 15:24:31 +03:00
Started on a design update
- Added base of new grid system. - Added new margin/padding/visiblity helpers. - Made header collapse to overflow menu on mobile.
This commit is contained in:
Dan Brown
@ -24,33 +24,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Bordering
|
||||
*/
|
||||
.bordered {
|
||||
border: 1px solid #BBB;
|
||||
&.pos {
|
||||
border-color: $positive;
|
||||
}
|
||||
&.neg {
|
||||
border-color: $negative;
|
||||
}
|
||||
&.primary {
|
||||
border-color: $primary;
|
||||
}
|
||||
&.secondary {
|
||||
border-color: $secondary;
|
||||
}
|
||||
&.thick {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Padding
|
||||
* TODO - Remove these older styles
|
||||
*/
|
||||
.nopadding {
|
||||
padding: 0;
|
||||
@ -94,6 +70,7 @@
|
||||
|
||||
/*
|
||||
* Margins
|
||||
* TODO - Remove these older styles
|
||||
*/
|
||||
.margins {
|
||||
margin: $-l;
|
||||
@ -126,6 +103,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin spacing($prop, $propLetter) {
|
||||
@each $sizeLetter, $size in $spacing {
|
||||
.#{$propLetter}-#{$sizeLetter} {
|
||||
#{$prop}: $size;
|
||||
}
|
||||
.#{$propLetter}x-#{$sizeLetter} {
|
||||
#{$prop}-left: $size;
|
||||
#{$prop}-right: $size;
|
||||
}
|
||||
.#{$propLetter}y-#{$sizeLetter} {
|
||||
#{$prop}-top: $size;
|
||||
#{$prop}-bottom: $size;
|
||||
}
|
||||
.#{$propLetter}t-#{$sizeLetter} {
|
||||
#{$prop}-top: $size;
|
||||
}
|
||||
.#{$propLetter}r-#{$sizeLetter} {
|
||||
#{$prop}-right: $size;
|
||||
}
|
||||
.#{$propLetter}b-#{$sizeLetter} {
|
||||
#{$prop}-bottom: $size;
|
||||
}
|
||||
.#{$propLetter}l-#{$sizeLetter} {
|
||||
#{$prop}-left: $size;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include spacing('margin', 'm')
|
||||
@include spacing('padding', 'p')
|
||||
|
||||
|
||||
/**
|
||||
* Callouts
|
||||
@ -183,18 +192,18 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: $-m;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
padding-bottom: $-xs;
|
||||
h3 {
|
||||
padding: $-m;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
padding-bottom: $-xs;
|
||||
margin: 0;
|
||||
font-size: $fs-s;
|
||||
color: #888;
|
||||
fill: #888;
|
||||
color: #444;
|
||||
fill: #666;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h3 a {
|
||||
line-height: 1;
|
||||
|
||||
100
resources/assets/sass/_colors.scss
Normal file
100
resources/assets/sass/_colors.scss
Normal file
@ -0,0 +1,100 @@
|
||||
/*
|
||||
* Text colors
|
||||
*/
|
||||
p.pos, p .pos, span.pos, .text-pos {
|
||||
color: $positive;
|
||||
fill: $positive;
|
||||
&:hover {
|
||||
color: $positive;
|
||||
fill: $positive;
|
||||
}
|
||||
}
|
||||
|
||||
p.neg, p .neg, span.neg, .text-neg {
|
||||
color: $negative;
|
||||
fill: $negative;
|
||||
&:hover {
|
||||
color: $negative;
|
||||
fill: $negative;
|
||||
}
|
||||
}
|
||||
|
||||
p.muted, p .muted, span.muted, .text-muted {
|
||||
color: lighten($text-dark, 26%);
|
||||
fill: lighten($text-dark, 26%);
|
||||
&.small, .small {
|
||||
color: lighten($text-dark, 32%);
|
||||
fill: lighten($text-dark, 32%);
|
||||
}
|
||||
}
|
||||
|
||||
p.primary, p .primary, span.primary, .text-primary {
|
||||
color: $primary;
|
||||
fill: $primary;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
p.secondary, p .secondary, span.secondary, .text-secondary {
|
||||
color: $secondary;
|
||||
fill: $secondary;
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
fill: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.text-bookshelf {
|
||||
color: $color-bookshelf;
|
||||
fill: $color-bookshelf;
|
||||
&:hover {
|
||||
color: $color-bookshelf;
|
||||
fill: $color-bookshelf;
|
||||
}
|
||||
}
|
||||
.text-book {
|
||||
color: $color-book;
|
||||
fill: $color-book;
|
||||
&:hover {
|
||||
color: $color-book;
|
||||
fill: $color-book;
|
||||
}
|
||||
}
|
||||
.text-page {
|
||||
color: $color-page;
|
||||
fill: $color-page;
|
||||
&:hover {
|
||||
color: $color-page;
|
||||
fill: $color-page;
|
||||
}
|
||||
&.draft {
|
||||
color: $color-page-draft;
|
||||
fill: $color-page-draft;
|
||||
}
|
||||
&.draft:hover {
|
||||
color: $color-page-draft;
|
||||
fill: $color-page-draft;
|
||||
}
|
||||
}
|
||||
.text-chapter {
|
||||
color: $color-chapter;
|
||||
fill: $color-chapter;
|
||||
&:hover {
|
||||
color: $color-chapter;
|
||||
fill: $color-chapter;
|
||||
}
|
||||
}
|
||||
.faded .text-book:hover {
|
||||
color: $color-book !important;
|
||||
fill: $color-book !important;
|
||||
}
|
||||
.faded .text-chapter:hover {
|
||||
color: $color-chapter !important;
|
||||
fill: $color-chapter !important;
|
||||
}
|
||||
.faded .text-page:hover {
|
||||
color: $color-page !important;
|
||||
fill: $color-page !important;
|
||||
}
|
||||
@ -270,6 +270,8 @@ div[class^="col-"] img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// TODO - Remove old BS grid system
|
||||
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
@ -908,18 +910,12 @@ div[class^="col-"] img {
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.container:before,
|
||||
.container:after,
|
||||
.container-fluid:before,
|
||||
.container-fluid:after,
|
||||
.row:before,
|
||||
.row:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after,
|
||||
.container:after,
|
||||
.container-fluid:after,
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
@ -928,3 +924,63 @@ div[class^="col-"] img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: $-m;
|
||||
grid-row-gap: 0;
|
||||
&.contained {
|
||||
max-width: $max-width;
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@each $sizeLetter, $size in $spacing {
|
||||
.grid.contained.space-#{$sizeLetter} {
|
||||
padding-left: $size;
|
||||
padding-right: $size;
|
||||
grid-column-gap: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-layout($name, $times) {
|
||||
.grid.#{$name} {
|
||||
grid-template-columns: repeat(#{$times}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@include grid-layout('thirds', 3)
|
||||
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@include smaller-than($size) {
|
||||
.grid.break-#{$sizeLetter} {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Visibility
|
||||
*/
|
||||
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@include smaller-than($size) {
|
||||
.hide-under-#{$sizeLetter} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include larger-than($size) {
|
||||
.hide-over-#{$sizeLetter} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,21 +2,22 @@
|
||||
* Includes the main navigation header and the faded toolbar.
|
||||
*/
|
||||
|
||||
header .grid {
|
||||
grid-template-columns: auto min-content auto;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
background-color: $primary-dark;
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
.padded {
|
||||
padding: $-m;
|
||||
}
|
||||
border-bottom: 1px solid #DDD;
|
||||
.links {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: $-m;
|
||||
}
|
||||
.links a {
|
||||
display: inline-block;
|
||||
@ -28,15 +29,6 @@ header {
|
||||
padding-left: $-m;
|
||||
padding-right: 0;
|
||||
}
|
||||
@include smaller-than($screen-md) {
|
||||
.links a {
|
||||
padding-left: $-s;
|
||||
padding-right: $-s;
|
||||
}
|
||||
.dropdown-container {
|
||||
padding-left: $-s;
|
||||
}
|
||||
}
|
||||
.avatar, .user-name {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -63,27 +55,17 @@ header {
|
||||
padding-top: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
@include smaller-than($screen-md) {
|
||||
@include between($l, $xl) {
|
||||
padding-left: $-xs;
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include smaller-than($screen-sm) {
|
||||
text-align: center;
|
||||
.float.right {
|
||||
float: none;
|
||||
}
|
||||
.links a {
|
||||
padding: $-s;
|
||||
}
|
||||
.user-name {
|
||||
padding-top: $-s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header-search {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -115,20 +97,11 @@ header .search-box {
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: #DDD;
|
||||
}
|
||||
@include smaller-than($screen-lg) {
|
||||
max-width: 250px;
|
||||
}
|
||||
@include smaller-than($l) {
|
||||
@include between($l, $xl) {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.header-search {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
@ -151,6 +124,73 @@ header .search-box {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
color: #FFF;
|
||||
fill: #FFF;
|
||||
font-size: 2em;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
padding: 0 $-xs;
|
||||
position: absolute;
|
||||
right: $-m;
|
||||
top: 8px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
header .header-links {
|
||||
display: none;
|
||||
background-color: #FFF;
|
||||
z-index: 10;
|
||||
right: $-m;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-shadow: $bs-hover;
|
||||
margin-top: -$-xs;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
header .links a, header .dropdown-container ul li a {
|
||||
text-align: left;
|
||||
display: block;
|
||||
padding: $-s $-m;
|
||||
color: $text-dark;
|
||||
fill: $text-dark;
|
||||
svg {
|
||||
margin-right: $-s;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #EEE;
|
||||
color: #444;
|
||||
fill: #444;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
header .dropdown-container {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
}
|
||||
header .links {
|
||||
display: block;
|
||||
}
|
||||
header .dropdown-container ul {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumbs span.sep {
|
||||
color: #aaa;
|
||||
padding: 0 $-xs;
|
||||
|
||||
@ -227,20 +227,13 @@
|
||||
}
|
||||
|
||||
.activity-list-item {
|
||||
padding: $-s 0;
|
||||
padding: $-s $-m;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: $-m;
|
||||
color: #888;
|
||||
fill: #888;
|
||||
border-bottom: 1px solid #EEE;
|
||||
font-size: 0.9em;
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.left + .right {
|
||||
margin-left: 30px + $-s;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
@ -281,9 +274,6 @@ ul.pagination {
|
||||
}
|
||||
|
||||
.entity-list {
|
||||
> div {
|
||||
padding: $-m 0;
|
||||
}
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
@ -304,13 +294,29 @@ ul.pagination {
|
||||
}
|
||||
}
|
||||
|
||||
.card .entity-list-item, .card .activity-list-item {
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
.entity-list-item {
|
||||
padding: $-s $-m;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: $-m;
|
||||
align-items: top;
|
||||
> .content {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h4 a {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
a.entity-list-item:hover {
|
||||
text-decoration: none;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.entity-list.compact {
|
||||
font-size: 0.6em;
|
||||
font-size: 0.6 * $fs-m;
|
||||
h4, a {
|
||||
line-height: 1.2;
|
||||
}
|
||||
@ -331,6 +337,11 @@ ul.pagination {
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
h4 {
|
||||
font-size: 1.666em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
@mixin larger-than($size) {
|
||||
@media screen and (min-width: $size) { @content; }
|
||||
}
|
||||
@mixin between($min, $max) {
|
||||
@media screen and (min-width: $min) and (max-width: $max) { @content; }
|
||||
}
|
||||
@mixin clearfix() {
|
||||
&:after {
|
||||
display: block;
|
||||
|
||||
@ -363,4 +363,31 @@
|
||||
.mce-open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-icon {
|
||||
font-size: 1.3em;
|
||||
width: 1.88em;
|
||||
height: 1.88em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-radius: 1em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
svg {
|
||||
margin: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
opacity: 0.2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -233,106 +233,6 @@ pre code {
|
||||
display: block;
|
||||
line-height: 1.6;
|
||||
}
|
||||
/*
|
||||
* Text colors
|
||||
*/
|
||||
p.pos, p .pos, span.pos, .text-pos {
|
||||
color: $positive;
|
||||
fill: $positive;
|
||||
&:hover {
|
||||
color: $positive;
|
||||
fill: $positive;
|
||||
}
|
||||
}
|
||||
|
||||
p.neg, p .neg, span.neg, .text-neg {
|
||||
color: $negative;
|
||||
fill: $negative;
|
||||
&:hover {
|
||||
color: $negative;
|
||||
fill: $negative;
|
||||
}
|
||||
}
|
||||
|
||||
p.muted, p .muted, span.muted, .text-muted {
|
||||
color: lighten($text-dark, 26%);
|
||||
fill: lighten($text-dark, 26%);
|
||||
&.small, .small {
|
||||
color: lighten($text-dark, 32%);
|
||||
fill: lighten($text-dark, 32%);
|
||||
}
|
||||
}
|
||||
|
||||
p.primary, p .primary, span.primary, .text-primary {
|
||||
color: $primary;
|
||||
fill: $primary;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
p.secondary, p .secondary, span.secondary, .text-secondary {
|
||||
color: $secondary;
|
||||
fill: $secondary;
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
fill: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.text-bookshelf {
|
||||
color: $color-bookshelf;
|
||||
fill: $color-bookshelf;
|
||||
&:hover {
|
||||
color: $color-bookshelf;
|
||||
fill: $color-bookshelf;
|
||||
}
|
||||
}
|
||||
.text-book {
|
||||
color: $color-book;
|
||||
fill: $color-book;
|
||||
&:hover {
|
||||
color: $color-book;
|
||||
fill: $color-book;
|
||||
}
|
||||
}
|
||||
.text-page {
|
||||
color: $color-page;
|
||||
fill: $color-page;
|
||||
&:hover {
|
||||
color: $color-page;
|
||||
fill: $color-page;
|
||||
}
|
||||
&.draft {
|
||||
color: $color-page-draft;
|
||||
fill: $color-page-draft;
|
||||
}
|
||||
&.draft:hover {
|
||||
color: $color-page-draft;
|
||||
fill: $color-page-draft;
|
||||
}
|
||||
}
|
||||
.text-chapter {
|
||||
color: $color-chapter;
|
||||
fill: $color-chapter;
|
||||
&:hover {
|
||||
color: $color-chapter;
|
||||
fill: $color-chapter;
|
||||
}
|
||||
}
|
||||
.faded .text-book:hover {
|
||||
color: $color-book !important;
|
||||
fill: $color-book !important;
|
||||
}
|
||||
.faded .text-chapter:hover {
|
||||
color: $color-chapter !important;
|
||||
fill: $color-chapter !important;
|
||||
}
|
||||
.faded .text-page:hover {
|
||||
color: $color-page !important;
|
||||
fill: $color-page !important;
|
||||
}
|
||||
|
||||
span.highlight {
|
||||
//background-color: rgba($primary, 0.2);
|
||||
|
||||
@ -8,7 +8,7 @@ $max-width: 1400px;
|
||||
$xl: 1100px;
|
||||
$ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
|
||||
$l: 1000px;
|
||||
$m: 800px;
|
||||
$m: 880px;
|
||||
$s: 600px;
|
||||
$xs: 400px;
|
||||
$xxs: 360px;
|
||||
@ -16,6 +16,8 @@ $screen-lg: 1200px;
|
||||
$screen-md: 992px;
|
||||
$screen-sm: 768px;
|
||||
|
||||
$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
|
||||
|
||||
// Spacing (Margins+Padding)
|
||||
$-xxxl: 64px;
|
||||
$-xxl: 48px;
|
||||
@ -26,6 +28,8 @@ $-s: 12px;
|
||||
$-xs: 6px;
|
||||
$-xxs: 3px;
|
||||
|
||||
$spacing: (('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl));
|
||||
|
||||
// Fonts
|
||||
$text: -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
@import "mixins";
|
||||
@import "html";
|
||||
@import "text";
|
||||
@import "colors";
|
||||
@import "grid";
|
||||
@import "blocks";
|
||||
@import "buttons";
|
||||
|
||||
Reference in New Issue
Block a user