openstack/horizon
Code Issues Proposed changes

Material Design: New LI Tweaks

Browse Source 
Some things on the new LI needed tweaking for material design:

 * Help Icon Strangeness -- Snazz added
 * Material Icon Alignment -- Removed Custom Size
 * Required Icon Size Strangeness - Specificity Required

Change-Id: I09620f25192352ab47dd329e8a594a9fd091a6a3
partial-bug: 1538491
This commit is contained in:
Diana Whitten 2016-03-02 17:49:43 -07:00
parent be9023d86e
commit 6a72d2c44b
8 changed files with 66 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openstack_dashboard/static/dashboard/scss/components/_help_panel.scss
View File

@ -30,6 +30,7 @@ $help-panel-width: 400px;
&:active,
&:focus {
@extend .close;
box-shadow: none;
margin: $padding-xs-horizontal;
}

3
openstack_dashboard/static/dashboard/scss/components/_icons.scss
View File

@ -1,4 +1,5 @@
.hz-icon-required {
// Specificity Required
.fa.hz-icon-required {
font-size: 50%;
vertical-align: top;
color: $brand-primary;

21
openstack_dashboard/themes/material/static/bootstrap/_styles.scss
View File

@ -4,3 +4,24 @@
@import "/bootstrap/scss/bootstrap/mixins/vendor-prefixes";
@import "/horizon/lib/bootswatch/paper/bootswatch";
@import "/horizon/lib/roboto_fontface/css/roboto-fontface.scss";
// Patch to Paper
// Inside alerts, the text color of buttons aren't properly ignored
// https://github.com/thomaspark/bootswatch/issues/552
.alert a:not(.close).btn-primary {
color: $btn-primary-color;
}
.alert a:not(.close).btn-default {
color: $btn-default-color;
}
.alert a:not(.close).btn-info {
color: $btn-info-color;
}
.alert a:not(.close).btn-warning {
color: $btn-warning-color;
}
.alert a:not(.close).btn-danger {
color: $btn-danger-color;
}

10
openstack_dashboard/themes/material/static/horizon/_icons.scss
View File

@ -8,7 +8,6 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
.fa {
@extend .mdi;
font-size: $mdi-icon-size;
}
$icon-swap: (
@ -70,12 +69,3 @@ $icon-swap: (
@extend .mdi-#{$mdi-icon};
}
}
.dropdown-toggle > {
&.btn-lg .fa-caret-down {
font-size: 1.2em;
}
.fa-caret-down {
@include vertical-center();
}
}

2
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

@ -2,9 +2,9 @@
@import "components/context_selection";
@import "components/messages";
@import "components/hamburger";
@import "components/help_panel";
@import "components/magic_search";
@import "components/navbar";
@import "components/selection_menu";
@import "components/sidebar";
.login .splash-logo {

2
openstack_dashboard/themes/material/static/horizon/_variables.scss
View File

@ -3,5 +3,3 @@ $hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
$sidebar-animation: $hamburger-transition;
$alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
$mdi-icon-size: 1.3em;

41
openstack_dashboard/themes/material/static/horizon/components/_help_panel.scss Normal file
View File

@ -0,0 +1,41 @@
// Controls the size of the "?" icon on the right of the wizards
// Position the toggle above the content a bit so it doesn't
// cover up the words
$material-toggle-offset: -$font-size-h3;
.help-toggle {
z-index: 3;
&:not(.collapsed) {
&,
&:hover,
&:active,
&:focus {
margin-top: $material-toggle-offset;
margin-right: -$padding-xs-horizontal/2;
}
}
&,
&:active:hover,
&:hover,
&:active,
&:focus {
margin-top: $material-toggle-offset;
margin-right: -$padding-xs-horizontal/2;
background: none;
box-shadow: none;
color: $brand-primary;
}
}
#help-panel {
margin-top: $material-toggle-offset;
// Material is all about depth, lets add some
& > .well {
@extend .panel;
}
}

16
openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss
View File

@ -1,16 +0,0 @@
.selection-menu {
.dropdown-menu > li > a {
padding-left: $mdi-icon-size*2;
}
.dropdown-selected {
.dropdown-selected-icon {
left: $mdi-icon-size/4;
@media (min-width: $screen-sm) {
color: $brand-primary;
left: $mdi-icon-size/2;
}
}
}
}