Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-06 21:00:09 +04:00
Code Issues Projects Releases Wiki Activity

button color fixes

Browse Source
This commit is contained in:
codecalm
2022-10-18 22:42:29 +02:00
parent 1c813dba18
commit f180e0417d
14 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/_docs/buttons.md
View File

@@ -214,7 +214,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
{% include ui/button.html icon="star" color="warning" icon-only=true %}
{% include ui/button.html icon="trash" color="danger" icon-only=true %}
{% include ui/button.html icon="chart-bar" color="purple" icon-only=true %}
{% include ui/button.html icon="git-merge" color="white" icon-only=true %}
{% include ui/button.html icon="git-merge" icon-only=true %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}

2
src/pages/_docs/dropdowns.md
View File

@@ -116,7 +116,7 @@ Make your dropdown suit the dark mode of your website or software.
Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
{% capture code %}
{% include ui/button.html color="white" text="Button" %}
{% include ui/button.html text="Button" %}
<div class="dropdown{% hide %} show{% endhide %}">
<a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
<div class="dropdown-menu dropdown-menu-card{% hide %} show position-static{% endhide %}" style="max-width: 20rem;">

2
src/pages/_docs/spinners.md
View File

@@ -69,7 +69,7 @@ Use buttons with spinners to notify users that an action they have taken by clic
{% include ui/button.html spinner=true text="Button" color="danger" %}
{% include ui/button.html spinner=true text="Button" color="warning" %}
{% include ui/button.html spinner=true text="Button" color="success" %}
{% include ui/button.html spinner=true text="Button" color="white" %}
{% include ui/button.html spinner=true text="Button" %}
{% endcapture %}
{% include example.html code=code %}

2
src/pages/_includes/cards/profile-timeline.html
View File

@@ -2,7 +2,7 @@
<div class="card-header">
<div class="input-group">
<input type="text" class="form-control" placeholder="Message">
{% include ui/button.html icon="camera" icon-only=true color="white" %}
{% include ui/button.html icon="camera" icon-only=true %}
</div>
</div>
<ul class="list-group card-list-group">

4
src/pages/_includes/cards/sign-in.html
View File

@@ -9,8 +9,8 @@
<div class="card-body">
<div class="row">
<div class="col">{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
<div class="col">{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
<div class="col">{% include ui/button.html block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
<div class="col">{% include ui/button.html block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
</div>
</div>
</div>

2
src/pages/_includes/forms/form-elements-4.html
View File

@@ -43,7 +43,7 @@
<div class="btn-group w-100">
{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
{% for icon in icons %}
{% include ui/button.html color="white" icon=icon icon-only=true %}
{% include ui/button.html icon=icon icon-only=true %}
{% endfor %}
</div>
</div>

4
src/pages/_includes/forms/form-elements-6.html
View File

@@ -23,10 +23,10 @@
<label class="form-label">Form buttons</label>
<div class="row">
<div class="col">
{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
{% include ui/button.html block=true icon="brand-github" icon-color="github" text="Login with Github" %}
</div>
<div class="col">
{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
{% include ui/button.html block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
</div>
</div>
</div>

2
src/pages/_includes/layout/header-actions/buttons.html
View File

@@ -3,7 +3,7 @@
{% if page.layout-navbar-overlap and page.layout-navbar-dark %}
{% include ui/button.html text="New view" color="dark" %}
{% else %}
{% include ui/button.html text="New view" color="white" %}
{% include ui/button.html text="New view" %}
{% endif %}
</span>
{% include ui/button.html icon="plus" text="Create new report" color="primary" class="d-none d-sm-inline-block" modal-id="report" %}

2
src/pages/_includes/parts/form/input-icon-separated.html
View File

@@ -5,7 +5,7 @@
<input type="text" class="form-control" placeholder="Search for…">
</div>
<div class="col-auto">
{% include ui/button.html icon="search" icon-only=true color="white" %}
{% include ui/button.html icon="search" icon-only=true %}
</div>
</div>
</div>

9
src/scss/_variables.scss
View File

@@ -270,6 +270,7 @@ $dark-mode-darken: darken($dark, 2%) !default;
$dark-mode-lighten: lighten($dark, 2%) !default;
$dark-mode-border-color: lighten($dark, 4%) !default;
$dark-mode-border-color-light: lighten($dark, 4%) !default;
$dark-mode-border-color-active: lighten($dark, 12%) !default;
$dark-mode-text: $light;
// Borders
@@ -461,6 +462,7 @@ $input-color: inherit !default;
$input-focus-color: inherit !default;
// Buttons
$btn-disabled-opacity: .4 !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
$btn-border-radius: var(--#{$prefix}border-radius) !default;
@@ -557,8 +559,9 @@ $modal-backdrop-blur: 4px !default;
$modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-color: transparent !default;
$modal-content-bg: $gray-50 !default;
$modal-content-border-radius: var(--#{$prefix}border-radius) !default;
$modal-content-bg: var(--#{$prefix}bg-surface) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
$modal-header-padding: 1.5rem !default;
$modal-header-height: 3.5rem !default;
@@ -789,7 +792,7 @@ $payment-sizes: $avatar-sizes !default;
// Offcanvas
$offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;
$offcanvas-border-color: var(--#{$prefix}border-color) !default;
// Placeholder
$placeholder-opacity-min: .1 !default;

7
src/scss/layout/_dark.scss
View File

@@ -33,6 +33,7 @@ body:not(.theme-dark) .hide-theme-light {
--#{$prefix}border-color: #{$dark-mode-border-color};
--#{$prefix}border-color-light: #{$dark-mode-border-color-light};
--#{$prefix}border-color-active: #{$dark-mode-border-color-active};
--#{$prefix}btn-color: #{$dark-mode-darken};
@@ -87,12 +88,6 @@ body:not(.theme-dark) .hide-theme-light {
color: inherit;
}
.btn-white,
.form-file-button {
//@include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
background-image: none;
}
.form-check-input:not(:checked),
.form-select,
.form-file-text,

1
src/scss/layout/_root.scss
View File

@@ -17,6 +17,7 @@
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-light: #{$border-color-light};
--#{$prefix}border-color-active: #{$border-color-active};
--#{$prefix}icon-color: #{$icon-color};

1
src/scss/mixins/_mixins.scss
View File

@@ -86,6 +86,7 @@
$active-color: color-contrast($active-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};

19
src/scss/ui/_buttons.scss
View File

@@ -3,8 +3,11 @@
//
.btn {
--#{$prefix}btn-icon-size: #{$icon-size};
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-color: var(--#{$prefix}body-color);
--#{$prefix}btn-border-color: var(--#{$prefix}border-color);
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
display: inline-flex;
@@ -56,11 +59,6 @@
//
// Button color variations
//
.btn-white {
--#{$prefix}btn-bg: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
--#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg-hover, var(--#{$prefix}bg-surface));
}
@each $color, $value in $theme-colors {
.btn-#{$color} {
--#{$prefix}btn-border-color: transparent;
@@ -72,15 +70,22 @@
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
--#{$prefix}btn-disabled-bg: rgba(var(--#{$prefix}#{$color}-rgb), .5);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button), var(--#{$prefix}shadow-button-inset);
}
.btn-outline-#{$color} {
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
}
}