Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-28 14:04:38 +04:00
Code Issues Projects Releases Wiki Activity

buttons clean

Browse Source
This commit is contained in:
codecalm
2019-12-15 23:22:58 +01:00
parent 2f3ab82323
commit 28b02a31a9
4 changed files with 9 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/navbar.html
+2
View File
@@ -3,6 +3,8 @@
{% if include.menu-layout != 'vertical' %} {% if include.menu-layout != 'vertical' %}
{% include_cached layout/navbar-logo.html class="mr-4" %} {% include_cached layout/navbar-logo.html class="mr-4" %}
{% else %}
{% include_cached layout/navbar-search.html class="mr-4" %}
{% endif %} {% endif %}
<ul class="nav navbar-menu align-items-center ml-auto"> <ul class="nav navbar-menu align-items-center ml-auto">
pages/_includes/layout/page-title-actions.html
+1 -1
View File
@@ -17,7 +17,7 @@
</div> </div>
{% elsif actions == 'buttons' %} {% elsif actions == 'buttons' %}
<span class="d-none d-sm-inline"> <span class="d-none d-sm-inline">
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %} {% include_cached ui/button.html text="New view" color="secondary" icon="home" %}
</span> </span>
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %} {% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% endif %} {% endif %}
pages/_includes/ui/button.html
+1 -1
View File
@@ -3,7 +3,7 @@
{% assign provider = include.provider | default: 'fe' %} {% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %} {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% assign e = include.element | default: 'a' %} {% assign e = include.element | default: 'a' %}
<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}{% if include.icon-only %} btn-icon{% endif %}"> <{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
{% if include.spinner %} {% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %} {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include_cached ui/icon.html icon=include.icon use-svg=true %}{% endif %} {% if include.icon %}{% include_cached ui/icon.html icon=include.icon use-svg=true %}{% endif %}
scss/ui/_buttons.scss
+5 -44
View File
@@ -1,9 +1,10 @@
.btn { .btn {
letter-spacing: .01em;
&:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]):not(.btn-secondary) { &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]):not(.btn-secondary) {
text-shadow: 1px 1px 0 rgba(0, 0, 0, .05); text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
&:not(:focus):not(.focus) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
}
svg.icon { svg.icon {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05)); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
@@ -16,7 +17,7 @@
} }
.icon { .icon {
margin: 0 .5em 0 -.25em; margin: 0 .25em 0 -.25em;
font-size: 1.2em; font-size: 1.2em;
vertical-align: sub; vertical-align: sub;
} }
@@ -117,17 +118,6 @@
} }
} }
.btn-loader {
display: none;
width: 1em;
height: 1em;
color: inherit;
@at-root .btn-loading & {
display: inline-block;
}
}
.btn-options { .btn-options {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -146,32 +136,3 @@
height: 1rem; height: 1rem;
} }
} }
.btn-floating {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 1030;
}
/**
Button with label
*/
.btn-label {
position: relative;
padding-left: px2rem(48px);
}
.btn-label-icon {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: px2rem(36px);
padding-top: px2rem(6px);
padding-bottom: px2rem(6px);
margin-bottom: 0;
line-height: inherit;
cursor: pointer;
background-color: rgba(0, 0, 0, .1);
}