Cleaned up usage of some core scss files

This commit is contained in:
Dan Brown
2019-04-07 11:34:40 +01:00
parent 0a06e2bce3
commit 8c21b5345d
40 changed files with 190 additions and 332 deletions

View File

@ -6,7 +6,7 @@ class Overlay {
elem.addEventListener('click', event => { elem.addEventListener('click', event => {
if (event.target === elem) return this.hide(); if (event.target === elem) return this.hide();
}); });
let closeButtons = elem.querySelectorAll('.overlay-close'); let closeButtons = elem.querySelectorAll('.popup-header-close');
for (let i=0; i < closeButtons.length; i++) { for (let i=0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', this.hide.bind(this)); closeButtons[i].addEventListener('click', this.hide.bind(this));
} }

View File

@ -36,26 +36,6 @@
} }
} }
.anim.menuIn {
transform-origin: 100% 0%;
animation-name: menuIn;
animation-duration: 120ms;
animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
}
@keyframes menuIn {
from {
opacity: 0;
transform: scale3d(0, 0, 1);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes loadingBob { @keyframes loadingBob {
0% { 0% {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
@ -89,8 +69,4 @@
animation-duration: 180ms; animation-duration: 180ms;
animation-delay: 0s; animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99); animation-timing-function: cubic-bezier(.62, .28, .23, .99);
}
.selectFade {
transition: background-color ease-in-out 3000ms;
} }

View File

@ -1,12 +1,7 @@
/*
* This file contains styling for custom block formats.
*/
/** /**
* Callouts * Callouts
*/ */
.callout { .callout {
border-left: 3px solid #BBB; border-left: 3px solid #BBB;
background-color: #EEE; background-color: #EEE;
@ -58,14 +53,17 @@
} }
} }
/**
* Card-style blocks
*/
.card { .card {
background-color: #FFF; background-color: #FFF;
box-shadow: $bs-card; box-shadow: $bs-card;
border-radius: 3px; border-radius: 3px;
border: 1px solid transparent; border: 1px solid transparent;
h3 { h3 {
padding: $-m; padding: $-m $-m $-xs;
padding-bottom: $-xs;
margin: 0; margin: 0;
font-size: $fs-m; font-size: $fs-m;
color: #222; color: #222;
@ -84,21 +82,11 @@
} }
} }
.sidebar .card {
.body, .empty-text {
padding: $-s $-m;
}
h3 + .body {
padding-top: $-xs;
}
}
.card.drag-card { .card.drag-card {
border: 1px solid #DDD; border: 1px solid #DDD;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
padding: 0; padding: 0 0 0 ($-s + 28px);
padding-left: $-s + 28px;
margin: $-s 0; margin: $-s 0;
position: relative; position: relative;
.drag-card-action { .drag-card-action {
@ -106,14 +94,12 @@
} }
.handle, .drag-card-action { .handle, .drag-card-action {
display: flex; display: flex;
padding: 0;
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
width: 28px; width: 28px;
flex-grow: 0; flex-grow: 0;
padding-left: $-xs; padding: 0 $-xs;
padding-right: $-xs;
&:hover { &:hover {
background-color: #EEE; background-color: #EEE;
} }
@ -139,42 +125,6 @@
} }
} }
.well {
background-color: #F8F8F8;
padding: $-m;
border: 1px solid #DDD;
}
.tag-item {
display: inline-flex;
margin-bottom: $-xs;
margin-right: $-xs;
border-radius: 4px;
border: 1px solid #CCC;
overflow: hidden;
font-size: 0.85em;
a, a:hover, a:active {
padding: 4px 8px;
color: #777;
transition: background-color ease-in-out 80ms;
text-decoration: none;
}
a:hover {
background-color: rgba(255, 255, 255, 0.7);
}
svg {
fill: #888;
}
.tag-value {
border-left: 1px solid #DDD;
background-color: rgba(255, 255, 255, 0.5);
}
}
.tag-list div:last-child .tag-item {
margin-bottom: 0;
}
.grid-card { .grid-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -243,4 +193,37 @@
.content-wrap.card { .content-wrap.card {
padding: $-m $-l; padding: $-m $-l;
} }
}
/**
* Tags
*/
.tag-item {
display: inline-flex;
margin-bottom: $-xs;
margin-right: $-xs;
border-radius: 4px;
border: 1px solid #CCC;
overflow: hidden;
font-size: 0.85em;
a, a:hover, a:active {
padding: 4px 8px;
color: #777;
transition: background-color ease-in-out 80ms;
text-decoration: none;
}
a:hover {
background-color: rgba(255, 255, 255, 0.7);
}
svg {
fill: #888;
}
.tag-value {
border-left: 1px solid #DDD;
background-color: rgba(255, 255, 255, 0.5);
}
}
.tag-list div:last-child .tag-item {
margin-bottom: 0;
} }

