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

84
css/button-groups.css
View File

@ -3,99 +3,89 @@
======================================== ========================================
*/ */
/* 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 */
.btn-group+.btn-group { .btn-group + .btn-group {
margin-left: 5px; margin-left: 5px;
} }
/* 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 {
margin-left: -1px; margin-left: -1px;
} }
.btn-group>.btn, .btn-group > .btn,
.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 */
.btn-group>.btn-mini { .btn-group > .btn-mini {
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
} }
.btn-group>.btn-small { .btn-group > .btn-small {
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
.btn-group>.btn-large { .btn-group > .btn-large {
font-size: var(--font-size-large); font-size: var(--font-size-large);
} }
/* Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match */ /* Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match */
.btn-group>.btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
border-top-left-radius: var(--base-border-radius); border-top-left-radius: var(--base-border-radius);
border-bottom-left-radius: var(--base-border-radius); border-bottom-left-radius: var(--base-border-radius);
} }
/* Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it */ /* Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it */
.btn-group>.btn:last-child, .btn-group > .btn:last-child,
.btn-group>.dropdown-toggle { .btn-group > .dropdown-toggle {
border-top-right-radius: var(--base-border-radius); border-top-right-radius: var(--base-border-radius);
border-bottom-right-radius: var(--base-border-radius); border-bottom-right-radius: var(--base-border-radius);
} }
/* Reset corners for large buttons */ /* Reset corners for large buttons */
.btn-group>.btn.large:first-child { .btn-group > .btn.large:first-child {
margin-left: 0; margin-left: 0;
border-top-left-radius: var(--border-radius-large); border-top-left-radius: var(--border-radius-large);
border-bottom-left-radius: var(--border-radius-large); border-bottom-left-radius: var(--border-radius-large);
} }
.btn-group>.btn.large:last-child, .btn-group > .btn.large:last-child,
.btn-group>.large.dropdown-toggle { .btn-group > .large.dropdown-toggle {
border-top-right-radius: var(--border-radius-large); border-top-right-radius: var(--border-radius-large);
border-bottom-right-radius: var(--border-radius-large); border-bottom-right-radius: var(--border-radius-large);
} }
/* On hover/focus/active, bring the proper btn to front */ /* On hover/focus/active, bring the proper btn to front */
.btn-group>.btn:hover, .btn-group > .btn:hover,
.btn-group>.btn:focus, .btn-group > .btn:focus,
.btn-group>.btn:active, .btn-group > .btn:active,
.btn-group>.btn.active { .btn-group > .btn.active {
z-index: 2; z-index: 2;
} }
@ -106,18 +96,18 @@
} }
/* Split button dropdowns */ /* Split button dropdowns */
.btn-group>.btn+.dropdown-toggle { .btn-group > .btn + .dropdown-toggle {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .125), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .125), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
} }
.btn-group>.btn-mini+.dropdown-toggle { .btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.btn-group>.btn-large+.dropdown-toggle { .btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
@ -193,33 +183,33 @@
/* 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;
} }
.btn-group-vertical>.btn+.btn { .btn-group-vertical > .btn + .btn {
margin-left: 0; margin-left: 0;
margin-top: -1px; margin-top: -1px;
} }
.btn-group-vertical>.btn:first-child { .btn-group-vertical > .btn:first-child {
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
} }
.btn-group-vertical>.btn:last-child { .btn-group-vertical > .btn:last-child {
border-radius: 0 0 var(--base-border-radius) var(--base-border-radius); border-radius: 0 0 var(--base-border-radius) var(--base-border-radius);
} }
.btn-group-vertical>.btn-large:first-child { .btn-group-vertical > .btn-large:first-child {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
} }
.btn-group-vertical>.btn-large:last-child { .btn-group-vertical > .btn-large:last-child {
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
} }

19
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;
@ -102,7 +102,7 @@
} }
/* Vertically space out multiple block buttons */ /* Vertically space out multiple block buttons */
.btn-block+.btn-block { .btn-block + .btn-block {
margin-top: 5px; margin-top: 5px;
} }
@ -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,