Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-24 03:54:42 +04:00
Code Issues Projects Releases Wiki Activity

btn-secondary => btn-white #566

Browse Source
This commit is contained in:
codecalm
2020-04-18 16:59:31 +02:00
parent 423733a05e
commit 2b43bce996
27 changed files with 88 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/buttons.md
+33 -33
View File
@@ -120,13 +120,13 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
{% capture code %}
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-white btn-lg">Large button</button>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
{% capture code %}
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
<button type="button" class="btn btn-white btn-sm">Small button</button>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
@@ -134,7 +134,7 @@ You can also add the `.btn-block` class to create block level buttons which span
{% capture code %}
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
<button type="button" class="btn btn-white btn-block">Block level button</button>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
@@ -211,7 +211,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="secondary" icon-only=true %}
{% include ui/button.html icon="git-merge" color="white" icon-only=true %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
@@ -222,21 +222,21 @@ Create a dropdown button that will encourage users to click for more options. Yo
{% capture code %}
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
{% include ui/icon.html icon="calendar" %}
</button>
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
{% include ui/icon.html icon="calendar" %}Show calendar
</button>
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
{% include ui/dropdown-menu.html %}
@@ -271,7 +271,7 @@ Create a list of buttons using the `.btn-list` container to display different ac
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
{% endcapture %}
@@ -281,25 +281,25 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-secondary">One</a>
<a href="#" class="btn btn-secondary">Two</a>
<a href="#" class="btn btn-secondary">Three</a>
<a href="#" class="btn btn-secondary">Four</a>
<a href="#" class="btn btn-secondary">Five</a>
<a href="#" class="btn btn-secondary">Six</a>
<a href="#" class="btn btn-secondary">Seven</a>
<a href="#" class="btn btn-secondary">Eight</a>
<a href="#" class="btn btn-secondary">Nine</a>
<a href="#" class="btn btn-secondary">Ten</a>
<a href="#" class="btn btn-secondary">Eleven</a>
<a href="#" class="btn btn-secondary">Twelve</a>
<a href="#" class="btn btn-secondary">Thirteen</a>
<a href="#" class="btn btn-secondary">Fourteen</a>
<a href="#" class="btn btn-secondary">Fifteen</a>
<a href="#" class="btn btn-secondary">Sixteen</a>
<a href="#" class="btn btn-secondary">Seventeen</a>
<a href="#" class="btn btn-secondary">Eighteen</a>
<a href="#" class="btn btn-secondary">Nineteen</a>
<a href="#" class="btn btn-white">One</a>
<a href="#" class="btn btn-white">Two</a>
<a href="#" class="btn btn-white">Three</a>
<a href="#" class="btn btn-white">Four</a>
<a href="#" class="btn btn-white">Five</a>
<a href="#" class="btn btn-white">Six</a>
<a href="#" class="btn btn-white">Seven</a>
<a href="#" class="btn btn-white">Eight</a>
<a href="#" class="btn btn-white">Nine</a>
<a href="#" class="btn btn-white">Ten</a>
<a href="#" class="btn btn-white">Eleven</a>
<a href="#" class="btn btn-white">Twelve</a>
<a href="#" class="btn btn-white">Thirteen</a>
<a href="#" class="btn btn-white">Fourteen</a>
<a href="#" class="btn btn-white">Fifteen</a>
<a href="#" class="btn btn-white">Sixteen</a>
<a href="#" class="btn btn-white">Seventeen</a>
<a href="#" class="btn btn-white">Eighteen</a>
<a href="#" class="btn btn-white">Nineteen</a>
</div>
{% endcapture %}
{% include example.html code=code %}
@@ -308,7 +308,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list justify-content-center">
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
@@ -316,7 +316,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list justify-content-end">
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
@@ -325,7 +325,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-outline-danger mr-auto">Delete</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
@@ -337,13 +337,13 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
{% capture code %}
<a href="#" class="btn btn-secondary">
<a href="#" class="btn btn-white">
{% include ui/avatar.html person-id="4" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
<a href="#" class="btn btn-white">
{% include ui/avatar.html person-id="5" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
<a href="#" class="btn btn-white">
{% include ui/avatar.html person-id="6" %} Avatar
</a>
{% endcapture %}
pages/_docs/dropdowns.md
+1 -1
View File
@@ -115,7 +115,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="secondary" text="Button" %}
{% include ui/button.html color="white" 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;">
pages/_docs/spinners.md
+1 -1
View File
@@ -70,6 +70,6 @@ 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 color="success" %}
{% include ui/button.html spinner=true color="secondary" %}
{% include ui/button.html spinner=true color="white" %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/tooltips.md
+5 -5
View File
@@ -11,16 +11,16 @@ bootstrap-link: components/tooltips/
Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
{% capture code %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
{% endcapture %}
@@ -32,7 +32,7 @@ Use the default markup to create tooltips that will help users understand partic
If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
{% capture code %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
<button type="button" class="btn btn-white" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
{% endcapture %}
pages/_includes/cards/invoices.html
+1 -1
View File
@@ -61,7 +61,7 @@
<td class="text-right">
<span class="dropdown ml-1">
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
<button class="btn btn-white btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html right=true %}
</span>
</td>
pages/_includes/cards/profile-timeline.html
+1 -1
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="secondary" %}
{% include ui/button.html icon="camera" icon-only=true color="white" %}
</div>
</div>
<ul class="list-group card-list-group">
pages/_includes/cards/sign-in.html
+2 -2
View File
@@ -31,8 +31,8 @@
<div class="card-body">
<div class="btn-list">
{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
</div>
</div>
</form>
pages/_includes/cards/subscribe.html
+1 -1
View File
@@ -18,7 +18,7 @@
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
<a href="#" class="btn btn-sm btn-white d-none d-md-inline-block">
Subscribe
</a>
</div>
pages/_includes/forms/form-elements-1.html
+4 -4
View File
@@ -28,10 +28,10 @@
<label class="form-label">Input group</label>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="Search for…">
<button class="btn btn-secondary" type="button">Go!</button>
<button class="btn btn-white" type="button">Go!</button>
</div>
<div class="input-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
{% include ui/dropdown-menu.html %}
@@ -42,8 +42,8 @@
<label class="form-label">Input group buttons</label>
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn btn-secondary">Action</button>
<button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
<button type="button" class="btn btn-white">Action</button>
<button data-toggle="dropdown" type="button" class="btn btn-white dropdown-toggle dropdown-toggle-split"></button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
pages/_includes/forms/form-elements-4.html
+9 -9
View File
@@ -7,21 +7,21 @@
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">1 min</button>
<button type="button" class="btn btn-secondary active">5 min</button>
<button type="button" class="btn btn-secondary">10 min</button>
<button type="button" class="btn btn-secondary">30 min</button>
<button type="button" class="btn btn-white">1 min</button>
<button type="button" class="btn btn-white active">5 min</button>
<button type="button" class="btn btn-white">10 min</button>
<button type="button" class="btn btn-white">30 min</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">Option 1</button>
<button type="button" class="btn btn-secondary">Option 2</button>
<button type="button" class="btn btn-secondary active">Option 3</button>
<button type="button" class="btn btn-white">Option 1</button>
<button type="button" class="btn btn-white">Option 2</button>
<button type="button" class="btn btn-white active">Option 3</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-right">
@@ -44,7 +44,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="secondary" icon=icon icon-only=true %}
{% include ui/button.html color="white" icon=icon icon-only=true %}
{% endfor %}
</div>
</div>
pages/_includes/forms/form-elements-6.html
+2 -2
View File
@@ -21,8 +21,8 @@
<div class="mb-3">
<label class="form-label">Form buttons</label>
<div class="btn-list">
{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
</div>
</div>
pages/_includes/layout/page-header-actions.html
+1 -1
View File
@@ -24,7 +24,7 @@
</div>
{% elsif actions == 'buttons' %}
<span class="d-none d-sm-inline">
{% include ui/button.html text="New view" color="secondary" %}
{% include ui/button.html text="New view" color="white" %}
</span>
{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" modal-id="report" %}
{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" modal-id="report" %}
pages/_includes/parts/form/input-icon-separated.html
+1 -1
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="secondary" %}
{% include ui/button.html icon="search" icon-only=true color="white" %}
</div>
</div>
</div>
pages/_includes/parts/modals/customize.html
+11 -11
View File
@@ -8,8 +8,8 @@
<div class="form-hint">Light or dark presentation.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
<button class="btn btn-secondary" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
<button class="btn btn-white" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
<button class="btn btn-white" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
</div>
</div>
@@ -22,9 +22,9 @@
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
<button class="btn btn-white" data-theme-toggle="navbar-position:horizontal">Topnav</button>
<button class="btn btn-white" data-theme-toggle="navbar-position:vertical">Sidenav</button>
<button class="btn btn-white" data-theme-toggle="navbar-position:both">Both</button>
</div>
</div>
@@ -33,8 +33,8 @@
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
<button class="btn btn-white" data-theme-toggle="navbar-size:wide">Wide</button>
<button class="btn btn-white" data-theme-toggle="navbar-size:narrow">Narrow</button>
</div>
</div>
@@ -43,8 +43,8 @@
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
<button class="btn btn-white" data-theme-toggle="navbar-side:left">Left</button>
<button class="btn btn-white" data-theme-toggle="navbar-side:right">Right</button>
</div>
</div>
@@ -53,8 +53,8 @@
<div class="form-hint">Light or dark version of the sidebar </div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
<button class="btn btn-white" data-theme-toggle="navbar-color:light">Light</button>
<button class="btn btn-white" data-theme-toggle="navbar-color:dark">Dark</button>
</div>
</div>
</div>
pages/_includes/parts/modals/info.html
+1 -1
View File
@@ -9,5 +9,5 @@
<div class="modal-footer">
{% include ui/button.html color="primary" dismiss=true text="View invoice" block=true %}
{% include ui/button.html color="secondary" dismiss=true text="Go to dashboard" block=true %}
{% include ui/button.html color="white" dismiss=true text="Go to dashboard" block=true %}
</div>
pages/_includes/parts/modals/team.html
+1 -1
View File
@@ -19,6 +19,6 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-white mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Add Team</button>
</div>
pages/_includes/ui/alert.html
+1 -1
View File
@@ -9,7 +9,7 @@
{% if include.buttons %}
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Cancel</a>
<a href="#" class="btn btn-white">Cancel</a>
</div>
{% endif %}
pages/_includes/ui/button.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% removeemptylines %}
{% assign spinner-class = false %}
{% assign color = include.color | default: 'secondary' %}
{% assign color = include.color | default: 'white' %}
{% if include.color == false %}
{% assign color = null %}
{% endif %}
pages/_includes/ui/modal/footer.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="modal-footer">
<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-white mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
pages/_includes/ui/table.html
+1 -1
View File
@@ -68,7 +68,7 @@
<div class="btn-list flex-nowrap">
{% include ui/button.html text="Edit" %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
<button class="btn btn-white dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
pages/_layouts/component.html
+1 -1
View File
@@ -55,7 +55,7 @@ og-component: true
</div>
<div class="row">
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="white" block=true class="mt-4" %}</div>
<div class="col">
<form action="https://codepen.io/pen/define" method="post" target="_blank">
<input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
pages/email.html
+2 -2
View File
@@ -33,7 +33,7 @@ page-header: Crypto currencies
</div>
<div class="mt-4">
<a href="#" class="btn btn-secondary btn-block">Compose new Email</a>
<a href="#" class="btn btn-white btn-block">Compose new Email</a>
</div>
</div>
</div>
@@ -67,7 +67,7 @@ page-header: Crypto currencies
<textarea rows="10" class="form-control"></textarea>
<div class="btn-list mt-4 text-right">
<button type="button" class="btn btn-secondary btn-space">Cancel</button>
<button type="button" class="btn btn-white btn-space">Cancel</button>
<button type="submit" class="btn btn-primary btn-space">Send message</button>
</div>
</form>
pages/tmp-dark.html
+1 -1
View File
@@ -18,7 +18,7 @@ page-header: Dark
{% include ui/progress.html value=60 size="sm" class="mb-3" %}
<div class="mb-3">
{% include ui/button.html color="primary" %}
{% include ui/button.html color="secondary" %}
{% include ui/button.html color="white" %}
{% include ui/button.html color="danger" %}
{% include ui/button.html color="success" %}
{% include ui/button.html color="warning" %}
pages/users.html
+2 -2
View File
@@ -40,8 +40,8 @@ menu: extra.users
</div>
<div class="col-auto">
<div class="btn-list">
{% include ui/button.html text="Chat" color="secondary" size="sm" %}
{% include ui/button.html text="Profile" color="secondary" size="sm" %}
{% include ui/button.html text="Chat" color="white" size="sm" %}
{% include ui/button.html text="Profile" color="white" size="sm" %}
</div>
</div>
</div>
scss/_dark.scss
+1 -1
View File
@@ -20,7 +20,7 @@
border-color: transparent;
}
.btn-secondary,
.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;
scss/_variables.scss
-1
View File
@@ -108,7 +108,6 @@ $colors: (
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800,
"dark": $dark
scss/ui/_buttons.scss
+2 -6
View File
@@ -5,10 +5,6 @@
justify-content: center;
&: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, .02);
}
&: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);
}
@@ -25,7 +21,7 @@
.icon {
margin: 0 .25em 0 -.25em;
font-size: 1.2em;
font-size: (20em/14);
vertical-align: sub;
}
@@ -47,7 +43,7 @@
}
}
.btn-secondary {
.btn-white {
@include button-variant($white, $border-color, $dark);
background-image: linear-gradient(-180deg, rgba($dark, 0), rgba($dark, .04) 100%);
box-shadow: none !important;