From df784b691413f5b6c96d3be0f7bf668882e6547f Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sat, 2 Sep 2017 00:20:13 -0400 Subject: [PATCH] Make button selectors less specific --- dist/shoelace.css | 2 +- source/css/buttons.css | 129 +++++++++++++++++++++++++++++------------ 2 files changed, 94 insertions(+), 37 deletions(-) diff --git a/dist/shoelace.css b/dist/shoelace.css index 61e1188fb..6e10523c7 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -14,7 +14,7 @@ /*! Badges */.badge{font-size:.8em;color:#fff;background-color:#0074d9;border-radius:1em;padding:.2em .6em;vertical-align:baseline;display:inline-block;-webkit-transition:all .1s;transition:all .1s}.badge:empty{display:none}.badge.badge-secondary{color:#fff;background-color:#aaa}.badge.badge-success{color:#fff;background-color:#2ecc40}.badge.badge-info{color:#fff;background-color:#39cccc}.badge.badge-warning{color:#fff;background-color:#ff851b}.badge.badge-danger{color:#fff;background-color:#ff4136}.badge.badge-light{color:#111;background-color:#fff}.badge.badge-dark{color:#fff;background-color:#111}a.badge:hover{color:#fff;background-color:#0068c3;text-decoration:none}a.badge:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}a.badge.badge-secondary:hover{color:#fff;background-color:#999}a.badge.badge-secondary:focus{-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}a.badge.badge-success:hover{color:#fff;background-color:#29b83a}a.badge.badge-success:focus{-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}a.badge.badge-info:hover{color:#fff;background-color:#33b8b8}a.badge.badge-info:focus{-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}a.badge.badge-warning:hover{color:#fff;background-color:#e67818}a.badge.badge-warning:focus{-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}a.badge.badge-danger:hover{color:#fff;background-color:#e63b31}a.badge.badge-danger:focus{-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}a.badge.badge-light:hover{color:#111;background-color:#e6e6e6}a.badge.badge-light:focus{-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.5);box-shadow:0 0 0 2px hsla(0,0%,100%,.5)}a.badge.badge-dark:hover{color:#fff;background-color:#292929}a.badge.badge-dark:focus{-webkit-box-shadow:0 0 0 2px hsla(0,0%,7%,.5);box-shadow:0 0 0 2px hsla(0,0%,7%,.5)} -/*! Buttons */.button,button{font-family:inherit;font-size:1rem;font-weight:inherit;text-align:center;text-decoration:none;color:#fff;background-color:#0074d9;border-radius:.25rem;border:1px solid #0074d9;border-top-color:#1982dd;border-bottom-color:#0068c3;height:2.25rem;line-height:calc(2.25rem - 2px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:0 .75em;cursor:pointer;display:inline-block;-webkit-transition:all .1s;transition:all .1s}.button:hover,button:hover{color:#fff}.button:hover:not(:disabled):not(.disabled),button:hover:not(:disabled):not(.disabled){text-decoration:none;background-color:#0068c3;border-color:#0068c3;border-top-color:#0074d9;border-bottom-color:#005dae}.button.active:not(:disabled):not(.disabled),.button:active:not(:disabled):not(.disabled),button.active:not(:disabled):not(.disabled),button:active:not(:disabled):not(.disabled){background-color:#0068c3;border-color:#0068c3;border-top-color:#005dae;border-bottom-color:#0068c3}.button:focus:not(:disabled):not(.disabled),button:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}.button.disabled,.button:disabled,button.disabled,button:disabled{text-decoration:none;opacity:.5;cursor:not-allowed}.button.button-xs,button.button-xs{font-size:.625rem;height:1.25rem;line-height:calc(1.25rem - 2px)}.button.button-sm,button.button-sm{font-size:.875rem;height:1.75rem;line-height:calc(1.75rem - 2px)}.button.button-lg,button.button-lg{font-size:1.25rem;height:2.75rem;line-height:calc(2.75rem - 2px)}.button.button-xl,button.button-xl{font-size:1.5rem;height:3.25rem;line-height:calc(3.25rem - 2px)}.button.button-secondary,button.button-secondary{color:#fff;background-color:#aaa;border-color:#aaa;border-top-color:#b3b3b3;border-bottom-color:#999}.button.button-secondary:hover:not(:disabled):not(.disabled),button.button-secondary:hover:not(:disabled):not(.disabled){color:#fff;background-color:#999;border-color:#999;border-top-color:#aaa;border-bottom-color:#888}.button.button-secondary.active:not(:disabled):not(.disabled),.button.button-secondary:active:not(:disabled):not(.disabled),button.button-secondary.active:not(:disabled):not(.disabled),button.button-secondary:active:not(:disabled):not(.disabled){background-color:#999;border-color:#999;border-top-color:#888;border-bottom-color:#999}.button.button-secondary:focus:not(:disabled):not(.disabled),button.button-secondary:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}.button.button-success,button.button-success{color:#fff;background-color:#2ecc40;border-color:#2ecc40;border-top-color:#43d153;border-bottom-color:#29b83a}.button.button-success:hover:not(:disabled):not(.disabled),button.button-success:hover:not(:disabled):not(.disabled){color:#fff;background-color:#29b83a;border-color:#29b83a;border-top-color:#2ecc40;border-bottom-color:#25a333}.button.button-success.active:not(:disabled):not(.disabled),.button.button-success:active:not(:disabled):not(.disabled),button.button-success.active:not(:disabled):not(.disabled),button.button-success:active:not(:disabled):not(.disabled){background-color:#29b83a;border-color:#29b83a;border-top-color:#25a333;border-bottom-color:#29b83a}.button.button-success:focus:not(:disabled):not(.disabled),button.button-success:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}.button.button-info,button.button-info{color:#fff;background-color:#39cccc;border-color:#39cccc;border-top-color:#4dd1d1;border-bottom-color:#33b8b8}.button.button-info:hover:not(:disabled):not(.disabled),button.button-info:hover:not(:disabled):not(.disabled){color:#fff;background-color:#33b8b8;border-color:#33b8b8;border-top-color:#39cccc;border-bottom-color:#2ea3a3}.button.button-info.active:not(:disabled):not(.disabled),.button.button-info:active:not(:disabled):not(.disabled),button.button-info.active:not(:disabled):not(.disabled),button.button-info:active:not(:disabled):not(.disabled){background-color:#33b8b8;border-color:#33b8b8;border-top-color:#2ea3a3;border-bottom-color:#33b8b8}.button.button-info:focus:not(:disabled):not(.disabled),button.button-info:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}.button.button-warning,button.button-warning{color:#fff;background-color:#ff851b;border-color:#ff851b;border-top-color:#ff9132;border-bottom-color:#e67818}.button.button-warning:hover:not(:disabled):not(.disabled),button.button-warning:hover:not(:disabled):not(.disabled){color:#fff;background-color:#e67818;border-color:#e67818;border-top-color:#ff851b;border-bottom-color:#cc6a16}.button.button-warning.active:not(:disabled):not(.disabled),.button.button-warning:active:not(:disabled):not(.disabled),button.button-warning.active:not(:disabled):not(.disabled),button.button-warning:active:not(:disabled):not(.disabled){background-color:#e67818;border-color:#e67818;border-top-color:#cc6a16;border-bottom-color:#e67818}.button.button-warning:focus:not(:disabled):not(.disabled),button.button-warning:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}.button.button-danger,button.button-danger{color:#fff;background-color:#ff4136;border-color:#ff4136;border-top-color:#ff544a;border-bottom-color:#e63b31}.button.button-danger:hover:not(:disabled):not(.disabled),button.button-danger:hover:not(:disabled):not(.disabled){color:#fff;background-color:#e63b31;border-color:#e63b31;border-top-color:#ff4136;border-bottom-color:#cc342b}.button.button-danger.active:not(:disabled):not(.disabled),.button.button-danger:active:not(:disabled):not(.disabled),button.button-danger.active:not(:disabled):not(.disabled),button.button-danger:active:not(:disabled):not(.disabled){background-color:#e63b31;border-color:#e63b31;border-top-color:#cc342b;border-bottom-color:#e63b31}.button.button-danger:focus:not(:disabled):not(.disabled),button.button-danger:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}.button.button-light,button.button-light{color:#111;background-color:#e6e6e6;border-color:#e6e6e6;border-top-color:#e9e9e9;border-bottom-color:#cfcfcf}.button.button-light:hover:not(:disabled):not(.disabled),button.button-light:hover:not(:disabled):not(.disabled){color:#111;background-color:#cfcfcf;border-color:#cfcfcf;border-top-color:#e6e6e6;border-bottom-color:#b8b8b8}.button.button-light.active:not(:disabled):not(.disabled),.button.button-light:active:not(:disabled):not(.disabled),button.button-light.active:not(:disabled):not(.disabled),button.button-light:active:not(:disabled):not(.disabled){background-color:#cfcfcf;border-color:#cfcfcf;border-top-color:#b8b8b8;border-bottom-color:#cfcfcf}.button.button-light:focus:not(:disabled):not(.disabled),button.button-light:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px hsla(0,0%,90%,.5);box-shadow:0 0 0 2px hsla(0,0%,90%,.5)}.button.button-dark,button.button-dark{color:#fff;background-color:#292929;border-color:#292929;border-top-color:#3e3e3e;border-bottom-color:#252525}.button.button-dark:hover:not(:disabled):not(.disabled),button.button-dark:hover:not(:disabled):not(.disabled){color:#fff;background-color:#252525;border-color:#252525;border-top-color:#292929;border-bottom-color:#212121}.button.button-dark.active:not(:disabled):not(.disabled),.button.button-dark:active:not(:disabled):not(.disabled),button.button-dark.active:not(:disabled):not(.disabled),button.button-dark:active:not(:disabled):not(.disabled){background-color:#252525;border-color:#252525;border-top-color:#212121;border-bottom-color:#252525}.button.button-dark:focus:not(:disabled):not(.disabled),button.button-dark:focus:not(:disabled):not(.disabled){outline:none;-webkit-box-shadow:0 0 0 2px rgba(41,41,41,.5);box-shadow:0 0 0 2px rgba(41,41,41,.5)}.button.button-block,button.button-block{width:100%!important;display:block}.button.button-link,button.button-link{border-color:transparent;background-color:transparent;color:#0074d9;text-decoration:none;-webkit-box-shadow:none;box-shadow:none}.button.button-link:focus:not(:disabled):not(.disabled),.button.button-link:hover:not(:disabled):not(.disabled),button.button-link:focus:not(:disabled):not(.disabled),button.button-link:hover:not(:disabled):not(.disabled){border-color:transparent;background-color:transparent;color:#0074d9;text-decoration:underline;-webkit-box-shadow:none;box-shadow:none}.button-loader,.button-loader:hover{position:relative;min-width:2em;color:transparent!important;overflow:hidden}.button-loader:after{content:"";position:absolute;top:calc(50% - .5em);left:calc(50% - .5em);width:1em;height:1em;border-radius:50%;border:.15em solid hsla(0,0%,100%,.2);border-top-color:#fff;border-left-color:#fff;display:inline-block;-webkit-animation:button-loader .75s linear infinite;animation:button-loader .75s linear infinite}.button-danger.button-loader:after,.button-info.button-loader:after,.button-secondary.button-loader:after,.button-success.button-loader:after,.button-warning.button-loader:after{border-color:hsla(0,0%,100%,.2);border-top-color:#fff;border-left-color:#fff}.button-light.button-loader:after{border-color:hsla(0,0%,7%,.2);border-top-color:#111;border-left-color:#111}.button-dark.button-loader:after{border-color:hsla(0,0%,100%,.2);border-top-color:#fff;border-left-color:#fff}@-webkit-keyframes button-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes button-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} +/*! Buttons */.button,button{font-family:inherit;font-size:1rem;font-weight:inherit;text-align:center;text-decoration:none;color:#fff;background-color:#0074d9;border-radius:.25rem;border:1px solid #0074d9;border-top-color:#1982dd;border-bottom-color:#0068c3;height:2.25rem;line-height:calc(2.25rem - 2px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:0 .75em;cursor:pointer;display:inline-block;-webkit-transition:all .1s;transition:all .1s}.button:hover,button:hover{color:#fff;text-decoration:none;background-color:#0068c3;border-color:#0068c3;border-top-color:#0074d9;border-bottom-color:#005dae}.button.active,.button:active,button.active,button:active{background-color:#0068c3;border-color:#0068c3;border-top-color:#005dae;border-bottom-color:#0068c3}.button:focus,button:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}.button.disabled,.button:disabled,button.disabled,button:disabled{background-color:#0068c3;border-top-color:#1982dd;border-bottom-color:#0068c3;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;opacity:.5;cursor:not-allowed}.button.button-xs,button.button-xs{font-size:.625rem;height:1.25rem;line-height:calc(1.25rem - 2px)}.button.button-sm,button.button-sm{font-size:.875rem;height:1.75rem;line-height:calc(1.75rem - 2px)}.button.button-lg,button.button-lg{font-size:1.25rem;height:2.75rem;line-height:calc(2.75rem - 2px)}.button.button-xl,button.button-xl{font-size:1.5rem;height:3.25rem;line-height:calc(3.25rem - 2px)}.button.button-secondary,button.button-secondary{color:#fff;background-color:#aaa;border-color:#aaa;border-top-color:#b3b3b3;border-bottom-color:#999}.button.button-secondary:hover,button.button-secondary:hover{color:#fff;background-color:#999;border-color:#999;border-top-color:#aaa;border-bottom-color:#888}.button.button-secondary.active,.button.button-secondary:active,button.button-secondary.active,button.button-secondary:active{background-color:#999;border-color:#999;border-top-color:#888;border-bottom-color:#999}.button.button-secondary:focus,button.button-secondary:focus{outline:none;-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}.button.button-secondary.disabled,.button.button-secondary:disabled,button.button-secondary.disabled,button.button-secondary:disabled{background-color:#999;border-top-color:#b3b3b3;border-bottom-color:#999;-webkit-box-shadow:none;box-shadow:none}.button.button-success,button.button-success{color:#fff;background-color:#2ecc40;border-color:#2ecc40;border-top-color:#43d153;border-bottom-color:#29b83a}.button.button-success:hover,button.button-success:hover{color:#fff;background-color:#29b83a;border-color:#29b83a;border-top-color:#2ecc40;border-bottom-color:#25a333}.button.button-success.active,.button.button-success:active,button.button-success.active,button.button-success:active{background-color:#29b83a;border-color:#29b83a;border-top-color:#25a333;border-bottom-color:#29b83a}.button.button-success:focus,button.button-success:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}.button.button-success.disabled,.button.button-success:disabled,button.button-success.disabled,button.button-success:disabled{background-color:#29b83a;border-top-color:#43d153;border-bottom-color:#29b83a;-webkit-box-shadow:none;box-shadow:none}.button.button-info,button.button-info{color:#fff;background-color:#39cccc;border-color:#39cccc;border-top-color:#4dd1d1;border-bottom-color:#33b8b8}.button.button-info:hover,button.button-info:hover{color:#fff;background-color:#33b8b8;border-color:#33b8b8;border-top-color:#39cccc;border-bottom-color:#2ea3a3}.button.button-info.active,.button.button-info:active,button.button-info.active,button.button-info:active{background-color:#33b8b8;border-color:#33b8b8;border-top-color:#2ea3a3;border-bottom-color:#33b8b8}.button.button-info:focus,button.button-info:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}.button.button-info.disabled,.button.button-info:disabled,button.button-info.disabled,button.button-info:disabled{background-color:#33b8b8;border-top-color:#4dd1d1;border-bottom-color:#33b8b8;-webkit-box-shadow:none;box-shadow:none}.button.button-warning,button.button-warning{color:#fff;background-color:#ff851b;border-color:#ff851b;border-top-color:#ff9132;border-bottom-color:#e67818}.button.button-warning:hover,button.button-warning:hover{color:#fff;background-color:#e67818;border-color:#e67818;border-top-color:#ff851b;border-bottom-color:#cc6a16}.button.button-warning.active,.button.button-warning:active,button.button-warning.active,button.button-warning:active{background-color:#e67818;border-color:#e67818;border-top-color:#cc6a16;border-bottom-color:#e67818}.button.button-warning:focus,button.button-warning:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}.button.button-warning.disabled,.button.button-warning:disabled,button.button-warning.disabled,button.button-warning:disabled{background-color:#e67818;border-top-color:#ff9132;border-bottom-color:#e67818;-webkit-box-shadow:none;box-shadow:none}.button.button-danger,button.button-danger{color:#fff;background-color:#ff4136;border-color:#ff4136;border-top-color:#ff544a;border-bottom-color:#e63b31}.button.button-danger:hover,button.button-danger:hover{color:#fff;background-color:#e63b31;border-color:#e63b31;border-top-color:#ff4136;border-bottom-color:#cc342b}.button.button-danger.active,.button.button-danger:active,button.button-danger.active,button.button-danger:active{background-color:#e63b31;border-color:#e63b31;border-top-color:#cc342b;border-bottom-color:#e63b31}.button.button-danger:focus,button.button-danger:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}.button.button-danger.disabled,.button.button-danger:disabled,button.button-danger.disabled,button.button-danger:disabled{background-color:#e63b31;border-top-color:#ff544a;border-bottom-color:#e63b31;-webkit-box-shadow:none;box-shadow:none}.button.button-light,button.button-light{color:#111;background-color:#e6e6e6;border-color:#e6e6e6;border-top-color:#e9e9e9;border-bottom-color:#cfcfcf}.button.button-light:hover,button.button-light:hover{color:#111;background-color:#cfcfcf;border-color:#cfcfcf;border-top-color:#e6e6e6;border-bottom-color:#b8b8b8}.button.button-light.active,.button.button-light:active,button.button-light.active,button.button-light:active{background-color:#cfcfcf;border-color:#cfcfcf;border-top-color:#b8b8b8;border-bottom-color:#cfcfcf}.button.button-light:focus,button.button-light:focus{outline:none;-webkit-box-shadow:0 0 0 2px hsla(0,0%,90%,.5);box-shadow:0 0 0 2px hsla(0,0%,90%,.5)}.button.button-light.disabled,.button.button-light:disabled,button.button-light.disabled,button.button-light:disabled{background-color:#cfcfcf;border-top-color:#e9e9e9;border-bottom-color:#cfcfcf;-webkit-box-shadow:none;box-shadow:none}.button.button-dark,button.button-dark{color:#fff;background-color:#292929;border-color:#292929;border-top-color:#3e3e3e;border-bottom-color:#252525}.button.button-dark:hover,button.button-dark:hover{color:#fff;background-color:#252525;border-color:#252525;border-top-color:#292929;border-bottom-color:#212121}.button.button-dark.active,.button.button-dark:active,button.button-dark.active,button.button-dark:active{background-color:#252525;border-color:#252525;border-top-color:#212121;border-bottom-color:#252525}.button.button-dark:focus,button.button-dark:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(41,41,41,.5);box-shadow:0 0 0 2px rgba(41,41,41,.5)}.button.button-dark.disabled,.button.button-dark:disabled,button.button-dark.disabled,button.button-dark:disabled{background-color:#252525;border-top-color:#3e3e3e;border-bottom-color:#252525;-webkit-box-shadow:none;box-shadow:none}.button.button-block,button.button-block{width:100%!important;display:block}.button.button-link,button.button-link{border-color:transparent;background-color:transparent;color:#0074d9;text-decoration:none;-webkit-box-shadow:none;box-shadow:none}.button.button-link:focus,.button.button-link:hover,button.button-link:focus,button.button-link:hover{border-color:transparent;background-color:transparent;color:#0074d9;text-decoration:underline;-webkit-box-shadow:none;box-shadow:none}.button-loader,.button-loader:hover{position:relative;min-width:2em;color:transparent!important;overflow:hidden}.button-loader:after{content:"";position:absolute;top:calc(50% - .5em);left:calc(50% - .5em);width:1em;height:1em;border-radius:50%;border:.15em solid hsla(0,0%,100%,.2);border-top-color:#fff;border-left-color:#fff;display:inline-block;-webkit-animation:button-loader .75s linear infinite;animation:button-loader .75s linear infinite}.button-danger.button-loader:after,.button-info.button-loader:after,.button-secondary.button-loader:after,.button-success.button-loader:after,.button-warning.button-loader:after{border-color:hsla(0,0%,100%,.2);border-top-color:#fff;border-left-color:#fff}.button-light.button-loader:after{border-color:hsla(0,0%,7%,.2);border-top-color:#111;border-left-color:#111}.button-dark.button-loader:after{border-color:hsla(0,0%,100%,.2);border-top-color:#fff;border-left-color:#fff}@-webkit-keyframes button-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes button-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} /*! Dropdowns */.dropdown{position:relative;display:inline-block}.dropdown .dropdown-trigger:after{content:"▼";font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;font-size:.6em;vertical-align:middle;margin-left:.5em;display:inline-block;-webkit-transform:scaleY(.75);transform:scaleY(.75);margin-top:-.2em}.dropdown.dropdown-top .dropdown-trigger:after{-webkit-transform:scaleY(.75) rotate(180deg);transform:scaleY(.75) rotate(180deg)}.dropdown .dropdown-menu{position:absolute;top:calc(100% + 1px);left:0;z-index:100;min-width:10rem;max-width:25rem;max-height:none;line-height:1.5;font-size:inherit;font-weight:inherit;text-align:left;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(0,0,0,.05);display:none;padding:.25rem 0;overflow-y:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown .dropdown-menu a{position:relative;color:#111;text-decoration:none;padding:.25rem calc(1rem + .5em);display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown .dropdown-menu a:focus{outline:none;color:#111;background-color:#f2f2f2}.dropdown .dropdown-menu a:hover{color:#fff;background-color:#0074d9}.dropdown .dropdown-menu a.disabled{background-color:transparent;color:#111;outline:none;cursor:not-allowed;opacity:.5}.dropdown .dropdown-menu a.checked:before{position:absolute;left:calc(.5rem - .1em);content:"✓";font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;font-weight:600}.dropdown .dropdown-menu hr{width:100%;border-top:1px solid #ddd;margin:.25rem 0}.dropdown .dropdown-menu .dropdown-heading{font-size:80%;font-weight:inherit;color:#aaa;padding:.25rem calc(1rem + .5em);cursor:default}.dropdown.dropdown-top .dropdown-menu{top:auto;bottom:calc(100% + 1px)}.dropdown.dropdown-left .dropdown-menu{left:auto;right:0}.dropdown.dropdown.active .dropdown-menu{display:block} diff --git a/source/css/buttons.css b/source/css/buttons.css index d9fd1b5d9..9ae2c49ff 100644 --- a/source/css/buttons.css +++ b/source/css/buttons.css @@ -27,9 +27,6 @@ button, &:hover { color: var(--button-color); - } - - &:hover:not(:disabled, .disabled) { text-decoration: none; background-color: color(var(--button-bg-color) shade(10%)); border-color: color(var(--button-bg-color) shade(10%)); @@ -37,21 +34,25 @@ button, border-bottom-color: color(var(--button-bg-color) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color) shade(10%)); border-color: color(var(--button-bg-color) shade(10%)); border-top-color: color(var(--button-bg-color) shade(20%)); border-bottom-color: color(var(--button-bg-color) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%)); } &:disabled, &.disabled { + background-color: color(var(--button-bg-color) shade(10%)); + border-top-color: color(var(--button-bg-color) tint(10%)); + border-bottom-color: color(var(--button-bg-color) shade(10%)); + box-shadow: none; text-decoration: none; opacity: .5; cursor: not-allowed; @@ -90,7 +91,7 @@ button, border-top-color: color(var(--button-bg-color-secondary) tint(10%)); border-bottom-color: color(var(--button-bg-color-secondary) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-secondary); background-color: color(var(--button-bg-color-secondary) shade(10%)); border-color: color(var(--button-bg-color-secondary) shade(10%)); @@ -98,18 +99,26 @@ button, border-bottom-color: color(var(--button-bg-color-secondary) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-secondary) shade(10%)); border-color: color(var(--button-bg-color-secondary) shade(10%)); border-top-color: color(var(--button-bg-color-secondary) shade(20%)); border-bottom-color: color(var(--button-bg-color-secondary) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-secondary) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-secondary) shade(10%)); + border-top-color: color(var(--button-bg-color-secondary) tint(10%)); + border-bottom-color: color(var(--button-bg-color-secondary) shade(10%)); + box-shadow: none; + } } &.button-success { @@ -119,7 +128,7 @@ button, border-top-color: color(var(--button-bg-color-success) tint(10%)); border-bottom-color: color(var(--button-bg-color-success) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-success); background-color: color(var(--button-bg-color-success) shade(10%)); border-color: color(var(--button-bg-color-success) shade(10%)); @@ -127,18 +136,26 @@ button, border-bottom-color: color(var(--button-bg-color-success) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-success) shade(10%)); border-color: color(var(--button-bg-color-success) shade(10%)); border-top-color: color(var(--button-bg-color-success) shade(20%)); border-bottom-color: color(var(--button-bg-color-success) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-success) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-success) shade(10%)); + border-top-color: color(var(--button-bg-color-success) tint(10%)); + border-bottom-color: color(var(--button-bg-color-success) shade(10%)); + box-shadow: none; + } } &.button-info { @@ -148,7 +165,7 @@ button, border-top-color: color(var(--button-bg-color-info) tint(10%)); border-bottom-color: color(var(--button-bg-color-info) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-info); background-color: color(var(--button-bg-color-info) shade(10%)); border-color: color(var(--button-bg-color-info) shade(10%)); @@ -156,18 +173,26 @@ button, border-bottom-color: color(var(--button-bg-color-info) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-info) shade(10%)); border-color: color(var(--button-bg-color-info) shade(10%)); border-top-color: color(var(--button-bg-color-info) shade(20%)); border-bottom-color: color(var(--button-bg-color-info) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-info) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-info) shade(10%)); + border-top-color: color(var(--button-bg-color-info) tint(10%)); + border-bottom-color: color(var(--button-bg-color-info) shade(10%)); + box-shadow: none; + } } &.button-warning { @@ -177,7 +202,7 @@ button, border-top-color: color(var(--button-bg-color-warning) tint(10%)); border-bottom-color: color(var(--button-bg-color-warning) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-warning); background-color: color(var(--button-bg-color-warning) shade(10%)); border-color: color(var(--button-bg-color-warning) shade(10%)); @@ -185,18 +210,26 @@ button, border-bottom-color: color(var(--button-bg-color-warning) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-warning) shade(10%)); border-color: color(var(--button-bg-color-warning) shade(10%)); border-top-color: color(var(--button-bg-color-warning) shade(20%)); border-bottom-color: color(var(--button-bg-color-warning) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-warning) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-warning) shade(10%)); + border-top-color: color(var(--button-bg-color-warning) tint(10%)); + border-bottom-color: color(var(--button-bg-color-warning) shade(10%)); + box-shadow: none; + } } &.button-danger { @@ -206,7 +239,7 @@ button, border-top-color: color(var(--button-bg-color-danger) tint(10%)); border-bottom-color: color(var(--button-bg-color-danger) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-danger); background-color: color(var(--button-bg-color-danger) shade(10%)); border-color: color(var(--button-bg-color-danger) shade(10%)); @@ -214,18 +247,26 @@ button, border-bottom-color: color(var(--button-bg-color-danger) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-danger) shade(10%)); border-color: color(var(--button-bg-color-danger) shade(10%)); border-top-color: color(var(--button-bg-color-danger) shade(20%)); border-bottom-color: color(var(--button-bg-color-danger) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-danger) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-danger) shade(10%)); + border-top-color: color(var(--button-bg-color-danger) tint(10%)); + border-bottom-color: color(var(--button-bg-color-danger) shade(10%)); + box-shadow: none; + } } &.button-light { @@ -235,7 +276,7 @@ button, border-top-color: color(var(--button-bg-color-light) tint(10%)); border-bottom-color: color(var(--button-bg-color-light) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-light); background-color: color(var(--button-bg-color-light) shade(10%)); border-color: color(var(--button-bg-color-light) shade(10%)); @@ -243,18 +284,26 @@ button, border-bottom-color: color(var(--button-bg-color-light) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-light) shade(10%)); border-color: color(var(--button-bg-color-light) shade(10%)); border-top-color: color(var(--button-bg-color-light) shade(20%)); border-bottom-color: color(var(--button-bg-color-light) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-light) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-light) shade(10%)); + border-top-color: color(var(--button-bg-color-light) tint(10%)); + border-bottom-color: color(var(--button-bg-color-light) shade(10%)); + box-shadow: none; + } } &.button-dark { @@ -264,7 +313,7 @@ button, border-top-color: color(var(--button-bg-color-dark) tint(10%)); border-bottom-color: color(var(--button-bg-color-dark) shade(10%)); - &:hover:not(:disabled, .disabled) { + &:hover { color: var(--button-color-dark); background-color: color(var(--button-bg-color-dark) shade(10%)); border-color: color(var(--button-bg-color-dark) shade(10%)); @@ -272,18 +321,26 @@ button, border-bottom-color: color(var(--button-bg-color-dark) shade(20%)); } - &:active:not(:disabled, .disabled), - &.active:not(:disabled, .disabled) { + &:active, + &.active { background-color: color(var(--button-bg-color-dark) shade(10%)); border-color: color(var(--button-bg-color-dark) shade(10%)); border-top-color: color(var(--button-bg-color-dark) shade(20%)); border-bottom-color: color(var(--button-bg-color-dark) shade(10%)); } - &:focus:not(:disabled, .disabled) { + &:focus { outline: none; box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-dark) alpha(50%)); } + + &:disabled, + &.disabled { + background-color: color(var(--button-bg-color-dark) shade(10%)); + border-top-color: color(var(--button-bg-color-dark) tint(10%)); + border-bottom-color: color(var(--button-bg-color-dark) shade(10%)); + box-shadow: none; + } } /* Block buttons */ @@ -301,8 +358,8 @@ button, box-shadow: none; } - &.button-link:hover:not(:disabled, .disabled), - &.button-link:focus:not(:disabled, .disabled) { + &.button-link:hover, + &.button-link:focus { border-color: transparent; background-color: transparent; color: var(--link-color-hover);