admin/core
1
0
Fork 0
mirror of https://github.com/jbcr/core.git synced 2026-03-31 21:32:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #817 from bolt/fine-tuning-buttons

Browse Source 
Fine-tuning a bunch of button styles
This commit is contained in:
Bob den Otter
2019-12-25 09:11:37 +01:00
committed by GitHub
parent 6a61fabdf1 3c44260904
commit 80e62053e3
10 changed files with 109 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
assets/js/app/editor/Components/File.vue
View File

@@ -36,7 +36,7 @@
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button
class="btn btn-sm btn-secondary"
class="btn btn-sm btn-tertiary"
type="button"
@click="selectUploadFile"
>
@@ -44,33 +44,34 @@
</button>
<button
class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
class="btn btn-sm btn-tertiary dropdown-toggle dropdown-toggle-split"
aria-expanded="false"
aria-haspopup="true"
data-toggle="dropdown"
type="button"
></button>
<button
class="btn btn-sm btn-secondary dropdown-menu dropdown-menu-right"
type="button"
@click="selectServerFile"
>
<i class="fas fa-fw fa-th mr-2 ml-2"></i>
{{ labels.button_from_library }}
</button>
<div class="dropdown-menu">
<button
class="btn dropdown-item"
type="button"
@click="selectServerFile"
>
<i class="fas fa-fw fa-th"></i>
{{ labels.button_from_library }}
</button>
<a
v-if="filenameData"
class="dropdown-item"
:href="attributesLink + '?file=' + filenameData"
target="_blank"
>
<i class="fas fa-fw fa-info-circle"></i>
{{ labels.button_edit_attributes }}
</a>
</div>
</div>
<div v-if="filenameData" class="btn-group mr-2" role="group">
<a
class="btn btn-sm btn-secondary"
:href="attributesLink + '?file=' + filename"
target="_blank"
>
<i class="fas fa-fw fa-info-circle"></i>
{{ labels.button_edit_attributes }}
</a>
</div>
<div v-if="inFilelist == true" class="btn-group mr-2" role="group">
<button
class="btn btn-sm btn-tertiary"

3
assets/js/app/editor/Components/Filelist.vue
View File

@@ -26,7 +26,8 @@
></editor-file>
</div>
<button class="btn btn-secondary" type="button" @click="addFile">
<button class="btn btn-tertiary" type="button" @click="addFile">
<i class="fas fa-fw fa-plus"></i>
{{ labels.add_new_file }}
</button>
</div>

42
assets/js/app/editor/Components/Image.vue
View File

@@ -36,7 +36,7 @@
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button
class="btn btn-sm btn-secondary"
class="btn btn-sm btn-tertiary"
type="button"
@click="selectUploadFile"
>
@@ -44,32 +44,32 @@
</button>
<button
class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
class="btn btn-sm btn-tertiary dropdown-toggle dropdown-toggle-split"
aria-expanded="false"
aria-haspopup="true"
data-toggle="dropdown"
type="button"
></button>
<button
class="btn btn-sm btn-secondary dropdown-menu dropdown-menu-right"
type="button"
@click="selectServerFile"
>
<i class="fas fa-fw fa-th mr-2 ml-2"></i>
{{ labels.button_from_library }}
</button>
</div>
<div v-if="filenameData" class="btn-group mr-2" role="group">
<a
class="btn btn-sm btn-secondary"
:href="attributesLink + '?file=' + filenameData"
target="_blank"
>
<i class="fas fa-fw fa-info-circle"></i>
{{ labels.button_edit_attributes }}
</a>
<div class="dropdown-menu">
<button
class="btn dropdown-item"
type="button"
@click="selectServerFile"
>
<i class="fas fa-fw fa-th"></i>
{{ labels.button_from_library }}
</button>
<a
v-if="filenameData"
class="dropdown-item"
:href="attributesLink + '?file=' + filenameData"
target="_blank"
>
<i class="fas fa-fw fa-info-circle"></i>
{{ labels.button_edit_attributes }}
</a>
</div>
</div>
<div v-if="inImagelist == true" class="btn-group mr-2" role="group">

