From 608e5bf4e23e431f8a873300d2f99a7be947cbb5 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 31 Aug 2017 12:23:47 -0400 Subject: [PATCH] Added dropdown headings --- dist/shoelace.css | 2 +- docs/dropdowns.html | 3 +++ source/css/dropdowns.css | 11 +++++++++++ source/docs/dropdowns.md | 4 ++++ 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/dist/shoelace.css b/dist/shoelace.css index f7a3fd1f0..34a75c75a 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}.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)}} -/*! 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;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)}.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:not(.disabled){outline:none;color:#111;background-color:#f2f2f2}.dropdown .dropdown-menu a:hover:not(.disabled){color:#fff;background-color:#0074d9}.dropdown .dropdown-menu a.disabled{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-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;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;font-size:inherit;font-weight:inherit;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:not(.disabled){outline:none;color:#111;background-color:#f2f2f2}.dropdown .dropdown-menu a:hover:not(.disabled){color:#fff;background-color:#0074d9}.dropdown .dropdown-menu a.disabled{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:.875rem;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/docs/dropdowns.html b/docs/dropdowns.html index 532470fae..7d7de406a 100644 --- a/docs/dropdowns.html +++ b/docs/dropdowns.html @@ -57,6 +57,7 @@

Dropdowns can be created using the markup below. You can use a <button> or an <a> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <a> elements. Dividers are simply <hr> elements.

Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the disabled class. Menu items can also be given a checked state using the checked class.

To disable a dropdown entirely, add the disabled property to the dropdown trigger if it’s a button. If it’s a link, add the disabled class instead. When a dropdown is activated, it will receive the active class and the menu will show.

+

Headings can be created with the dropdown-heading class.

<div class="dropdown">
   <button type="button" class="dropdown-trigger">Dropdown</button>
   <div class="dropdown-menu">
@@ -66,6 +67,7 @@
     <a href="#" class="checked">Checked</a>
     <a href="#" class="disabled">Disabled</a>
     <hr>
+    <div class="dropdown-heading">Heading</div>
     <a href="#">More...</a>
   </div>
 </div>
@@ -80,6 +82,7 @@
       Checked
       Disabled
       

+      
Heading

       More...
     
   
diff --git a/source/css/dropdowns.css b/source/css/dropdowns.css
index 103c6df4f..637391c00 100644
--- a/source/css/dropdowns.css
+++ b/source/css/dropdowns.css
@@ -29,6 +29,8 @@
     min-width: var(--dropdown-min-width);
     max-width: var(--dropdown-max-width);
     max-height: var(--dropdown-max-height);
+    font-size: var(--dropdown-font-size);
+    font-weight: var(--dropdown-font-weight);
     background-color: var(--dropdown-bg-color);
     border: solid var(--dropdown-border-width) var(--dropdown-border-color);
     border-radius: var(--dropdown-border-radius);
@@ -37,6 +39,7 @@
     padding: var(--dropdown-padding-y) 0;
     overflow-y: auto;
     transform: translateZ(0);
+    user-select: none;
 
     & a {
       position: relative;
@@ -79,6 +82,14 @@
       border-top: solid var(--dropdown-divider-width) var(--dropdown-divider-color);
       margin: var(--dropdown-padding-y) 0;
     }
+
+    & .dropdown-heading {
+      font-size: var(--dropdown-heading-font-size);
+      font-weight: var(--dropdown-heading-font-weight);
+      color: var(--dropdown-heading-color);
+      padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + .5em);
+      cursor: default;
+    }
   }
 
   &.dropdown-top .dropdown-menu {
diff --git a/source/docs/dropdowns.md b/source/docs/dropdowns.md
index e15c3ff24..01635d6f9 100644
--- a/source/docs/dropdowns.md
+++ b/source/docs/dropdowns.md
@@ -12,6 +12,8 @@ Note the class names used for the main container, the trigger, and the menu. Add
 
 To disable a dropdown entirely, add the `disabled` property to the dropdown trigger if it’s a button. If it’s a link, add the `disabled` class instead. When a dropdown is activated, it will receive the `active` class and the menu will show.
 
+Headings can be created with the `dropdown-heading` class.
+
 ```html
 

   
@@ -22,6 +24,7 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
     Checked
     Disabled
     

+    
Heading

     More...
   

 
@@ -37,6 +40,7 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
       Checked
       Disabled
       

+      
Heading

       More...