webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-02 02:26:57 +03:00
Code Activity

Actioned some todo items, Cleaned old grid css

Browse Source
This commit is contained in:
Dan Brown
2019-04-07 09:57:48 +01:00
parent d9cde4123d
commit 0a06e2bce3
30 changed files with 554 additions and 1451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
resources/assets/sass/_blocks.scss
View File

@ -1,121 +1,8 @@
/*
* This file container all block styling including margins, paddings & borders.
* This file contains styling for custom block formats.
*/
/*
* Padding
* TODO - Remove these older styles
*/
.nopadding {
padding: 0;
}
.padded {
padding: $-l;
&.large {
padding: $-xl;
}
>h1, >h2, >h3, >h4 {
&:first-child {
margin-top: 0.1em;
}
}
}
.padded-vertical, .padded-top {
padding-top: $-m;
&.large {
padding-top: $-xl;
}
}
.padded-vertical, .padded-bottom {
padding-bottom: $-m;
&.large {
padding-bottom: $-xl;
}
}
.padded-horizontal, .padded-left {
padding-left: $-m;
&.large {
padding-left: $-xl;
}
}
.padded-horizontal, .padded-right {
padding-right: $-m;
&.large {
padding-right: $-xl;
}
}
/*
* Margins
* TODO - Remove these older styles
*/
.margins {
margin: $-l;
&.large {
margin: $-xl;
}
}
.margins-vertical, .margin-top {
margin-top: $-m;
&.large {
margin-top: $-xl;
}
}
.margins-vertical, .margin-bottom {
margin-bottom: $-m;
&.large {
margin-bottom: $-xl;
}
}
.margins-horizontal, .margin-left {
margin-left: $-m;
&.large {
margin-left: $-xl;
}
}
.margins-horizontal, .margin-right {
margin-right: $-m;
&.large {
margin-right: $-xl;
}
}
@mixin spacing($prop, $propLetter) {
@each $sizeLetter, $size in $spacing {
.#{$propLetter}-#{$sizeLetter} {
#{$prop}: $size !important;
}
.#{$propLetter}x-#{$sizeLetter} {
#{$prop}-left: $size !important;
#{$prop}-right: $size !important;
}
.#{$propLetter}y-#{$sizeLetter} {
#{$prop}-top: $size !important;
#{$prop}-bottom: $size !important;
}
.#{$propLetter}t-#{$sizeLetter} {
#{$prop}-top: $size !important;
}
.#{$propLetter}r-#{$sizeLetter} {
#{$prop}-right: $size !important;
}
.#{$propLetter}b-#{$sizeLetter} {
#{$prop}-bottom: $size !important;
}
.#{$propLetter}l-#{$sizeLetter} {
#{$prop}-left: $size !important;
}
}
}
@include spacing('margin', 'm')
@include spacing('padding', 'p')
/**
* Callouts
*/
@ -238,9 +125,6 @@
margin: $-s 0;
width: 100%;
}
> div.padded {
padding: $-s 0 !important;
}
.handle {
background-color: #EEE;
left: 0;
@ -289,4 +173,74 @@
.tag-list div:last-child .tag-item {
margin-bottom: 0;
}
.grid-card {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
margin-bottom: $-l;
border-radius: 4px;
overflow: hidden;
min-width: 100px;
color: $text-dark;
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover {
color: $text-dark;
text-decoration: none;
box-shadow: $bs-card;
}
h2 {
width: 100%;
font-size: 1.5em;
margin: 0 0 10px;
}
p {
font-size: .7rem;
margin: 0;
line-height: 1.6em;
}
.grid-card-content {
flex: 1;
border-top: 0;
border-bottom-width: 2px;
}
.grid-card-content, .grid-card-footer {
padding: $-l;
}
.grid-card-content + .grid-card-footer {
padding-top: 0;
}
}
.bookshelf-grid-item .grid-card-content h2 a {
color: $color-bookshelf;
fill: $color-bookshelf;
}
.book-grid-item .grid-card-footer {
p.small {
font-size: .8em;
margin: 0;
}
}
.content-wrap.card {
padding: $-l $-xxl;
margin-left: auto;
margin-right: auto;
margin-bottom: $-xl;
overflow: auto;
min-height: 60vh;
&.auto-height {
min-height: 0;
}
&.fill-width {
width: 100%;
}
}
@include smaller-than($m) {
.content-wrap.card {
padding: $-m $-l;
}
}

3
resources/assets/sass/_components.scss
View File

@ -142,6 +142,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
#entity-selector-wrap .popup-body .form-group {
margin: 0;
}
.popup-body .entity-selector-container {
flex: 1;
}
.image-manager-body {
min-height: 70vh;

1067
resources/assets/sass/_grid.scss
View File

File diff suppressed because it is too large Load Diff

9
resources/assets/sass/_header.scss
View File

@ -6,6 +6,12 @@ header .grid {
grid-template-columns: auto min-content auto;
}
@include smaller-than($l) {
header .grid {
grid-template-columns: 1fr;
}
}
header {
position: relative;
display: block;
@ -336,9 +342,6 @@ header .search-box {
.action-buttons .dropdown-container:last-child a {
padding-left: $-xs;
}
.toolbar .col-xs-1:first-child {
padding-right: 0;
}
}
.nav-tabs {

286
resources/assets/sass/_layout.scss Normal file
View File

@ -0,0 +1,286 @@
/**
* Generic content container
*/
.container {
max-width: $xxl;
margin-left: auto;
margin-right: auto;
padding-left: $-m;
padding-right: $-m;
&.small {
max-width: 840px;
}
&.very-small {
max-width: 480px;
}
}
/**
* Core grid layout system
*/
.grid {
display: grid;
grid-column-gap: $-l;
grid-row-gap: $-l;
&.half {
grid-template-columns: 1fr 1fr;
}
&.third {
grid-template-columns: 1fr 1fr 1fr;
}
&.left-focus {
grid-template-columns: 2fr 1fr;
}
&.right-focus {
grid-template-columns: 1fr 3fr;
}
&.gap-xl {
grid-column-gap: $-xl;
grid-row-gap: $-xl;
}
&.gap-xxl {
grid-column-gap: $-xxl;
grid-row-gap: $-xxl;
}
&.v-center {
align-items: center;
}
}
@include smaller-than($m) {
.grid.third {
grid-template-columns: 1fr 1fr;
}
.grid.half, .grid.left-focus, .grid.right-focus {
grid-template-columns: 1fr;
}
.grid.half.collapse-xs {
grid-template-columns: 1fr 1fr;
}
.grid.gap-xl {
grid-column-gap: $-m;
grid-row-gap: $-m;
}
.grid.right-focus.reverse-collapse > *:nth-child(2) {
order: 0;
}
.grid.right-focus.reverse-collapse > *:nth-child(1) {
order: 1;
}
}
@include smaller-than($s) {
.grid.third {
grid-template-columns: 1fr;
}
}
@include smaller-than($xs) {
.grid.half.collapse-xs {
grid-template-columns: 1fr;
}
}
/**
* Flexbox layout system
*/
body.flexbox {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
min-height: 100%;
max-height: 100%;
overflow: hidden;
#content {
flex: 1;
display: flex;
min-height: 0;
}
}
.flex-fill {
display: flex;
align-items: stretch;
min-height: 0;
max-width: 100%;
position: relative;
}
.flex {
min-height: 0;
flex: 1;
}
/**
* Display and float utilities
*/
.block {
display: block;
position: relative;
}
.inline {
display: inline;
}
.block.inline {
display: inline-block;
}
.float {
float: left;
&.right {
float: right;
}
}
/**
* 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;
}
}
}
/**
* Inline content columns
*/
.dual-column-content {
columns: 2;
}
@include smaller-than($m) {
.dual-column-content {
columns: 1;
}
}
/**
* Fixes
*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* View Layouts
*/
.tri-layout-container {
display: grid;
margin-left: $-xl;
margin-right: $-xl;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
grid-column-gap: $-xxl;
.tri-layout-right {
grid-area: c;
min-width: 0;
}
.tri-layout-left {
grid-area: a;
min-width: 0;
}
.tri-layout-middle {
grid-area: b;
padding-top: $-m;
}
}
@include smaller-than($xxl) {
.tri-layout-container {
grid-template-areas: "c b b"
"a b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: max-content min-content;
padding-right: $-l;
.content-wrap.card {
padding: $-l $-xl;
}
}
}
@include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
padding: $-m;
position: sticky;
top: $-m;
max-height: 100vh;
min-height: 50vh;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.tri-layout-middle-contents {
max-width: 940px;
margin: 0 auto;
}
}
@include smaller-than($l) {
.tri-layout-container {
grid-template-areas: none;
grid-template-columns: 10% 90%;
grid-column-gap: 0;
.tri-layout-left-contents, .tri-layout-right-contents {
padding-left: $-m;
padding-right: $-m;
}
.tri-layout-right-contents > div, .tri-layout-left-contents > div {
opacity: 0.6;
z-index: 0;
}
.tri-layout-left > *, .tri-layout-right > * {
pointer-events: none;
}
.tri-layout-right, .tri-layout-left, .tri-layout-middle {
grid-area: none;
grid-column: 1/3;
grid-row: 1;
}
.tri-layout-middle {
grid-row: 1/3;
grid-column: 2/3;
z-index: 1;
transition: transform ease-in-out 240ms;
}
.tri-layout-left {
grid-row: 2;
}
&.mobile-open {
overflow: hidden;
.tri-layout-middle {
transform: translateX(90%);
}
.tri-layout-right > *, .tri-layout-left > * {
pointer-events: auto;
}
}
}
}
.tri-layout-left-contents > div, .tri-layout-right-contents > div {
opacity: 0.6;
transition: opacity ease-in-out 120ms;
&:hover {
opacity: 1;
}
}

4
resources/assets/sass/_lists.scss
View File

@ -523,10 +523,6 @@ ul.pagination {
color: #999;
fill: #999;
}
li.padded {
padding: $-xs $-m;
line-height: 1.2;
}
li.active a {
font-weight: 600;
}

7
resources/assets/sass/_pages.scss
View File

@ -243,13 +243,6 @@
min-height: 0px;
overflow-y: scroll;
}
div[toolbox-tab-content] .padded {
flex: 1;
padding-top: 0;
}
div[toolbox-tab-content] .padded.files {
overflow-x: hidden;
}
h4 {
font-size: 24px;
margin: $-m 0 0 0;

32
resources/assets/sass/_spacing.scss Normal file
View File

@ -0,0 +1,32 @@
// Here we generate spacing utility classes for our sizes for all box sides and axis.
// These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
@mixin spacing($prop, $propLetter) {
@each $sizeLetter, $size in $spacing {
.#{$propLetter}-#{$sizeLetter} {
#{$prop}: $size !important;
}
.#{$propLetter}x-#{$sizeLetter} {
#{$prop}-left: $size !important;
#{$prop}-right: $size !important;
}
.#{$propLetter}y-#{$sizeLetter} {
#{$prop}-top: $size !important;
#{$prop}-bottom: $size !important;
}
.#{$propLetter}t-#{$sizeLetter} {
#{$prop}-top: $size !important;
}
.#{$propLetter}r-#{$sizeLetter} {
#{$prop}-right: $size !important;
}
.#{$propLetter}b-#{$sizeLetter} {
#{$prop}-bottom: $size !important;
}
.#{$propLetter}l-#{$sizeLetter} {
#{$prop}-left: $size !important;
}
}
}
@include spacing('margin', 'm')
@include spacing('padding', 'p')

