[Kimchi-devel] [PATCH 2/2] [Wok] Fixed disabled state in dropdown-menu

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/css/src/modules/_menu-flat.scss | 379 +++++++++++++++++-------------------- 1 file changed, 172 insertions(+), 207 deletions(-) diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss index 102fb1e..0802c75 100644 --- a/ui/css/src/modules/_menu-flat.scss +++ b/ui/css/src/modules/_menu-flat.scss @@ -15,17 +15,12 @@ // See the License for the specific language governing permissions and // limitations under the License. // - @import '../vendor/bootstrap-sass/bootstrap/mixins'; - // // Menu-Flat Drop-Down // -------------------------------------------------- - // Dropdown arrow/caret - .menu-flat { - .btn { background: $kimchi-dropdown !important; min-width: 160px; @@ -36,53 +31,46 @@ position: relative; height: 40px; padding: 4px 45px 5px 38px; - & > i { - font-size: 22px; - vertical-align: bottom; - width: 26px; - height: 40px; - text-align: left; - display: block; - position: absolute; - top: 0; - left: 6px; + font-size: 22px; + vertical-align: bottom; + width: 26px; + height: 40px; + text-align: left; + display: block; + position: absolute; + top: 0; + left: 6px; } - & > i:before { line-height: 40px; } - - .edit-alt { - background: transparent url('#{$wok-icon-path}/edit-alt.svg') no-repeat 50% 50%; - background-size: 100%; - vertical-align: bottom; - width: 22px; - height: 40px; - display: block; - position: absolute; - top: 0; - left: 12px; + background: transparent url('#{$wok-icon-path}/edit-alt.svg') no-repeat 50% 50%; + background-size: 100%; + vertical-align: bottom; + width: 22px; + height: 40px; + display: block; + position: absolute; + top: 0; + left: 12px; } - } - .caret { - position: absolute; - top: 0; - right: 0; - display: block; - width: 40px; - height: 40px; - margin-left: 0; - vertical-align: middle; - border-top: 0; - border-top: 0 \9; - border-right: 0; - border-left: 0; - - &:before { + position: absolute; + top: 0; + right: 0; + display: block; + width: 40px; + height: 40px; + margin-left: 0; + vertical-align: middle; + border-top: 0; + border-top: 0 \9; + border-right: 0; + border-left: 0; + &:before { content: '\f078'; font: normal normal normal 14px/1 FontAwesome; speak: none; @@ -95,75 +83,64 @@ font-variant: normal; text-transform: none; line-height: 2em; - } - + } } - // The dropdown wrapper (div) &.dropup, &.dropdown { - position: relative; + position: relative; } - // Prevent the focus on the dropdown toggle when closing dropdowns .dropdown-toggle:focus { - outline: 0; + outline: 0; } - // The dropdown menu (ul) .dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: $zindex-dropdown; - display: none; // none by default, but block on "open" of the menu - float: left; - min-width: 160px; - padding: 0; - margin: 0; // override default ul - list-style: none; - font-size: $font-size-btn; - text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) - background-color: $menu-flat-dropdown-bg; - border: 0; - border-radius: 0; - box-shadow: none !important; - background-clip: padding-box; - - // Aligns the dropdown menu to right - // - // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` - &.pull-right { + position: absolute; + top: 100%; + left: 0; + z-index: $zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 0; + margin: 0; // override default ul + list-style: none; + font-size: $font-size-btn; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + background-color: $menu-flat-dropdown-bg; + border: 0; + border-radius: 0; + box-shadow: none !important; + background-clip: padding-box; + // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { right: 0; left: auto; - } - - // Dividers (basically an hr) within the dropdown - .divider { + } + // Dividers (basically an hr) within the dropdown + .divider { @include nav-divider($menu-flat-dropdown-divider-bg); - } - - > li.wok-hide-action-item { + } + > li.wok-hide-action-item { display: none; - } - - > li > a { + } + > li > a { border-top: 1px solid $menu-flat-dropdown-border; @include box-shadow(inset 0px 1px 0px 0px $menu-flat-dropdown-divider-bg); - } - - > li:first-child > a { + } + > li:first-child > a { border-top: 1px solid $menu-flat-dropdown-bg; box-shadow: none; - } - - > li.critical:last-child > a, - > li.critical:last-child > a:hover { + } + > li.critical:last-child > a, + > li.critical:last-child > a:hover { box-shadow: none; - } - - // Links within the dropdown menu - > li > a { + } + // Links within the dropdown menu + > li > a { cursor: pointer; display: block; padding: 4px 6px; @@ -172,98 +149,86 @@ line-height: $line-height-menu-flat; color: $menu-flat-text; white-space: nowrap; // prevent links from randomly breaking onto new lines - - > i { - font-size: 22px; - margin-left: 8px; - vertical-align: middle; - width: 26px; - height: 26px; - text-align: left; - display: inline-block; - } - - } + > i { + font-size: 22px; + margin-left: 8px; + vertical-align: middle; + width: 26px; + height: 26px; + text-align: left; + display: inline-block; + } + } } - // Hover/Focus state .dropdown-menu > li > a { - &:hover, - &:focus { - text-decoration: none; - color: $menu-flat-dropdown-link-hover-color; - background-color: $menu-flat-dropdown-link-hover-bg; - } + &:hover, + &:focus { + text-decoration: none; + color: $menu-flat-dropdown-link-hover-color; + background-color: $menu-flat-dropdown-link-hover-bg; + } } - // Active state .dropdown-menu > .active > a { - &, - &:hover, - &:focus { - color: $menu-flat-dropdown-link-active-color; - text-decoration: none; - outline: 0; - background-color: $menu-flat-dropdown-link-active-bg; - } + &, + &:hover, + &:focus { + color: $menu-flat-dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: $menu-flat-dropdown-link-active-bg; + } } - - .dropdown-menu > li.critical > a, .dropdown-menu > li.critical > a:hover { background: $menu-flat-dropdown-critical-bg; } - + .dropdown-menu > li.critical.disabled > a, + .dropdown-menu > li.critical.disabled > a:hover { + background-color: $menu-flat-dropdown-link-hover-bg; + } // Disabled state // // Gray out text and ensure the hover/focus state remains gray - .dropdown-menu > .disabled > a { - &, - &:hover, - &:focus { - color: $dropdown-link-disabled-color; - } - - // Nuke hover/focus effects - &:hover, - &:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - @include reset-filter; - cursor: $cursor-disabled; - } + &, + &:hover, + &:focus { + color: $dropdown-link-disabled-color; + } + // Nuke hover/focus effects + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter; + cursor: $cursor-disabled; + } } - // Open state for the dropdown &.open { - .btn { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + // Show the menu + > .dropdown-menu { + display: block; + } + .caret { + background: #3a393b; + } + .caret:before { + content: '\f077'; + } + // Remove the outline when :focus is triggered + > a { + outline: 0; } - - // Show the menu - > .dropdown-menu { - display: block; - } - - .caret { - background: #3a393b; - } - - .caret:before { - content: '\f077'; - } - - // Remove the outline when :focus is triggered - > a { - outline: 0; - } } - } // Menu positioning @@ -271,9 +236,10 @@ // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right { - left: auto; // Reset the default from `.dropdown-menu` - right: 0; + left: auto; // Reset the default from `.dropdown-menu` + right: 0; } + // With v3, we enabled auto-flipping if you have a dropdown within a right // aligned nav component. To enable the undoing of that, we provide an override // to restore the default dropdown menu alignment. @@ -281,72 +247,71 @@ // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left { - left: 0; - right: auto; + left: 0; + right: auto; } // Dropdown section headers .dropdown-header { - display: block; - padding: 3px 20px; - font-size: $font-size-small; - line-height: $line-height-base; - color: $dropdown-header-color; - white-space: nowrap; // as with > li > a + display: block; + padding: 3px 20px; + font-size: $font-size-small; + line-height: $line-height-base; + color: $dropdown-header-color; + white-space: nowrap; // as with > li > a } // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: ($zindex-dropdown - 10); + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: ($zindex-dropdown - 10); } // Right aligned dropdowns .pull-right > .dropdown-menu { - right: 0; - left: auto; + right: 0; + left: auto; } // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set, bro. // TODO: abstract this so that the navbar fixed styles are not placed here? - .dropup, .navbar-fixed-bottom .dropdown { - // Reverse the caret - .caret { - border-top: 0; - border-bottom: $caret-width-base dashed; - border-bottom: $caret-width-base solid \9; // IE8 - content: ""; - } - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 2px; - } + // Reverse the caret + .caret { + border-top: 0; + border-bottom: $caret-width-base dashed; + border-bottom: $caret-width-base solid \9; // IE8 + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } } - // Component alignment // // Reiterate per navbar.less and the modified component alignment there. - @media (min-width: $grid-float-breakpoint) { - .navbar-right { - .dropdown-menu { - right: 0; left: auto; - } - // Necessary for overrides of the default right aligned menu. - // Will remove come v4 in all likelihood. - .dropdown-menu-left { - left: 0; right: auto; + .navbar-right { + .dropdown-menu { + right: 0; + left: auto; + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + left: 0; + right: auto; + } } - } } -- 1.9.3