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 {
position: relative;
display: inline-block;
font-size: 0;
/* remove as part 1 of font-size inline-block hack */
display: inline-flex;
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 */
@ -22,22 +17,18 @@
/* Optional: Group multiple button groups together for a toolbar */
.btn-toolbar {
font-size: 0;
/* Hack to remove whitespace that results from using inline-block */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 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 */
.btn-group > .btn {
position: relative;
border-radius: 0;
flex: 0 1 auto;
}
.btn-group > .btn + .btn {
@ -48,7 +39,6 @@
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: var(--base-font-size);
/* redeclare as part 2 of font-size inline-block hack */
}
/* Reset fonts for other sizes */
@ -193,12 +183,12 @@
/* Vertical button groups */
.btn-group-vertical {
display: inline-block;
display: inline-flex;
flex-direction: column;
}
.btn-group-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
border-radius: 0;
}

17
css/buttons.css
View File

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