webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Converted primary color use to css variable

Browse Source 
- Removed all existing SCSS usage of primary color.
- Cut down custom styles injection to just be css vars.
- Reduced button styles so default button is primary.
- Updated button styles to lighten/brighten on hover & active states even
when a custom color is set.
- Removed unused scss color vars.
- Updated default BookStack blue to achieve better accessibility.
This commit is contained in:
Dan Brown
2019-08-25 12:40:04 +01:00
parent b792108bc1
commit ae93a6ed07
42 changed files with 120 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/js/components/setting-app-color-picker.js
View File

@ -10,7 +10,7 @@ class SettingAppColorPicker {
this.colorInput.addEventListener('change', this.updateColor.bind(this));
this.colorInput.addEventListener('input', this.updateColor.bind(this));
this.resetButton.addEventListener('click', event => {
this.colorInput.value = '#0288D1';
this.colorInput.value = '#1d75b6';
this.updateColor();
});
}

72
resources/assets/sass/_buttons.scss
View File

@ -4,28 +4,6 @@ button {
font-size: 100%;
}
@mixin generate-button-colors($textColor, $backgroundColor) {
background-color: $backgroundColor;
color: $textColor;
fill: $textColor;
border: 1px solid $backgroundColor;
&:hover {
background-color: lighten($backgroundColor, 8%);
color: $textColor;
}
&:active {
background-color: darken($backgroundColor, 8%);
}
&:focus {
background-color: lighten($backgroundColor, 4%);
box-shadow: $bs-light;
color: $textColor;
}
}
// Button Specific Variables
$button-border-radius: 2px;
.button {
text-decoration: none;
font-size: 0.85rem;
@ -36,39 +14,54 @@ $button-border-radius: 2px;
display: inline-block;
font-weight: 400;
outline: 0;
border-radius: $button-border-radius;
border-radius: 2px;
cursor: pointer;
transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
transition: background-color ease-in-out 120ms,
filter ease-in-out 120ms,
box-shadow ease-in-out 120ms;
box-shadow: none;
background-color: $primary;
background-color: var(--color-primary);
color: #FFF;
fill: #FFF;
text-transform: uppercase;
border: 1px solid $primary;
border: 1px solid var(--color-primary);
vertical-align: top;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: var(--color-primary);
text-decoration: none;
color: #FFFFFF;
}
&:hover {
box-shadow: $bs-light;
filter: brightness(110%);
}
&:focus {
outline: 1px dotted currentColor;
outline-offset: -$-xs;
box-shadow: none;
filter: brightness(90%);
}
&:active {
outline: 0;
background-color: darken($primary, 8%);
}
}
.button.primary {
@include generate-button-colors(#FFFFFF, $primary);
}
.button.outline {
background-color: transparent;
color: #888;
fill: #888;
border: 1px solid #DDD;
color: #666;
fill: currentColor;
border: 1px solid #CCC;
&:hover, &:focus, &:active {
border: 1px solid #CCC;
box-shadow: none;
background-color: #EEE;
background-color: #F2F2F2;
filter: none;
}
&:active {
border-color: #BBB;
background-color: #DDD;
color: #666;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
}
@ -90,12 +83,18 @@ $button-border-radius: 2px;
user-select: none;
font-size: 0.75rem;
line-height: 1.4em;
&:active {
color: var(--color-primary);
fill: var(--color-primary);
&:active {
outline: 0;
}
&:hover {
text-decoration: none;
}
&:hover, &:focus {
color: var(--color-primary);
fill: var(--color-primary);
}
}
.button.block {
@ -125,6 +124,7 @@ $button-border-radius: 2px;
.button[disabled] {
background-color: #BBB;
cursor: default;
border-color: #CCC;
&:hover {
background-color: #BBB;
cursor: default;

14
resources/assets/sass/_colors.scss
View File

@ -1,3 +1,13 @@
/**
* Background colors
*/
.primary-background {
background-color: var(--color-primary) !important;
}
.primary-background-light {
background-color: var(--color-primary-light);
}
/*
* Status text colors
@ -21,8 +31,8 @@
* Style text colors
*/
.text-primary, .text-primary:hover, .text-primary-hover:hover {
color: $primary !important;
fill: $primary !important;
color: var(--color-primary) !important;
fill: var(--color-primary) !important;
}
.text-muted {

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

@ -150,9 +150,6 @@
padding: 8px $-m;
}
}
.popup-footer {
margin-top: 1px;
}
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 444px;
min-height: 444px;
@ -582,6 +579,20 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
}
.nav-tabs {
text-align: center;
a, .tab-item {
padding: $-m;
display: inline-block;
color: #666;
fill: #666;
cursor: pointer;
&.selected {
border-bottom: 2px solid var(--color-primary);
}
}
}
.image-picker .none {
display: none;
}

8
resources/assets/sass/_forms.scss
View File

@ -98,7 +98,7 @@
max-width: 100%;
}
[drawio-diagram]:hover {
outline: 2px solid $primary;
outline: 2px solid var(--color-primary);
}
}
@ -339,16 +339,16 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
button {
background-color: transparent;
border: none;
color: $primary;
fill: #666;
padding: 0;
cursor: pointer;
position: absolute;
left: 8px;
top: 9.5px;
top: 9px;
}
input {
display: block;
padding-left: $-l;
padding-left: $-l + 4px;
width: 300px;
max-width: 100%;
}

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

@ -18,7 +18,6 @@ header {
display: block;
z-index: 11;
top: 0;
background-color: $primary-dark;
color: #fff;
fill: #fff;
border-bottom: 1px solid #DDD;
@ -371,18 +370,4 @@ header .search-box {
.action-buttons .dropdown-container:last-child a {
padding-left: $-xs;
}
}
.nav-tabs {
text-align: center;
a, .tab-item {
padding: $-m;
display: inline-block;
color: #666;
fill: #666;
cursor: pointer;
&.selected {
border-bottom: 2px solid $primary;
}
}
}

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

@ -90,14 +90,14 @@ h2.list-heading {
* Link styling
*/
a {
color: $primary;
color: var(--color-primary);
fill: var(--color-primary);
cursor: pointer;
text-decoration: none;
transition: color ease-in-out 80ms;
transition: filter ease-in-out 80ms;
line-height: 1.6;
&:hover {
text-decoration: underline;
color: darken($primary, 20%);
}
&.icon {
display: inline-block;
@ -195,7 +195,7 @@ pre {
blockquote {
display: block;
position: relative;
border-left: 4px solid $primary;
border-left: 4px solid var(--color-primary);
background-color: #F8F8F8;
padding: $-s $-m $-s $-xl;
&:before {
@ -239,7 +239,6 @@ pre code {
}
span.highlight {
//background-color: rgba($primary, 0.2);
font-weight: bold;
padding: 2px 4px;
}

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

@ -41,20 +41,20 @@ $fs-m: 14px;
$fs-s: 12px;
// Colours
$primary: #0288D1;
$primary-dark: #0288D1;
$secondary: #cf4d03;
:root {
--color-primary: '#1d75b6';
--color-primary-light: 'rgba(29,117,182,0.15)';
}
$positive: #0f7d15;
$negative: #ab0f0e;
$info: $primary;
$warning: $secondary;
$primary-faded: rgba(21, 101, 192, 0.15);
$info: #0288D1;
$warning: #cf4d03;
// Item Colors
$color-bookshelf: #af5a5a;
$color-book: #009688;
$color-chapter: #d7804a;
$color-page: $primary;
$color-page: #0288D1;
$color-page-draft: #9A60DA;
// Text colours

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

@ -99,7 +99,7 @@ $loadingSize: 10px;
// Back to top link
$btt-size: 40px;
[back-to-top] {
background-color: $primary;
background-color: var(--color-primary);
position: fixed;
bottom: $-m;
right: $-l;
@ -187,7 +187,7 @@ $btt-size: 40px;
margin-bottom: 0;
}
.entity-list-item.selected {
background-color: rgba(0, 0, 0, 0.15) !important;
background-color: rgba(0, 0, 0, 0.05) !important;
}
.loading {
height: 400px;