[Kimchi-devel] [PATCH] [Wok 1/3] Minor change in Wok Drop-Downs to fix text alignment with different icons and locales
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Wed Aug 24 22:03:57 UTC 2016
From: Samuel Guimarães <sguimaraes943 at gmail.com>
Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
ui/css/src/modules/_buttons.scss | 9 ++++
ui/css/src/modules/_menu-flat.scss | 44 +++++++++++++---
ui/css/wok.css | 102 ++++++++++++++++++++++++++++++++++---
3 files changed, 141 insertions(+), 14 deletions(-)
diff --git a/ui/css/src/modules/_buttons.scss b/ui/css/src/modules/_buttons.scss
index a8f9efa..34cee31 100644
--- a/ui/css/src/modules/_buttons.scss
+++ b/ui/css/src/modules/_buttons.scss
@@ -42,4 +42,13 @@
.btn-login {
@include button-variant($btn-login-color, $btn-login-bg, $btn-login-border);
+}
+
+.btn-group > span > .btn {
+ @include button-variant($btn-primary-color, $kimchi-dropdown, $kimchi-dropdown);
+ font-weight: 700;
+ font-size: $font-size-btn;
+ background: $kimchi-dropdown;
+ height: 40px;
+ padding: 4px 12px;
}
\ No newline at end of file
diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss
index ba9016b..0b0fa90 100644
--- a/ui/css/src/modules/_menu-flat.scss
+++ b/ui/css/src/modules/_menu-flat.scss
@@ -21,6 +21,30 @@
// Menu-Flat Drop-Down
// --------------------------------------------------
// Dropdown arrow/caret
+
+.btn-group > .menu-flat.dropdown,
+.btn-group > .menu-flat.dropup {
+ display: inline-block;
+ &.hidden {
+ display: none;
+ }
+}
+
+.btn-group > .menu-flat {
+ .btn,
+ .dropdown-menu {
+ min-width: 130px !important;
+ }
+}
+
+.btn-group > .menu-flat[class*="action"],
+.btn-group > .menu-flat[class*="actions"] {
+ .btn,
+ .dropdown-menu {
+ min-width: 160px !important;
+ }
+}
+
.menu-flat {
.btn {
background: $kimchi-dropdown !important;
@@ -29,9 +53,10 @@
font-family: $font-family-bold;
font-weight: 700;
font-size: $font-size-btn;
+ text-align: left;
position: relative;
height: 40px;
- padding: 4px 45px 5px 38px;
+ padding: 4px 45px 5px 45px;
& > i {
font-size: 22px;
vertical-align: bottom;
@@ -43,10 +68,15 @@
top: 0;
left: 6px;
}
+ // This rule will allow to use different icons for the drop-down button instead of the default .edit-alt class
+ & > i:first-child {
+ left: 12px;
+ text-align: center;
+ }
& > i:before {
line-height: 40px;
}
- .edit-alt {
+ span.edit-alt {
background: transparent url('#{$wok-icon-path}/edit-alt.svg') no-repeat 50% 50%;
background-size: 100%;
vertical-align: bottom;
@@ -79,7 +109,7 @@
text-decoration: inherit;
width: 1.2em;
height: 1.2em;
- margin: .5em;
+ margin: .5em .85em;
text-align: center;
font-variant: normal;
text-transform: none;
@@ -237,8 +267,8 @@
// 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 !important; // Reset the default from `.dropdown-menu`
+ right: 0 !important;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
@@ -248,8 +278,8 @@
// 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 !important;
+ right: auto !important;
}
// Dropdown section headers
diff --git a/ui/css/wok.css b/ui/css/wok.css
index 7411ffd..1774514 100644
--- a/ui/css/wok.css
+++ b/ui/css/wok.css
@@ -477,6 +477,88 @@ fieldset[disabled] .btn-login.active {
background-color: #fff;
}
+.btn-group > span > .btn {
+ color: #fff;
+ background-color: #4d4c4e;
+ border-color: #4d4c4e;
+ font-weight: 700;
+ font-size: 13.5pt;
+ background: #4d4c4e;
+ height: 40px;
+ padding: 4px 12px;
+}
+
+.btn-group > span > .btn:focus, .btn-group > span > .btn.focus {
+ color: #fff;
+ background-color: #343334;
+ border-color: #0d0d0d;
+}
+
+.btn-group > span > .btn:hover {
+ color: #fff;
+ background-color: #343334;
+ border-color: #2e2e2f;
+}
+
+.btn-group > span > .btn:active, .btn-group > span > .btn.active,
+.open > .btn-group > span > .btn.dropdown-toggle {
+ color: #fff;
+ background-color: #343334;
+ border-color: #2e2e2f;
+}
+
+.btn-group > span > .btn:active:hover, .btn-group > span > .btn:active:focus, .btn-group > span > .btn:active.focus, .btn-group > span > .btn.active:hover, .btn-group > span > .btn.active:focus, .btn-group > span > .btn.active.focus,
+.open > .btn-group > span > .btn.dropdown-toggle:hover,
+.open > .btn-group > span > .btn.dropdown-toggle:focus,
+.open > .btn-group > span > .btn.dropdown-toggle.focus {
+ color: #fff;
+ background-color: #222122;
+ border-color: #0d0d0d;
+}
+
+.btn-group > span > .btn:active, .btn-group > span > .btn.active,
+.open > .btn-group > span > .btn.dropdown-toggle {
+ background-image: none;
+}
+
+.btn-group > span > .btn.disabled, .btn-group > span > .btn.disabled:hover, .btn-group > span > .btn.disabled:focus, .btn-group > span > .btn.disabled.focus, .btn-group > span > .btn.disabled:active, .btn-group > span > .btn.disabled.active, .btn-group > span > .btn[disabled], .btn-group > span > .btn[disabled]:hover, .btn-group > span > .btn[disabled]:focus, .btn-group > span > .btn[disabled].focus, .btn-group > span > .btn[disabled]:active, .btn-group > span > .btn[disabled].active,
+fieldset[disabled] .btn-group > span > .btn,
+fieldset[disabled] .btn-group > span > .btn:hover,
+fieldset[disabled] .btn-group > span > .btn:focus,
+fieldset[disabled] .btn-group > span > .btn.focus,
+fieldset[disabled] .btn-group > span > .btn:active,
+fieldset[disabled] .btn-group > span > .btn.active {
+ background-color: #4d4c4e;
+ border-color: #4d4c4e;
+}
+
+.btn-group > span > .btn .badge {
+ color: #4d4c4e;
+ background-color: #fff;
+}
+
+.btn-group > .menu-flat.dropdown,
+.btn-group > .menu-flat.dropup {
+ display: inline-block;
+}
+
+.btn-group > .menu-flat.dropdown.hidden,
+.btn-group > .menu-flat.dropup.hidden {
+ display: none;
+}
+
+.btn-group > .menu-flat .btn,
+.btn-group > .menu-flat .dropdown-menu {
+ min-width: 130px !important;
+}
+
+.btn-group > .menu-flat[class*="action"] .btn,
+.btn-group > .menu-flat[class*="action"] .dropdown-menu,
+.btn-group > .menu-flat[class*="actions"] .btn,
+.btn-group > .menu-flat[class*="actions"] .dropdown-menu {
+ min-width: 160px !important;
+}
+
.menu-flat .btn {
background: #4d4c4e !important;
min-width: 160px;
@@ -484,9 +566,10 @@ fieldset[disabled] .btn-login.active {
font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 700;
font-size: 13.5pt;
+ text-align: left;
position: relative;
height: 40px;
- padding: 4px 45px 5px 38px;
+ padding: 4px 45px 5px 45px;
}
.menu-flat .btn > i {
@@ -501,11 +584,16 @@ fieldset[disabled] .btn-login.active {
left: 6px;
}
+.menu-flat .btn > i:first-child {
+ left: 12px;
+ text-align: center;
+}
+
.menu-flat .btn > i:before {
line-height: 40px;
}
-.menu-flat .btn .edit-alt {
+.menu-flat .btn span.edit-alt {
background: transparent url("/images/theme-default/edit-alt.svg") no-repeat 50% 50%;
background-size: 100%;
vertical-align: bottom;
@@ -540,7 +628,7 @@ fieldset[disabled] .btn-login.active {
text-decoration: inherit;
width: 1.2em;
height: 1.2em;
- margin: .5em;
+ margin: .5em .85em;
text-align: center;
font-variant: normal;
text-transform: none;
@@ -686,13 +774,13 @@ fieldset[disabled] .btn-login.active {
}
.dropdown-menu-right {
- left: auto;
- right: 0;
+ left: auto !important;
+ right: 0 !important;
}
.dropdown-menu-left {
- left: 0;
- right: auto;
+ left: 0 !important;
+ right: auto !important;
}
.dropdown-header {
--
2.5.5
More information about the Kimchi-devel
mailing list