[Kimchi-devel] [PATCH 2/2] [Wok] Fixed disabled state in dropdown-menu
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Thu Dec 3 20:30:33 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
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
More information about the Kimchi-devel
mailing list