js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove button padding and use height + line-height

Browse Source
This commit is contained in:
Cory LaViska
2017-08-13 11:26:22 -04:00
parent f7b1896355
commit 5fc05a7a9d
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/shoelace.css vendored
View File

@@ -16,7 +16,7 @@
/*! Badges */.badge{font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);color:var(--badge-color);background-color:var(--badge-bg-color);border-radius:var(--badge-border-radius);padding:var(--badge-spacing-y) var(--badge-spacing-x);vertical-align:baseline;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.badge-secondary{color:var(--badge-color-secondary);background-color:var(--badge-bg-color-secondary)}.badge-success{color:var(--badge-color-success);background-color:var(--badge-bg-color-success)}.badge-info{color:var(--badge-color-info);background-color:var(--badge-bg-color-info)}.badge-warning{color:var(--badge-color-warning);background-color:var(--badge-bg-color-warning)}.badge-danger{color:var(--badge-color-danger);background-color:var(--badge-bg-color-danger)}.badge-light{color:var(--badge-color-light);background-color:var(--badge-bg-color-light)}.badge-dark{color:var(--badge-color-dark);background-color:var(--badge-bg-color-dark)}.badge:empty{display:none}a.badge:hover{color:var(--badge-color);text-decoration:none;-webkit-box-shadow:var(--badge-box-shadow-hover);box-shadow:var(--badge-box-shadow-hover)}a.badge-secondary:hover{color:var(--badge-color-secondary)}a.badge-success:hover{color:var(--badge-color-success)}a.badge-info:hover{color:var(--badge-color-info)}a.badge-warning:hover{color:var(--badge-color-warning)}a.badge-danger:hover{color:var(--badge-color-danger)}a.badge-dark:hover{color:var(--badge-color-dark)}a.badge-light:hover{color:var(--badge-color-light)}
/*! Buttons */.button,button{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;text-decoration:none;color:var(--button-color);background-color:var(--button-bg-color);border-radius:var(--button-border-radius);border:none;height:var(--button-height);line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);-webkit-box-shadow:var(--button-box-shadow);box-shadow:var(--button-box-shadow);cursor:pointer;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.button-small{font-size:var(--button-font-size-small);height:var(--button-height-small);padding:calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5)}.button-big{font-size:var(--button-font-size-big);height:var(--button-height-big);padding:calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1)}.button-block{width:100%!important;display:block}.button-secondary{color:var(--button-color-secondary);background-color:var(--button-bg-color-secondary)}.button-success{color:var(--button-color-success);background-color:var(--button-bg-color-success)}.button-info{color:var(--button-color-info);background-color:var(--button-bg-color-info)}.button-warning{color:var(--button-color-warning);background-color:var(--button-bg-color-warning)}.button-danger{color:var(--button-color-danger);background-color:var(--button-bg-color-danger)}.button-light{color:var(--button-color-light);background-color:var(--button-bg-color-light)}.button-dark{color:var(--button-color-dark);background-color:var(--button-bg-color-dark)}.button-link{color:var(--link-color);-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration)}.button-link,.button-link:hover:not(:disabled):not(.disabled){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover:not(:disabled):not(.disabled){color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}.button:hover,button:hover{text-decoration:none}.button:hover:not(.disabled),button:hover:not(:disabled){-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}.button.active:not(.button-link):not(.disabled),button.active:not(.button-link):not(:disabled),button:active:not(.button-link):not(:disabled){-webkit-box-shadow:var(--button-box-shadow-active);box-shadow:var(--button-box-shadow-active)}.button.disabled,button.disabled,button:disabled{opacity:.5;cursor:not-allowed}label.button input[type=file]{display:none}
/*! Buttons */.button,button{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;text-decoration:none;color:var(--button-color);background-color:var(--button-bg-color);border-radius:var(--button-border-radius);border:none;height:var(--button-height);line-height:var(--button-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:0 .75em;-webkit-box-shadow:var(--button-box-shadow);box-shadow:var(--button-box-shadow);cursor:pointer;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.button-small{font-size:var(--button-font-size-small);height:var(--button-height-small);line-height:var(--button-height-small)}.button-big{font-size:var(--button-font-size-big);height:var(--button-height-big);line-height:var(--button-height-big)}.button-block{width:100%!important;display:block}.button-secondary{color:var(--button-color-secondary);background-color:var(--button-bg-color-secondary)}.button-success{color:var(--button-color-success);background-color:var(--button-bg-color-success)}.button-info{color:var(--button-color-info);background-color:var(--button-bg-color-info)}.button-warning{color:var(--button-color-warning);background-color:var(--button-bg-color-warning)}.button-danger{color:var(--button-color-danger);background-color:var(--button-bg-color-danger)}.button-light{color:var(--button-color-light);background-color:var(--button-bg-color-light)}.button-dark{color:var(--button-color-dark);background-color:var(--button-bg-color-dark)}.button-link{color:var(--link-color);-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration)}.button-link,.button-link:hover:not(:disabled):not(.disabled){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover:not(:disabled):not(.disabled){color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}.button:hover,button:hover{text-decoration:none}.button:hover:not(.disabled),button:hover:not(:disabled){-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}.button.active:not(.button-link):not(.disabled),button.active:not(.button-link):not(:disabled),button:active:not(.button-link):not(:disabled){-webkit-box-shadow:var(--button-box-shadow-active);box-shadow:var(--button-box-shadow-active)}.button.disabled,button.disabled,button:disabled{opacity:.5;cursor:not-allowed}label.button input[type=file]{display:none}
/*! Dropdowns */.dropdown{position:relative;display:inline-block}.dropdown-trigger:after{content:"▼";font-family:var(--font-system);font-size:.6em;vertical-align:middle;margin-left:.5em;display:inline-block;-webkit-transform:scaleY(.75);transform:scaleY(.75)}.dropdown-top .dropdown-trigger:after{-webkit-transform:scaleY(.75) rotate(180deg);transform:scaleY(.75) rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + var(--dropdown-offset-y));left:var(--dropdown-offset-x);z-index:var(--dropdown-z-index);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height);background-color:var(--dropdown-bg-color);border:solid var(--dropdown-border-width) var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);-webkit-box-shadow:var(--dropdown-box-shadow);box-shadow:var(--dropdown-box-shadow);display:none;padding:calc(var(--dropdown-spacing-y) / 2) 0;overflow-y:auto}.dropdown-top .dropdown-menu{top:auto;bottom:calc(100% + var(--dropdown-offset-y))}.dropdown-left .dropdown-menu{left:auto;right:var(--dropdown-offset-x)}.dropdown.active .dropdown-menu{display:block}.dropdown-menu a{position:relative;color:var(--dropdown-color);text-decoration:none;padding:var(--dropdown-spacing-y) calc(var(--dropdown-spacing-x) + .5em);display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-menu a:hover:not(.disabled){color:var(--dropdown-color-hover);background-color:var(--dropdown-bg-color-hover)}.dropdown-menu a.disabled{cursor:not-allowed;opacity:.5}.dropdown-menu a.checked:before{position:absolute;left:calc(var(--dropdown-spacing-x) / 2 - .1em);content:"✓";font-family:var(--font-system);font-weight:600}.dropdown-menu hr{width:100%;border-top:solid var(--dropdown-divider-border-width) var(--dropdown-divider-border-color);margin:calc(var(--dropdown-spacing-y) / 2) 0}

8
source/css/buttons.css
View File

@@ -12,11 +12,11 @@ button,
border-radius: var(--button-border-radius);
border: none;
height: var(--button-height);
line-height: 1;
line-height: var(--button-height);
user-select: none;
vertical-align: middle;
white-space: nowrap;
padding: calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);
padding: 0 .75em; /* ems for relative sizing */
box-shadow: var(--button-box-shadow);
cursor: pointer;
display: inline-block;
@@ -26,13 +26,13 @@ button,
.button-small {
font-size: var(--button-font-size-small);
height: var(--button-height-small);
padding: calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5);
line-height: var(--button-height-small);
}
.button-big {
font-size: var(--button-font-size-big);
height: var(--button-height-big);
padding: calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1);
line-height: var(--button-height-big);
}
.button-block {