3
assets/js/app/editor/Components/Imagelist.vue
View File

@@ -28,7 +28,8 @@
></editor-image>
</div>
<button class="btn btn-secondary" type="button" @click="addImage">
<button class="btn btn-tertiary" type="button" @click="addImage">
<i class="fas fa-fw fa-plus"></i>
{{ labels.add_new_image }}
</button>
</div>

1
assets/scss/init/_base.scss
View File

@@ -42,6 +42,7 @@ code {
.card-header {
font-weight: $font-weight-bold;
padding: 0.8125rem 1.25rem;
}
}

4
assets/scss/init/_variables.scss
View File

@@ -37,7 +37,7 @@ $link-color: var(--primary);
$link-hover-color: var(--primary-600);
//buttons
$btn-disabled-opacity: 1;
$btn-disabled-opacity: 0.75;
// Form controls
$border-radius: 0.15rem;
@@ -68,7 +68,7 @@ $btn-padding-x: 0.6rem;
$primary: #1863af;
$secondary: #5da1ac;
$tertiary: #7a9196;
$tertiary: #81969b;
$success: #61a31f;
$info: #17a2b8;
$warning: #ffc107;

50
assets/scss/modules/base/_buttons.scss
View File

@@ -5,3 +5,53 @@
.btn-hidden-danger {
@include button-variant($tertiary, $tertiary, darken($danger, 7.5%), darken($danger, 10%), darken($danger, 10%), darken($danger, 12.5%));
}
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"boltblue": $bolt-blue,
);
@each $color, $value in $theme-colors {
.alert-#{$color} {
background-color: theme-color-level($color, $alert-bg-level) !important;
}
.btn-#{$color} {
@include button-variant($value, $value);
}
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}
//set disabled buttons to grey
.btn {
&.disabled,
&:disabled {
opacity: $btn-disabled-opacity;
@include box-shadow(none);
background: $disabled;
color: darken($disabled, 30%);
border: $btn-border-width solid transparent;
}
}
.btn-link {
&:disabled,
&.disabled {
color: darken($disabled, 30%);
background: transparent;
}
}

53
assets/scss/vendor/bootstrap/_overrides.scss vendored
View File

@@ -1,53 +0,0 @@
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"boltblue": $bolt-blue,
);
@each $color, $value in $theme-colors {
.alert-#{$color} {
background-color: theme-color-level($color, $alert-bg-level) !important;
}
.btn-#{$color} {
@include button-variant($value, $value);
}
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}
//set disabled buttons to grey
.btn {
&.disabled,
&:disabled {
opacity: $btn-disabled-opacity;
@include box-shadow(none);
background: $disabled;
color: darken($disabled, 30%);
border: $btn-border-width solid transparent;
}
}
.btn-link {
&:disabled,
&.disabled {
color: darken($disabled, 30%);
background: transparent;
}
}
.card-header {
padding: 0.8125rem 1.25rem;
}

3
assets/scss/vendor/bootstrap/bootstrap.scss vendored
View File

@@ -28,6 +28,3 @@
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";
// Bolt Bootstrap overrides
@import '_overrides.scss';

18
templates/content/_buttons.html.twig
View File

@@ -23,14 +23,16 @@
data-toggle="dropdown" type="button">
<span class="sr-only">{{ 'buttons.button_toggle'|trans }}</span>
</button>
<button class="btn btn-light dropdown-menu dropdown-menu-right"
form="editcontent"
formaction="{{ path('bolt_content_edit_viewsave', {'id': record.id }) }}"
formtarget="_blank" style="white-space: nowrap; padding-right: 1rem;"
type="submit">
<i class="fas fa-external-link-square-alt mr-2 ml-2"></i>
{{ 'action.view_saved'|trans }}
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="btn"
form="editcontent"
formaction="{{ path('bolt_content_edit_viewsave', {'id': record.id }) }}"
formtarget="_blank" style="white-space: nowrap; padding-right: 1rem;"
type="submit">
<i class="fas fa-external-link-square-alt mr-2 ml-2"></i>
{{ 'action.view_saved'|trans }}
</button>
</div>
{% endif %}
</div>