View File

@ -1,15 +1,14 @@
button {
font-size: 100%;
}
@mixin generate-button-colors($textColor, $backgroundColor) { @mixin generate-button-colors($textColor, $backgroundColor) {
background-color: $backgroundColor; background-color: $backgroundColor;
color: $textColor; color: $textColor;
fill: $textColor; fill: $textColor;
text-transform: uppercase;
border: 1px solid $backgroundColor; border: 1px solid $backgroundColor;
vertical-align: top;
&:hover { &:hover {
background-color: lighten($backgroundColor, 8%); background-color: lighten($backgroundColor, 8%);
//box-shadow: $bs-med;
text-decoration: none;
color: $textColor; color: $textColor;
} }
&:active { &:active {
@ -18,7 +17,6 @@
&:focus { &:focus {
background-color: lighten($backgroundColor, 4%); background-color: lighten($backgroundColor, 4%);
box-shadow: $bs-light; box-shadow: $bs-light;
text-decoration: none;
color: $textColor; color: $textColor;
} }
} }
@ -26,7 +24,7 @@
// Button Specific Variables // Button Specific Variables
$button-border-radius: 2px; $button-border-radius: 2px;
.button-base { .button {
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4em; line-height: 1.4em;
@ -34,29 +32,36 @@ $button-border-radius: 2px;
margin-top: $-xs; margin-top: $-xs;
margin-bottom: $-xs; margin-bottom: $-xs;
display: inline-block; display: inline-block;
border: none;
font-weight: 400; font-weight: 400;
outline: 0; outline: 0;
border-radius: $button-border-radius; border-radius: $button-border-radius;
cursor: pointer; cursor: pointer;
transition: all ease-in-out 120ms; transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
box-shadow: 0; box-shadow: none;
@include generate-button-colors(#EEE, $primary); background-color: $primary;
color: #FFF;
fill: #FFF;
text-transform: uppercase;
border: 1px solid $primary;
vertical-align: top;
&:hover, &:focus {
text-decoration: none;
}
&:active {
background-color: darken($primary, 8%);
}
} }
.button.primary {
.button, input[type="button"], input[type="submit"] { @include generate-button-colors(#FFFFFF, $primary);
@extend .button-base; }
&.pos { .button.outline {
@include generate-button-colors(#EEE, $positive); background-color: transparent;
} color: #888;
&.neg { fill: #888;
@include generate-button-colors(#EEE, $negative); border: 1px solid #DDD;
} &:hover, &:focus, &:active {
&.secondary { box-shadow: none;
@include generate-button-colors(#EEE, $secondary); background-color: #EEE;
}
&.muted {
@include generate-button-colors(#EEE, #AAA);
} }
} }
@ -69,91 +74,27 @@ $button-border-radius: 2px;
padding: $-xs*1.2 $-s; padding: $-xs*1.2 $-s;
} }
.button.outline {
background-color: transparent;
color: #888;
fill: #888;
border: 1px solid #DDD;
&:hover, &:focus, &:active {
box-shadow: none;
background-color: #EEE;
}
&.page {
border-color: $color-page;
color: $color-page;
fill: $color-page;
&:hover, &:focus, &:active {
background-color: $color-page;
color: #FFF;
fill: #FFF;
}
}
&.chapter {
border-color: $color-chapter;
color: $color-chapter;
fill: $color-chapter;
&:hover, &:focus, &:active {
background-color: $color-chapter;
color: #FFF;
fill: #FFF;
}
}
&.book {
border-color: $color-book;
color: $color-book;
fill: $color-book;
&:hover, &:focus, &:active {
background-color: $color-book;
color: #FFF;
fill: #FFF;
}
}
}
.text-button { .text-button {
@extend .link; cursor: pointer;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
user-select: none; user-select: none;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.4em;
&:focus, &:active { &:focus, &:active {
outline: 0; outline: 0;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&.neg {
color: $negative;
}
&.muted {
color: #666;
}
}
.button-group {
@include clearfix;
.button, button[type="button"] {
margin: $-xs 0 $-xs 0;
float: left;
border-radius: 0;
&:first-child {
border-radius: $button-border-radius 0 0 $button-border-radius;
}
&:last-child {
border-radius: 0 $button-border-radius $button-border-radius 0;
}
}
} }
.button.block { .button.block {
width: 100%; width: 100%;
text-align: center; text-align: left;
display: block; display: block;
&.text-left {
text-align: left;
}
} }
.button.icon { .button.icon {
@ -171,9 +112,7 @@ $button-border-radius: 2px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
padding: $-s $-m; padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
padding-bottom: $-s - 2px;
padding-left: $-m*2 + 24px;
} }
.button[disabled] { .button[disabled] {

View File

@ -1,104 +1,66 @@
/* /*
* Text colors * Status text colors
*/ */
p.pos, p .pos, span.pos, .text-pos { .text-pos, .text-pos:hover, .text-pos-hover:hover {
color: $positive; color: $positive !important;
fill: $positive; fill: $positive !important;
&:hover {
color: $positive;
fill: $positive;
}
} }
p.neg, p .neg, span.neg, .text-neg { .text-warn, .text-warn:hover, .text-warn-hover:hover {
color: $negative; color: $warning !important;
fill: $negative; fill: $warning !important;
&:hover {
color: $negative;
fill: $negative;
}
} }
p.muted, p .muted, span.muted, .text-muted { .text-neg, .text-neg:hover, .text-neg-hover:hover {
color: lighten($text-dark, 26%); color: $negative !important;
fill: lighten($text-dark, 26%); fill: $negative !important;
}
/*
* Style text colors
*/
.text-primary, .text-primary:hover, .text-primary-hover:hover {
color: $primary !important;
fill: $primary !important;
}
.text-muted {
color: lighten($text-dark, 26%) !important;
fill: lighten($text-dark, 26%) !important;
&.small, .small { &.small, .small {
color: lighten($text-dark, 32%); color: lighten($text-dark, 32%) !important;
fill: lighten($text-dark, 32%); fill: lighten($text-dark, 32%) !important;
} }
} }
p.primary, p .primary, span.primary, .text-primary { /*
color: $primary; * Entity text colors
fill: $primary; */
&:hover { .text-bookshelf, .text-bookshelf: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; color: $color-bookshelf;
fill: $color-bookshelf; fill: $color-bookshelf;
&:hover {
color: $color-bookshelf;
fill: $color-bookshelf;
}
} }
.text-book { .text-book, .text-book:hover {
color: $color-book; color: $color-book;
fill: $color-book; fill: $color-book;
&:hover {
color: $color-book;
fill: $color-book;
}
} }
.text-page { .text-page, .text-page:hover {
color: $color-page; color: $color-page;
fill: $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 { .text-page.draft, .text-page.draft:hover {
color: $color-page-draft;
fill: $color-page-draft;
}
.text-chapter, .text-chapter:hover {
color: $color-chapter; color: $color-chapter;
fill: $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;
} }
/*
* Entity background colors
*/
.bg-book { .bg-book {
background-color: $color-book; background-color: $color-book;
} }

View File

@ -115,7 +115,7 @@
} }
} }
.corner-button { .popup-footer button, .popup-header-close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -123,6 +123,16 @@
height: 40px; height: 40px;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
&:active {
outline: 0;
}
}
.popup-header-close {
background-color: transparent;
border: 0;
color: #FFF;
font-size: 16px;
padding: 0 $-m;
} }
.popup-header, .popup-footer { .popup-header, .popup-footer {
@ -135,6 +145,9 @@
padding: 8px $-m; padding: 8px $-m;
} }
} }
.popup-footer {
margin-top: 1px;
}
body.flexbox-support #entity-selector-wrap .popup-body .form-group { body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 444px; height: 444px;
min-height: 444px; min-height: 444px;

View File

@ -17,8 +17,4 @@ body {
color: #444; color: #444;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: #F2F2F2; background-color: #F2F2F2;
}
button {
font-size: 100%;
} }

View File

@ -35,6 +35,9 @@
&.right-focus { &.right-focus {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
} }
&.gap-y-xs {
grid-row-gap: $-xs;
}
&.gap-xl { &.gap-xl {
grid-column-gap: $-xl; grid-column-gap: $-xl;
grid-row-gap: $-xl; grid-row-gap: $-xl;

View File

@ -8,12 +8,3 @@
@mixin between($min, $max) { @mixin between($min, $max) {
@media screen and (min-width: $min) and (max-width: $max) { @content; } @media screen and (min-width: $min) and (max-width: $max) { @content; }
} }
@mixin clearfix() {
&:after {
display: block;
content: '';
font-size: 0;
clear: both;
position: relative;
}
}

View File

@ -90,7 +90,7 @@ h2.list-heading {
/* /*
* Link styling * Link styling
*/ */
a, .link { a {
color: $primary; color: $primary;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;

View File

@ -36,7 +36,7 @@
<hr class="my-l"> <hr class="my-l">
@foreach($socialDrivers as $driver => $name) @foreach($socialDrivers as $driver => $name)
<div> <div>
<a id="social-login-{{$driver}}" class="button outline block svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}"> <a id="social-login-{{$driver}}" class="button outline block svg" href="{{ baseUrl("/login/service/" . $driver) }}">
@icon('auth/' . $driver) @icon('auth/' . $driver)
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }} {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
</a> </a>

View File

@ -5,7 +5,7 @@
<div class="card content-wrap auto-height"> <div class="card content-wrap auto-height">
<h1 class="list-heading">{{ trans('auth.reset_password') }}</h1> <h1 class="list-heading">{{ trans('auth.reset_password') }}</h1>
<p class="muted small">{{ trans('auth.reset_password_send_instructions') }}</p> <p class="text-muted small">{{ trans('auth.reset_password_send_instructions') }}</p>
<form action="{{ baseUrl("/password/email") }}" method="POST" class="stretch-inputs"> <form action="{{ baseUrl("/password/email") }}" method="POST" class="stretch-inputs">
{!! csrf_field() !!} {!! csrf_field() !!}

View File

@ -42,7 +42,7 @@
<hr class="my-l"> <hr class="my-l">
@foreach($socialDrivers as $driver => $name) @foreach($socialDrivers as $driver => $name)
<div> <div>
<a id="social-register-{{$driver}}" class="button block outline svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}"> <a id="social-register-{{$driver}}" class="button block outline svg" href="{{ baseUrl("/register/service/" . $driver) }}">
@icon('auth/' . $driver) @icon('auth/' . $driver)
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }} {{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
</a> </a>

View File

@ -30,7 +30,7 @@
@yield('content') @yield('content')
</section> </section>
<div back-to-top> <div back-to-top class="primary-background">
<div class="inner"> <div class="inner">
@icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span> @icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span>
</div> </div>

View File

@ -29,17 +29,17 @@
@endforeach @endforeach
</div> </div>
@else @else
<div class="well"> <div>
{{--TODO--}} {{--TODO - Empty States --}}
<p class="text-muted italic">{{ trans('entities.books_empty_contents') }}</p> <p class="text-muted italic">{{ trans('entities.books_empty_contents') }}</p>
@if(userCan('page-create', $book)) @if(userCan('page-create', $book))
<a href="{{ $book->getUrl('/create-page') }}" class="button outline page">@icon('page'){{ trans('entities.books_empty_create_page') }}</a> <a href="{{ $book->getUrl('/create-page') }}" class="button outline">@icon('page'){{ trans('entities.books_empty_create_page') }}</a>
@endif @endif
@if(userCan('page-create', $book) && userCan('chapter-create', $book)) @if(userCan('page-create', $book) && userCan('chapter-create', $book))
&nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
@endif @endif
@if(userCan('chapter-create', $book)) @if(userCan('chapter-create', $book))
<a href="{{ $book->getUrl('/create-chapter') }}" class="button outline chapter">@icon('chapter'){{ trans('entities.books_empty_add_chapter') }}</a> <a href="{{ $book->getUrl('/create-chapter') }}" class="button outline">@icon('chapter'){{ trans('entities.books_empty_add_chapter') }}</a>
@endif @endif
</div> </div>
@endif @endif

View File

@ -26,18 +26,18 @@
@endforeach @endforeach
</div> </div>
@else @else
{{--TODO--}} {{--TODO - Empty States --}}
<div v-pre class="well"> <div v-pre>
<p class="text-muted italic">{{ trans('entities.chapters_empty') }}</p> <p class="text-muted italic">{{ trans('entities.chapters_empty') }}</p>
<p> <p>
@if(userCan('page-create', $chapter)) @if(userCan('page-create', $chapter))
<a href="{{ $chapter->getUrl('/create-page') }}" class="button outline page">@icon('page'){{ trans('entities.books_empty_create_page') }}</a> <a href="{{ $chapter->getUrl('/create-page') }}" class="button outline">@icon('page'){{ trans('entities.books_empty_create_page') }}</a>
@endif @endif
@if(userCan('page-create', $chapter) && userCan('book-update', $book)) @if(userCan('page-create', $chapter) && userCan('book-update', $book))
&nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp; &nbsp;
@endif @endif
@if(userCan('book-update', $book)) @if(userCan('book-update', $book))
<a href="{{ $book->getUrl('/sort') }}" class="button outline book">@icon('book'){{ trans('entities.books_empty_sort_current_book') }}</a> <a href="{{ $book->getUrl('/sort') }}" class="button outline">@icon('book'){{ trans('entities.books_empty_sort_current_book') }}</a>
@endif @endif
</p> </p>
</div> </div>

View File

@ -13,8 +13,8 @@
<div dropdown class="dropdown-container"> <div dropdown class="dropdown-container">
<button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button> <button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
<ul> <ul>
<li class="px-l"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li> <li class="px-m"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
<li><a action="delete" class="text-button neg" >@icon('delete'){{ trans('common.delete') }}</a></li> <li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
</ul> </ul>
</div> </div>
@endif @endif
@ -64,7 +64,7 @@
</div> </div>
<div class="form-group text-right"> <div class="form-group text-right">
<button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button> <button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>
<button type="submit" class="button pos">{{ trans('entities.comment_save') }}</button> <button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
</div> </div>
<div class="form-group loading" style="display: none;"> <div class="form-group loading" style="display: none;">
@include('partials.loading-icon', ['text' => trans('entities.comment_saving')]) @include('partials.loading-icon', ['text' => trans('entities.comment_saving')])

View File

@ -23,7 +23,7 @@
</div> </div>
<div class="form-group text-right"> <div class="form-group text-right">
<button type="button" class="button outline" action="hideForm">{{ trans('common.cancel') }}</button> <button type="button" class="button outline" action="hideForm">{{ trans('common.cancel') }}</button>
<button type="submit" class="button pos">{{ trans('entities.comment_save') }}</button> <button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
</div> </div>
<div class="form-group loading" style="display: none;"> <div class="form-group loading" style="display: none;">
@include('partials.loading-icon', ['text' => trans('entities.comment_saving')]) @include('partials.loading-icon', ['text' => trans('entities.comment_saving')])

View File

@ -1,4 +1,4 @@
<header id="header" header-mobile-toggle> <header id="header" header-mobile-toggle class="primary-background">
<div class="grid mx-l"> <div class="grid mx-l">
<div> <div>

View File

@ -4,7 +4,7 @@
<div class="popup-header primary-background"> <div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.code_editor') }}</div> <div class="popup-title">{{ trans('components.code_editor') }}</div>
<button class="overlay-close neg corner-button button" @click="hide()">x</button> <button class="popup-header-close" @click="hide()">x</button>
</div> </div>
<div class="p-l popup-content"> <div class="p-l popup-content">
@ -43,7 +43,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<button type="button" class="button pos" @click="save()">{{ trans('components.code_save') }}</button> <button type="button" class="button primary" @click="save()">{{ trans('components.code_save') }}</button>
</div> </div>
</div> </div>

View File

@ -4,7 +4,7 @@ $value
$checked $checked
$label $label
--}} --}}
<label class="toggle-switch @if($errors->has($name)) neg @endif"> <label class="toggle-switch @if($errors->has($name)) text-neg @endif">
<input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif> <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif>
<span class="custom-checkbox text-primary">@icon('check')</span> <span class="custom-checkbox text-primary">@icon('check')</span>
<span class="label">{{$label}}</span> <span class="label">{{$label}}</span>

View File

@ -3,11 +3,11 @@
<div class="popup-body small"> <div class="popup-body small">
<div class="popup-header primary-background"> <div class="popup-header primary-background">
<div class="popup-title">{{ trans('entities.entity_select') }}</div> <div class="popup-title">{{ trans('entities.entity_select') }}</div>
<button type="button" class="corner-button neg button overlay-close">x</button> <button type="button" class="popup-header-close">x</button>
</div> </div>
@include('components.entity-selector', ['name' => 'entity-selector']) @include('components.entity-selector', ['name' => 'entity-selector'])
<div class="popup-footer"> <div class="popup-footer">
<button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">{{ trans('common.select') }}</button> <button type="button" disabled="true" class="button entity-link-selector-confirm primary corner-button">{{ trans('common.select') }}</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -4,7 +4,7 @@
<div class="popup-header primary-background"> <div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.image_select') }}</div> <div class="popup-title">{{ trans('components.image_select') }}</div>
<button class="overlay-close neg corner-button button" @click="hide()">x</button> <button class="popup-header-close" @click="hide()">x</button>
</div> </div>
<div class="flex-fill image-manager-body"> <div class="flex-fill image-manager-body">

View File

@ -7,11 +7,11 @@
<div class="text-center"> <div class="text-center">
<button class="button outline small" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button> <button class="button outline small" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
<br> <br>
<button class="text-button muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button> <button class="text-button text-muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
@if ($showRemove) @if ($showRemove)
<span class="sep">|</span> <span class="sep">|</span>
<button class="text-button muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button> <button class="text-button text-muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
@endif @endif
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div id="tag-manager" entity-id="{{ isset($entity) ? $entity->id : 0 }}" entity-type="{{ $entity ? $entity->getType() : $entityType }}"> <div id="tag-manager" entity-id="{{ isset($entity) ? $entity->id : 0 }}" entity-type="{{ $entity ? $entity->getType() : $entityType }}">
<div class="tags"> <div class="tags">
<p class="muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p> <p class="text-muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
<draggable :options="{handle: '.handle'}" :list="tags" element="div"> <draggable :options="{handle: '.handle'}" :list="tags" element="div">

View File

@ -1,5 +0,0 @@
<form action="{{$url}}" method="POST" class="inline">
{{ csrf_field() }}
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="button neg">{{ isset($text) ? $text : trans('common.delete') }}</button>
</form>

View File

@ -1,5 +1,5 @@
<input type="password" id="{{ $name }}" name="{{ $name }}" <input type="password" id="{{ $name }}" name="{{ $name }}"
@if($errors->has($name)) class="neg" @endif @if($errors->has($name)) class="text-neg" @endif
@if(isset($placeholder)) placeholder="{{$placeholder}}" @endif @if(isset($placeholder)) placeholder="{{$placeholder}}" @endif
@if(isset($tabindex)) tabindex="{{$tabindex}}" @endif @if(isset($tabindex)) tabindex="{{$tabindex}}" @endif
@if(old($name)) value="{{ old($name)}}" @endif> @if(old($name)) value="{{ old($name)}}" @endif>

View File

@ -2,7 +2,7 @@
<select id="{{ $name }}" name="{{ $name }}"> <select id="{{ $name }}" name="{{ $name }}">
@foreach($options as $option) @foreach($options as $option)
<option value="{{$option->id}}" <option value="{{$option->id}}"
@if($errors->has($name)) class="neg" @endif @if($errors->has($name)) class="text-neg" @endif
@if(isset($model) || old($name)) @if(old($name) && old($name) === $option->id) selected @elseif(isset($model) && $model->role->id === $option->id) selected @endif @endif @if(isset($model) || old($name)) @if(old($name) && old($name) === $option->id) selected @elseif(isset($model) && $model->role->id === $option->id) selected @endif @endif
> >
{{ $option->display_name }} {{ $option->display_name }}

View File

@ -1,5 +1,5 @@
<input type="text" id="{{ $name }}" name="{{ $name }}" <input type="text" id="{{ $name }}" name="{{ $name }}"
@if($errors->has($name)) class="neg" @endif @if($errors->has($name)) class="text-neg" @endif
@if(isset($placeholder)) placeholder="{{$placeholder}}" @endif @if(isset($placeholder)) placeholder="{{$placeholder}}" @endif
@if(isset($tabindex)) tabindex="{{$tabindex}}" @endif @if(isset($tabindex)) tabindex="{{$tabindex}}" @endif
@if(isset($model) || old($name)) value="{{ old($name) ? old($name) : $model->$name}}" @endif> @if(isset($model) || old($name)) value="{{ old($name) ? old($name) : $model->$name}}" @endif>

View File

@ -1,5 +1,5 @@
<textarea id="{{ $name }}" name="{{ $name }}" rows="5" <textarea id="{{ $name }}" name="{{ $name }}" rows="5"
@if($errors->has($name)) class="neg" @endif>@if(isset($model) || old($name)){{ old($name) ? old($name) : $model->$name}}@endif</textarea> @if($errors->has($name)) class="text-neg" @endif>@if(isset($model) || old($name)){{ old($name) ? old($name) : $model->$name}}@endif</textarea>
@if($errors->has($name)) @if($errors->has($name))
<div class="text-neg text-small">{{ $errors->first($name) }}</div> <div class="text-neg text-small">{{ $errors->first($name) }}</div>
@endif @endif

View File

@ -22,7 +22,7 @@
<div class="px-l files"> <div class="px-l files">
<div id="file-list" v-show="!fileToEdit"> <div id="file-list" v-show="!fileToEdit">
<p class="muted small">{{ trans('entities.attachments_explain') }} <span class="secondary">{{ trans('entities.attachments_explain_instant_save') }}</span></p> <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
<div class="tab-container"> <div class="tab-container">
<div class="nav-tabs"> <div class="nav-tabs">
@ -37,7 +37,7 @@
<div class="py-s"> <div class="py-s">
<a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a> <a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a>
<div v-if="file.deleting"> <div v-if="file.deleting">
<span class="neg small">{{ trans('entities.attachments_delete_confirm') }}</span> <span class="text-neg small">{{ trans('entities.attachments_delete_confirm') }}</span>
<br> <br>
<span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span> <span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
</div> </div>
@ -46,7 +46,7 @@
<div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div> <div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div>
</div> </div>
</draggable> </draggable>
<p class="small muted" v-if="files.length === 0"> <p class="small text-muted" v-if="files.length === 0">
{{ trans('entities.attachments_no_files') }} {{ trans('entities.attachments_no_files') }}
</p> </p>
</div> </div>
@ -54,16 +54,16 @@
<dropzone placeholder="{{ trans('entities.attachments_dropzone') }}" :upload-url="getUploadUrl()" :uploaded-to="pageId" @success="uploadSuccess"></dropzone> <dropzone placeholder="{{ trans('entities.attachments_dropzone') }}" :upload-url="getUploadUrl()" :uploaded-to="pageId" @success="uploadSuccess"></dropzone>
</div> </div>
<div v-show="tab === 'link'" @keypress.enter.prevent="attachNewLink(file)"> <div v-show="tab === 'link'" @keypress.enter.prevent="attachNewLink(file)">
<p class="muted small">{{ trans('entities.attachments_explain_link') }}</p> <p class="text-muted small">{{ trans('entities.attachments_explain_link') }}</p>
<div class="form-group"> <div class="form-group">
<label for="attachment-via-link">{{ trans('entities.attachments_link_name') }}</label> <label for="attachment-via-link">{{ trans('entities.attachments_link_name') }}</label>
<input type="text" placeholder="{{ trans('entities.attachments_link_name') }}" v-model="file.name"> <input type="text" placeholder="{{ trans('entities.attachments_link_name') }}" v-model="file.name">
<p class="small neg" v-for="error in errors.link.name" v-text="error"></p> <p class="small text-neg" v-for="error in errors.link.name" v-text="error"></p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="attachment-via-link">{{ trans('entities.attachments_link_url') }}</label> <label for="attachment-via-link">{{ trans('entities.attachments_link_url') }}</label>
<input type="text" placeholder="{{ trans('entities.attachments_link_url_hint') }}" v-model="file.link"> <input type="text" placeholder="{{ trans('entities.attachments_link_url_hint') }}" v-model="file.link">
<p class="small neg" v-for="error in errors.link.link" v-text="error"></p> <p class="small text-neg" v-for="error in errors.link.link" v-text="error"></p>
</div> </div>
<button @click.prevent="attachNewLink(file)" class="button primary">{{ trans('entities.attach') }}</button> <button @click.prevent="attachNewLink(file)" class="button primary">{{ trans('entities.attach') }}</button>
@ -78,7 +78,7 @@
<div class="form-group"> <div class="form-group">
<label for="attachment-name-edit">{{ trans('entities.attachments_edit_file_name') }}</label> <label for="attachment-name-edit">{{ trans('entities.attachments_edit_file_name') }}</label>
<input type="text" id="attachment-name-edit" placeholder="{{ trans('entities.attachments_edit_file_name') }}" v-model="fileToEdit.name"> <input type="text" id="attachment-name-edit" placeholder="{{ trans('entities.attachments_edit_file_name') }}" v-model="fileToEdit.name">
<p class="small neg" v-for="error in errors.edit.name" v-text="error"></p> <p class="small text-neg" v-for="error in errors.edit.name" v-text="error"></p>
</div> </div>
<div class="tab-container"> <div class="tab-container">
@ -94,7 +94,7 @@
<div class="form-group"> <div class="form-group">
<label for="attachment-link-edit">{{ trans('entities.attachments_link_url') }}</label> <label for="attachment-link-edit">{{ trans('entities.attachments_link_url') }}</label>
<input type="text" id="attachment-link-edit" placeholder="{{ trans('entities.attachment_link') }}" v-model="fileToEdit.link"> <input type="text" id="attachment-link-edit" placeholder="{{ trans('entities.attachment_link') }}" v-model="fileToEdit.link">
<p class="small neg" v-for="error in errors.edit.link" v-text="error"></p> <p class="small text-neg" v-for="error in errors.edit.link" v-text="error"></p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -48,7 +48,7 @@
</ul> </ul>
</div> </div>
<button type="submit" id="save-button" class="text-button text-pos">@icon('save'){{ trans('entities.pages_save') }}</button> <button type="submit" id="save-button" class="text-button text-pos-hover">@icon('save'){{ trans('entities.pages_save') }}</button>
</div> </div>
</div> </div>
</div> </div>
@ -67,7 +67,7 @@
@if(setting('app-editor') === 'wysiwyg') @if(setting('app-editor') === 'wysiwyg')
<div wysiwyg-editor class="flex-fill flex"> <div wysiwyg-editor class="flex-fill flex">
<textarea id="html-editor" name="html" rows="5" v-pre <textarea id="html-editor" name="html" rows="5" v-pre
@if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea> @if($errors->has('html')) class="text-neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
</div> </div>
@if($errors->has('html')) @if($errors->has('html'))
@ -95,7 +95,7 @@
<div markdown-input class="flex flex-fill"> <div markdown-input class="flex flex-fill">
<textarea id="markdown-editor-input" name="markdown" rows="5" <textarea id="markdown-editor-input" name="markdown" rows="5"
@if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea> @if($errors->has('markdown')) class="text-neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
</div> </div>
</div> </div>

View File

@ -1,5 +1,7 @@
@extends('base') @extends('base')
{{--TODO - Check design of this view--}}
@section('content') @section('content')
<div class="container small"> <div class="container small">
@ -14,8 +16,8 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<a href="{{ $parent->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a> <a href="{{ $parent->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
<button type="submit" class="button pos">{{ trans('common.continue') }}</button> <button type="submit" class="button primary">{{ trans('common.continue') }}</button>
</div> </div>
</form> </form>

View File

@ -60,7 +60,7 @@
<form action="{{ $revision->getUrl('/delete/') }}" method="POST"> <form action="{{ $revision->getUrl('/delete/') }}" method="POST">
{!! csrf_field() !!} {!! csrf_field() !!}
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_method" value="DELETE">
<button type="submit" class="text-button neg">@icon('delete'){{ trans('common.delete') }}</button> <button type="submit" class="text-button text-neg">@icon('delete'){{ trans('common.delete') }}</button>
</form> </form>
</li> </li>
</ul> </ul>

View File

@ -1,22 +1,19 @@
<style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}"> <style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
header, [back-to-top], .primary-background { .primary-background {
background-color: {{ setting('app-color') }} !important; background-color: {{ setting('app-color') }} !important;
} }
.primary-background-light { .primary-background-light {
background-color: {{ setting('app-color-light') }}; background-color: {{ setting('app-color-light') }};
} }
.button-base, .button, input[type="button"], input[type="submit"] { .button.primary, .button.primary:hover, .button.primary:active, .button.primary:focus {
background-color: {{ setting('app-color') }}; background-color: {{ setting('app-color') }};
border-color: {{ setting('app-color') }}; border-color: {{ setting('app-color') }};
} }
.button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:focus {
background-color: {{ setting('app-color') }};
}
.nav-tabs a.selected, .nav-tabs .tab-item.selected { .nav-tabs a.selected, .nav-tabs .tab-item.selected {
border-bottom-color: {{ setting('app-color') }}; border-bottom-color: {{ setting('app-color') }};
} }
.text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus { .text-primary, .text-primary-hover:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {
color: {{ setting('app-color') }}; color: {{ setting('app-color') }} !important;
fill: {{ setting('app-color') }}; fill: {{ setting('app-color') }} !important;;
} }
</style> </style>

View File

@ -18,7 +18,7 @@
<h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2> <h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2>
<div class="grid half gap-xl"> <div class="grid half gap-xl">
<div> <div>
<p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p> <p class="small text-muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
</div> </div>
<div> <div>
<form method="POST" action="{{ baseUrl('/settings/maintenance/cleanup-images') }}"> <form method="POST" action="{{ baseUrl('/settings/maintenance/cleanup-images') }}">
@ -26,7 +26,7 @@
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_method" value="DELETE">
<div> <div>
@if(session()->has('cleanup-images-warning')) @if(session()->has('cleanup-images-warning'))
<p class="text neg"> <p class="text-neg">
{{ session()->get('cleanup-images-warning') }} {{ session()->get('cleanup-images-warning') }}
</p> </p>
<input type="hidden" name="ignore_revisions" value="{{ session()->getOldInput('ignore_revisions', 'false') }}"> <input type="hidden" name="ignore_revisions" value="{{ session()->getOldInput('ignore_revisions', 'false') }}">

View File

@ -48,7 +48,7 @@
<p>{{ trans('settings.role_asset_desc') }}</p> <p>{{ trans('settings.role_asset_desc') }}</p>
@if (isset($role) && $role->system_name === 'admin') @if (isset($role) && $role->system_name === 'admin')
<p class="text-secondary">{{ trans('settings.role_asset_admins') }}</p> <p class="text-warn">{{ trans('settings.role_asset_admins') }}</p>
@endif @endif
<table class="table toggle-switch-list compact"> <table class="table toggle-switch-list compact">

View File

@ -9,7 +9,7 @@
</div> </div>
</div> </div>
</a> </a>
<div class="entity-shelf-books grid third entity-list-item-children"> <div class="entity-shelf-books grid third gap-y-xs entity-list-item-children">
@foreach($shelf->books as $book) @foreach($shelf->books as $book)
<div> <div>
<a href="{{ $book->getUrl() }}" class="entity-chip text-book"> <a href="{{ $book->getUrl() }}" class="entity-chip text-book">

View File

@ -20,11 +20,12 @@
</div> </div>
@else @else
<p> <p>
{{-- TODO - Empty Shelf State--}}
<hr> <hr>
<span class="text-muted italic">{{ trans('entities.shelves_empty_contents') }}</span> <span class="text-muted italic">{{ trans('entities.shelves_empty_contents') }}</span>
@if(userCan('bookshelf-create', $shelf)) @if(userCan('bookshelf-create', $shelf))
<br/> <br/>
<a href="{{ $shelf->getUrl('/edit') }}" class="button outline bookshelf">{{ trans('entities.shelves_edit_and_assign') }}</a> <a href="{{ $shelf->getUrl('/edit') }}" class="button outline">{{ trans('entities.shelves_edit_and_assign') }}</a>
@endif @endif
</p> </p>
@endif @endif

View File

@ -1,6 +1,6 @@
@if($authMethod === 'system' && $user->system_name == 'public') @if($authMethod === 'system' && $user->system_name == 'public')
<p class="mb-none text-secondary">{{ trans('settings.users_system_public') }}</p> <p class="mb-none text-warn">{{ trans('settings.users_system_public') }}</p>
@endif @endif
<div class="pt-m"> <div class="pt-m">