elem.addEventListener('click', event => {
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++) {
closeButtons[i].addEventListener('click', this.hide.bind(this));
}
}
}
-.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 {
0% {
transform: translate3d(0, 0, 0);
animation-duration: 180ms;
animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
-}
-
-.selectFade {
- transition: background-color ease-in-out 3000ms;
}
\ No newline at end of file
-/*
-* This file contains styling for custom block formats.
-*/
-
/**
* Callouts
*/
-
.callout {
border-left: 3px solid #BBB;
background-color: #EEE;
}
}
+/**
+ * Card-style blocks
+ */
+
.card {
background-color: #FFF;
box-shadow: $bs-card;
border-radius: 3px;
border: 1px solid transparent;
h3 {
- padding: $-m;
- padding-bottom: $-xs;
+ padding: $-m $-m $-xs;
margin: 0;
font-size: $fs-m;
color: #222;
}
}
-.sidebar .card {
- .body, .empty-text {
- padding: $-s $-m;
- }
- h3 + .body {
- padding-top: $-xs;
- }
-}
-
.card.drag-card {
border: 1px solid #DDD;
border-radius: 4px;
display: flex;
- padding: 0;
- padding-left: $-s + 28px;
+ padding: 0 0 0 ($-s + 28px);
margin: $-s 0;
position: relative;
.drag-card-action {
}
.handle, .drag-card-action {
display: flex;
- padding: 0;
align-items: center;
text-align: center;
justify-content: center;
width: 28px;
flex-grow: 0;
- padding-left: $-xs;
- padding-right: $-xs;
+ padding: 0 $-xs;
&:hover {
background-color: #EEE;
}
}
}
-.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 {
display: flex;
flex-direction: column;
.content-wrap.card {
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;
}
\ No newline at end of file
+button {
+ font-size: 100%;
+}
@mixin generate-button-colors($textColor, $backgroundColor) {
background-color: $backgroundColor;
color: $textColor;
fill: $textColor;
- text-transform: uppercase;
border: 1px solid $backgroundColor;
- vertical-align: top;
&:hover {
background-color: lighten($backgroundColor, 8%);
- //box-shadow: $bs-med;
- text-decoration: none;
color: $textColor;
}
&:active {
&:focus {
background-color: lighten($backgroundColor, 4%);
box-shadow: $bs-light;
- text-decoration: none;
color: $textColor;
}
}
// Button Specific Variables
$button-border-radius: 2px;
-.button-base {
+.button {
text-decoration: none;
font-size: 0.85rem;
line-height: 1.4em;
margin-top: $-xs;
margin-bottom: $-xs;
display: inline-block;
- border: none;
font-weight: 400;
outline: 0;
border-radius: $button-border-radius;
cursor: pointer;
- transition: all ease-in-out 120ms;
- box-shadow: 0;
- @include generate-button-colors(#EEE, $primary);
-}
-
-.button, input[type="button"], input[type="submit"] {
- @extend .button-base;
- &.pos {
- @include generate-button-colors(#EEE, $positive);
- }
- &.neg {
- @include generate-button-colors(#EEE, $negative);
- }
- &.secondary {
- @include generate-button-colors(#EEE, $secondary);
+ transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
+ box-shadow: none;
+ background-color: $primary;
+ color: #FFF;
+ fill: #FFF;
+ text-transform: uppercase;
+ border: 1px solid $primary;
+ vertical-align: top;
+ &:hover, &:focus {
+ text-decoration: none;
}
- &.muted {
- @include generate-button-colors(#EEE, #AAA);
+ &:active {
+ background-color: darken($primary, 8%);
}
}
-
-.button + .button {
- margin-left: $-s;
-}
-
-.button.small {
- font-size: 0.75rem;
- padding: $-xs*1.2 $-s;
+.button.primary {
+ @include generate-button-colors(#FFFFFF, $primary);
}
-
.button.outline {
background-color: transparent;
color: #888;
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;
- }
- }
+}
+
+.button + .button {
+ margin-left: $-s;
+}
+
+.button.small {
+ font-size: 0.75rem;
+ padding: $-xs*1.2 $-s;
}
.text-button {
- @extend .link;
+ cursor: pointer;
background-color: transparent;
padding: 0;
margin: 0;
border: none;
user-select: none;
font-size: 0.75rem;
+ line-height: 1.4em;
&:focus, &:active {
outline: 0;
}
&:hover {
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 {
width: 100%;
- text-align: center;
+ text-align: left;
display: block;
- &.text-left {
- text-align: left;
- }
}
.button.icon {
width: 24px;
height: 24px;
}
- padding: $-s $-m;
- padding-bottom: $-s - 2px;
- padding-left: $-m*2 + 24px;
+ padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
}
.button[disabled] {
+
/*
- * Text colors
+ * Status text colors
*/
-p.pos, p .pos, span.pos, .text-pos {
- color: $positive;
- fill: $positive;
- &:hover {
- color: $positive;
- fill: $positive;
- }
+.text-pos, .text-pos:hover, .text-pos-hover:hover {
+ color: $positive !important;
+ fill: $positive !important;
}
-p.neg, p .neg, span.neg, .text-neg {
- color: $negative;
- fill: $negative;
- &:hover {
- color: $negative;
- fill: $negative;
- }
+.text-warn, .text-warn:hover, .text-warn-hover:hover {
+ color: $warning !important;
+ fill: $warning !important;
}
-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%);
- }
+.text-neg, .text-neg:hover, .text-neg-hover:hover {
+ color: $negative !important;
+ fill: $negative !important;
}
-p.primary, p .primary, span.primary, .text-primary {
- color: $primary;
- fill: $primary;
- &:hover {
- color: $primary;
- fill: $primary;
- }
+/*
+ * Style text colors
+ */
+.text-primary, .text-primary:hover, .text-primary-hover:hover {
+ color: $primary !important;
+ fill: $primary !important;
}
-p.secondary, p .secondary, span.secondary, .text-secondary {
- color: $secondary;
- fill: $secondary;
- &:hover {
- color: $secondary;
- fill: $secondary;
+.text-muted {
+ color: lighten($text-dark, 26%) !important;
+ fill: lighten($text-dark, 26%) !important;
+ &.small, .small {
+ color: lighten($text-dark, 32%) !important;
+ fill: lighten($text-dark, 32%) !important;
}
}
-.text-bookshelf {
+/*
+ * Entity text colors
+ */
+.text-bookshelf, .text-bookshelf:hover {
color: $color-bookshelf;
fill: $color-bookshelf;
- &:hover {
- color: $color-bookshelf;
- fill: $color-bookshelf;
- }
}
-.text-book {
+.text-book, .text-book:hover {
color: $color-book;
fill: $color-book;
- &:hover {
- color: $color-book;
- fill: $color-book;
- }
}
-.text-page {
+.text-page, .text-page:hover {
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 {
+.text-page.draft, .text-page.draft:hover {
+ color: $color-page-draft;
+ fill: $color-page-draft;
+}
+.text-chapter, .text-chapter:hover {
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;
}
+/*
+ * Entity background colors
+ */
.bg-book {
background-color: $color-book;
}
}
}
-.corner-button {
+.popup-footer button, .popup-header-close {
position: absolute;
top: 0;
right: 0;
height: 40px;
border-radius: 0;
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 {
padding: 8px $-m;
}
}
+.popup-footer {
+ margin-top: 1px;
+}
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 444px;
min-height: 444px;
color: #444;
-webkit-font-smoothing: antialiased;
background-color: #F2F2F2;
-}
-
-button {
- font-size: 100%;
}
\ No newline at end of file
&.right-focus {
grid-template-columns: 1fr 3fr;
}
+ &.gap-y-xs {
+ grid-row-gap: $-xs;
+ }
&.gap-xl {
grid-column-gap: $-xl;
grid-row-gap: $-xl;
@mixin between($min, $max) {
@media screen and (min-width: $min) and (max-width: $max) { @content; }
}
-@mixin clearfix() {
- &:after {
- display: block;
- content: '';
- font-size: 0;
- clear: both;
- position: relative;
- }
-}
/*
* Link styling
*/
-a, .link {
+a {
color: $primary;
cursor: pointer;
text-decoration: none;
<hr class="my-l">
@foreach($socialDrivers as $driver => $name)
<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)
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
</a>
<div class="card content-wrap auto-height">
<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">
{!! csrf_field() !!}
<hr class="my-l">
@foreach($socialDrivers as $driver => $name)
<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)
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
</a>
@yield('content')
</section>
- <div back-to-top>
+ <div back-to-top class="primary-background">
<div class="inner">
@icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span>
</div>
@endforeach
</div>
@else
- <div class="well">
- {{--TODO--}}
+ <div>
+ {{--TODO - Empty States --}}
<p class="text-muted italic">{{ trans('entities.books_empty_contents') }}</p>
@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
@if(userCan('page-create', $book) && userCan('chapter-create', $book))
<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>
@endif
@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
</div>
@endif
@endforeach
</div>
@else
- {{--TODO--}}
- <div v-pre class="well">
+ {{--TODO - Empty States --}}
+ <div v-pre>
<p class="text-muted italic">{{ trans('entities.chapters_empty') }}</p>
<p>
@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
@if(userCan('page-create', $chapter) && userCan('book-update', $book))
<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>
@endif
@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
</p>
</div>
<div dropdown class="dropdown-container">
<button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
<ul>
- <li class="px-l"><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 class="px-m"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
+ <li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
</ul>
</div>
@endif
</div>
<div class="form-group text-right">
<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 class="form-group loading" style="display: none;">
@include('partials.loading-icon', ['text' => trans('entities.comment_saving')])
</div>
<div class="form-group text-right">
<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 class="form-group loading" style="display: none;">
@include('partials.loading-icon', ['text' => trans('entities.comment_saving')])
-<header id="header" header-mobile-toggle>
+<header id="header" header-mobile-toggle class="primary-background">
<div class="grid mx-l">
<div>
<div class="popup-header primary-background">
<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 class="p-l popup-content">
</div>
<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>
$checked
$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>
<span class="custom-checkbox text-primary">@icon('check')</span>
<span class="label">{{$label}}</span>
<div class="popup-body small">
<div class="popup-header primary-background">
<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>
@include('components.entity-selector', ['name' => 'entity-selector'])
<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 class="popup-header primary-background">
<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 class="flex-fill image-manager-body">
<div class="text-center">
<button class="button outline small" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
<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)
<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
</div>
</div>
<div id="tag-manager" entity-id="{{ isset($entity) ? $entity->id : 0 }}" entity-type="{{ $entity ? $entity->getType() : $entityType }}">
<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">
+++ /dev/null
-<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>
\ No newline at end of file
<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($tabindex)) tabindex="{{$tabindex}}" @endif
@if(old($name)) value="{{ old($name)}}" @endif>
<select id="{{ $name }}" name="{{ $name }}">
@foreach($options as $option)
<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
>
{{ $option->display_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($tabindex)) tabindex="{{$tabindex}}" @endif
@if(isset($model) || old($name)) value="{{ old($name) ? old($name) : $model->$name}}" @endif>
<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))
<div class="text-neg text-small">{{ $errors->first($name) }}</div>
@endif
\ No newline at end of file
<div class="px-l files">
<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="nav-tabs">
<div class="py-s">
<a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a>
<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>
<span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
</div>
<div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div>
</div>
</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') }}
</p>
</div>
<dropzone placeholder="{{ trans('entities.attachments_dropzone') }}" :upload-url="getUploadUrl()" :uploaded-to="pageId" @success="uploadSuccess"></dropzone>
</div>
<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">
<label for="attachment-via-link">{{ trans('entities.attachments_link_name') }}</label>
<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 class="form-group">
<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">
- <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>
<button @click.prevent="attachNewLink(file)" class="button primary">{{ trans('entities.attach') }}</button>
<div class="form-group">
<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">
- <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 class="tab-container">
<div class="form-group">
<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">
- <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>
</ul>
</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>
@if(setting('app-editor') === 'wysiwyg')
<div wysiwyg-editor class="flex-fill flex">
<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>
@if($errors->has('html'))
<div markdown-input class="flex flex-fill">
<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>
@extends('base')
+{{--TODO - Check design of this view--}}
+
@section('content')
<div class="container small">
</div>
<div class="form-group">
- <a href="{{ $parent->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
- <button type="submit" class="button pos">{{ trans('common.continue') }}</button>
+ <a href="{{ $parent->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+ <button type="submit" class="button primary">{{ trans('common.continue') }}</button>
</div>
</form>
<form action="{{ $revision->getUrl('/delete/') }}" method="POST">
{!! csrf_field() !!}
<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>
</li>
</ul>
<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;
}
.primary-background-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') }};
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 {
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 {
- color: {{ setting('app-color') }};
- fill: {{ setting('app-color') }};
+ .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') }} !important;
+ fill: {{ setting('app-color') }} !important;;
}
</style>
<h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2>
<div class="grid half gap-xl">
<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>
<form method="POST" action="{{ baseUrl('/settings/maintenance/cleanup-images') }}">
<input type="hidden" name="_method" value="DELETE">
<div>
@if(session()->has('cleanup-images-warning'))
- <p class="text neg">
+ <p class="text-neg">
{{ session()->get('cleanup-images-warning') }}
</p>
<input type="hidden" name="ignore_revisions" value="{{ session()->getOldInput('ignore_revisions', 'false') }}">
<p>{{ trans('settings.role_asset_desc') }}</p>
@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
<table class="table toggle-switch-list compact">
</div>
</div>
</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)
<div>
<a href="{{ $book->getUrl() }}" class="entity-chip text-book">
</div>
@else
<p>
+ {{-- TODO - Empty Shelf State--}}
<hr>
<span class="text-muted italic">{{ trans('entities.shelves_empty_contents') }}</span>
@if(userCan('bookshelf-create', $shelf))
<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
</p>
@endif
@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
<div class="pt-m">
projects / bookstack / commitdiff