2
resources/assets/sass/_variables.scss
View File

@ -14,6 +14,7 @@ $screen-lg: 1200px;
$screen-md: 992px;
$screen-sm: 768px;
// List of screen sizes
$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
// Spacing (Margins+Padding)
@ -26,6 +27,7 @@ $-s: 12px;
$-xs: 6px;
$-xxs: 3px;
// List of our spacing sizes
$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl));
// Fonts

10
resources/assets/sass/export-styles.scss
View File

@ -1,8 +1,9 @@
@import "variables";
@import "mixins";
@import "spacing";
@import "html";
@import "text";
@import "grid";
@import "layout";
@import "blocks";
@import "forms";
@import "tables";
@ -12,6 +13,9 @@
body {
font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background-color: #FFF;
margin: 0;
padding: 0;
}
table {
@ -19,6 +23,10 @@ table {
border-collapse: collapse;
}
.page-content {
overflow: hidden;
}
// Prevent code block overflow on export
pre {
padding-left: 12px;

3
resources/assets/sass/styles.scss
View File

@ -1,10 +1,11 @@
@import "reset";
@import "variables";
@import "mixins";
@import "spacing";
@import "html";
@import "text";
@import "colors";
@import "grid";
@import "layout";
@import "blocks";
@import "buttons";
@import "tables";