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

Fix hover bug on a.button/label.button

Browse Source
This commit is contained in:
Cory LaViska
2017-08-13 16:06:08 -04:00
parent 27f69fef00
commit 35f8717677
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/shoelace.css vendored
View File

@@ -14,7 +14,7 @@
/*! Badges */:root{--badge-font-size:.8em;--badge-color:var(--color-white);--badge-bg-color:var(--state-primary);--badge-border-radius:1em;--badge-box-shadow-hover:inset 0 0 0 1em rgba(0,0,0,.1)}.badge{font-size:var(--badge-font-size);color:var(--badge-color);background-color:var(--badge-bg-color);border-radius:var(--badge-border-radius);padding:.2em .6em;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: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)}.badge-secondary{background-color:var(--state-secondary)}.badge-success{background-color:var(--state-success)}.badge-info{background-color:var(--state-info)}.badge-warning{background-color:var(--state-warning)}.badge-danger{background-color:var(--state-danger)}.badge-light,a.badge-light:hover{color:var(--state-dark);background-color:var(--state-light)}.badge-dark,a.badge-dark:hover{color:var(--state-light);background-color:var(--state-dark)}
/*! Buttons */:root{--button-font-family:var(--input-font-family);--button-font-weight:var(--input-font-weight);--button-font-size:var(--input-font-size);--button-font-size-small:var(--input-font-size-small);--button-font-size-big:var(--input-font-size-big);--button-color:var(--color-white);--button-bg-color:var(--state-primary);--button-height:var(--input-height);--button-height-small:var(--input-height-small);--button-height-big:var(--input-height-big);--button-border-radius:var(--component-border-radius);--button-box-shadow:inset 0 2px 0 hsla(0,0%,100%,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-hover:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-active:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 2px 0 rgba(0,0,0,.1)}.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-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){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover:not(:disabled){color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}a.button:hover,button:hover{color:var(--button-color);text-decoration:none}button:hover:not(:disabled){color:var(--button-color);-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}a.button.active:not(.button-link),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{opacity:.5;cursor:not-allowed}label.button input[type=file]{display:none}.button-secondary{background-color:var(--state-secondary)}.button-success{background-color:var(--state-success)}.button-info{background-color:var(--state-info)}.button-warning{background-color:var(--state-warning)}.button-danger{background-color:var(--state-danger)}.button-light,a.button-light:hover,button.button-light:hover:not(:disabled){color:var(--state-dark);background-color:var(--state-light)}.button-dark,a.button-dark,button.button-dark:hover:not(:disabled){color:var(--state-light);background-color:var(--state-dark)}
/*! Buttons */:root{--button-font-family:var(--input-font-family);--button-font-weight:var(--input-font-weight);--button-font-size:var(--input-font-size);--button-font-size-small:var(--input-font-size-small);--button-font-size-big:var(--input-font-size-big);--button-color:var(--color-white);--button-bg-color:var(--state-primary);--button-height:var(--input-height);--button-height-small:var(--input-height-small);--button-height-big:var(--input-height-big);--button-border-radius:var(--component-border-radius);--button-box-shadow:inset 0 2px 0 hsla(0,0%,100%,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-hover:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-active:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 2px 0 rgba(0,0,0,.1)}.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-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){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover: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{color:var(--button-color);text-decoration:none}.button:hover,button:hover:not(:disabled){color:var(--button-color);-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}.button.active:not(.button-link),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{opacity:.5;cursor:not-allowed}label.button input[type=file]{display:none}.button-secondary{background-color:var(--state-secondary)}.button-success{background-color:var(--state-success)}.button-info{background-color:var(--state-info)}.button-warning{background-color:var(--state-warning)}.button-danger{background-color:var(--state-danger)}.button-light,.button-light:hover,button.button-light:hover:not(:disabled){color:var(--state-dark);background-color:var(--state-light)}.button-dark,button.button-dark:hover:not(:disabled){color:var(--state-light);background-color:var(--state-dark)}
/*! Dropdowns */:root{--dropdown-min-width:10rem;--dropdown-max-width:25rem;--dropdown-max-height:none;--dropdown-offset-x:0;--dropdown-offset-y:1px;--dropdown-border-color:var(--component-border-color);--dropdown-border-radius:var(--component-border-radius);--dropdown-border-width:var(--component-border-width);--dropdown-color:var(--body-color);--dropdown-color-hover:var(--color-white);--dropdown-bg-color:var(--color-white);--dropdown-bg-color-hover:var(--state-primary);--dropdown-box-shadow:0 1px 0 rgba(0,0,0,.05);--dropdown-divider-border-color:var(--component-border-color);--dropdown-divider-border-width:var(--component-border-width);--dropdown-spacing-x:1rem;--dropdown-spacing-y:.25rem;--dropdown-z-index:100}.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);margin-top:-.2em}.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}

11
source/css/buttons.css
View File

@@ -71,19 +71,20 @@ button,
}
button:hover,
a.button:hover {
.button:hover {
color: var(--button-color);
text-decoration: none;
}
button:hover:not(:disabled) {
button:hover:not(:disabled),
.button:hover {
color: var(--button-color);
box-shadow: var(--button-box-shadow-hover);
}
button:active:not(.button-link):not(:disabled),
button.active:not(.button-link):not(:disabled),
a.button.active:not(.button-link) {
.button.active:not(.button-link) {
box-shadow: var(--button-box-shadow-active);
}
@@ -119,14 +120,14 @@ label.button input[type="file"] {
.button-light,
button.button-light:hover:not(:disabled),
a.button-light:hover {
.button-light:hover {
color: var(--state-dark);
background-color: var(--state-light);
}
.button-dark,
button.button-dark:hover:not(:disabled),
a.button-dark {
.button-dark {
color: var(--state-light);
background-color: var(--state-dark);
}