From 8166cd0ebb04440ea78ecd4af511fa3cae076871 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 4 Sep 2017 14:02:47 -0400 Subject: [PATCH] Add --dropdown-caret-*; use border instead of ascii --- dist/shoelace.css | 2 +- source/css/dropdowns.css | 20 +++++++++++--------- source/css/variables.css | 4 ++++ 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/dist/shoelace.css b/dist/shoelace.css index 6e10523c..ab522a80 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -16,7 +16,7 @@ /*! 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} +/*! Dropdowns */.dropdown{position:relative}.dropdown,.dropdown .dropdown-trigger:after{display:inline-block}.dropdown .dropdown-trigger:after{content:"";width:.5em;height:.5em;border-top:2px solid currentcolor;border-right:2px solid currentcolor;margin-left:.5em;margin-top:-.5em;-webkit-transform:rotate(135deg);transform:rotate(135deg);vertical-align:middle}.dropdown.dropdown-top .dropdown-trigger:after{-webkit-transform:rotate(315deg);transform:rotate(315deg);margin-top:0}.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} /*! File buttons */.file-button{position:relative}.file-button input[type=file]{position:absolute;height:1px;width:1px;background:none;border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;padding:0}.file-button input[type=file]:focus+label{-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}.file-button input[type=file]:focus+label.button-secondary{-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}.file-button input[type=file]:focus+label.button-success{-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}.file-button input[type=file]:focus+label.button-info{-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}.file-button input[type=file]:focus+label.button-warning{-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}.file-button input[type=file]:focus+label.button-danger{-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}.file-button input[type=file]:focus+label.button-light{-webkit-box-shadow:0 0 0 2px hsla(0,0%,90%,.5);box-shadow:0 0 0 2px hsla(0,0%,90%,.5)}.file-button input[type=file]:focus+label.button-dark{-webkit-box-shadow:0 0 0 2px rgba(41,41,41,.5);box-shadow:0 0 0 2px rgba(41,41,41,.5)} diff --git a/source/css/dropdowns.css b/source/css/dropdowns.css index 6ee72bca..a8ff75ba 100644 --- a/source/css/dropdowns.css +++ b/source/css/dropdowns.css @@ -4,20 +4,22 @@ position: relative; display: inline-block; - /* Trigger */ & .dropdown-trigger::after { - content: '▼'; - font-family: var(--font-system); - font-size: .6em; - vertical-align: middle; - margin-left: .5em; + content: ''; + width: var(--dropdown-caret-size); + height: var(--dropdown-caret-size); + border-top: solid var(--dropdown-caret-width) var(--dropdown-caret-color); + border-right: solid var(--dropdown-caret-width) var(--dropdown-caret-color); + margin-left: var(--dropdown-caret-size); + margin-top: calc(var(--dropdown-caret-size) * -1); + transform: rotate(135deg); display: inline-block; - transform: scaleY(.75); - margin-top: -.2em; + vertical-align: middle; } &.dropdown-top .dropdown-trigger::after { - transform: scaleY(.75) rotate(180deg); + transform: rotate(315deg); + margin-top: 0; } /* Menu */ diff --git a/source/css/variables.css b/source/css/variables.css index 247cf95e..5241aae2 100644 --- a/source/css/variables.css +++ b/source/css/variables.css @@ -286,6 +286,10 @@ --dropdown-offset-y: 1px; --dropdown-z-index: 100; + --dropdown-caret-color: currentcolor; + --dropdown-caret-size: .5em; + --dropdown-caret-width: 2px; + --dropdown-divider-color: var(--component-border-color); --dropdown-divider-width: var(--component-border-width);