Sharkk/Torq
Sharkk/Torq
1
0
Fork 0
Code Issues Pull Requests Releases Activity

buttons

Browse Source
This commit is contained in:
Sky Johnson 2025-04-11 15:28:14 -05:00
parent cde958a5a7
commit a2fd8087a6
2 changed files with 43 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/button-groups.css
View File

@ -3,16 +3,11 @@
======================================== ========================================
*/ */
/* Make the div behave like a button */ /* Make the div behave like a button container */
.btn-group { .btn-group {
position: relative; position: relative;
display: inline-block; display: inline-flex;
font-size: 0;
/* remove as part 1 of font-size inline-block hack */
vertical-align: middle; vertical-align: middle;
/* match .btn alignment given font-size hack above */
white-space: nowrap;
/* prevent buttons from wrapping when in tight spaces */
} }
/* Space out series of button groups */ /* Space out series of button groups */
@ -22,22 +17,18 @@
/* Optional: Group multiple button groups together for a toolbar */ /* Optional: Group multiple button groups together for a toolbar */
.btn-toolbar { .btn-toolbar {
font-size: 0; display: flex;
/* Hack to remove whitespace that results from using inline-block */ flex-wrap: wrap;
gap: 5px;
margin-top: calc(var(--base-line-height) / 2); margin-top: calc(var(--base-line-height) / 2);
margin-bottom: calc(var(--base-line-height) / 2); margin-bottom: calc(var(--base-line-height) / 2);
} }
.btn-toolbar>.btn+.btn,
.btn-toolbar>.btn-group+.btn,
.btn-toolbar>.btn+.btn-group {
margin-left: 5px;
}
/* Float them, remove border radius, then re-add to first and last elements */ /* Float them, remove border radius, then re-add to first and last elements */
.btn-group > .btn { .btn-group > .btn {
position: relative; position: relative;
border-radius: 0; border-radius: 0;
flex: 0 1 auto;
} }
.btn-group > .btn + .btn { .btn-group > .btn + .btn {
@ -48,7 +39,6 @@
.btn-group > .dropdown-menu, .btn-group > .dropdown-menu,
.btn-group > .popover { .btn-group > .popover {
font-size: var(--base-font-size); font-size: var(--base-font-size);
/* redeclare as part 2 of font-size inline-block hack */
} }
/* Reset fonts for other sizes */ /* Reset fonts for other sizes */
@ -193,12 +183,12 @@
/* Vertical button groups */ /* Vertical button groups */
.btn-group-vertical { .btn-group-vertical {
display: inline-block; display: inline-flex;
flex-direction: column;
} }
.btn-group-vertical > .btn { .btn-group-vertical > .btn {
display: block; width: 100%;
float: none;
max-width: 100%; max-width: 100%;
border-radius: 0; border-radius: 0;
} }

17
css/buttons.css
View File

@ -5,20 +5,19 @@
/* Core */ /* Core */
.btn { .btn {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px; padding: 4px 12px;
margin-bottom: 0; margin-bottom: 0;
/* For input.btn */
font-size: var(--base-font-size); font-size: var(--base-font-size);
line-height: var(--base-line-height); line-height: var(--base-line-height);
text-align: center; text-align: center;
vertical-align: middle;
cursor: pointer; cursor: pointer;
background-color: var(--btn-background); background-color: var(--btn-background);
background-image: linear-gradient(to bottom, var(--btn-background), var(--btn-background-highlight)); background-image: linear-gradient(to bottom, var(--btn-background), var(--btn-background-highlight));
border: 1px solid var(--btn-border); border: 1px solid var(--btn-border);
border-bottom-color: #b3b3b3; border-bottom-color: #b3b3b3;
/* darken(--btn-border, 10%) */
border-radius: var(--base-border-radius); border-radius: var(--base-border-radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
} }
@ -54,6 +53,7 @@
background-image: none; background-image: none;
opacity: 0.65; opacity: 0.65;
box-shadow: none; box-shadow: none;
pointer-events: none;
} }
/* Button Sizes */ /* Button Sizes */
@ -94,7 +94,7 @@
/* Block button */ /* Block button */
.btn-block { .btn-block {
display: block; display: flex;
width: 100%; width: 100%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -171,13 +171,6 @@ input[type="button"].btn-block {
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
/* Cross-browser Jank */
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
/* Link buttons */ /* Link buttons */
.btn-link, .btn-link,
.btn-link:active, .btn-link:active,