openstack/deb-horizon
Code Issues Proposed changes

Material Theme: Buttons need border radius

Browse Source 
Material buttons actually have a border radius:
http://preview.tinyurl.com/zw5ftjf

Theme Preview Pages should use Font Awesome
H2 should not be manually overridden

Change-Id: I8951e04d463ef897815d8a46ad93e5d2327d4793
Closes-bug: #1528369
Closes-bug: #1528368
Closes-bug: #1528372
This commit is contained in:
Diana Whitten 2015-12-21 15:39:33 -07:00
parent 83b1427a43
commit 7c242e18d0
6 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
View File

@ -42,7 +42,7 @@
<li class="active"><a translate href="#">Active</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -60,7 +60,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a translate href="#">Link</a></li>
<li class="dropdown">
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -89,7 +89,7 @@
<li class="active"><a translate href="#">Active</a></li>
<li><a translate href="#">Link</a></li>
<li class="dropdown">
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -107,7 +107,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a translate href="#">Link</a></li>
<li class="dropdown">
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -160,7 +160,7 @@
<div class="btn-toolbar bs-component">
<div class="btn-group">
<button translate type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -172,7 +172,7 @@
<div class="btn-group">
<button translate type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -184,7 +184,7 @@
<div class="btn-group">
<button translate type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -196,7 +196,7 @@
<div class="btn-group">
<button translate type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -208,7 +208,7 @@
<div class="btn-group">
<button translate type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -224,7 +224,7 @@
<div class="btn-toolbar bs-component">
<div class="btn-group">
<button translate type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -235,7 +235,7 @@
</div>
<div class="btn-group">
<button translate type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -246,7 +246,7 @@
</div>
<div class="btn-group">
<button translate type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
<li><a translate href="#">Another action</a></li>
@ -299,7 +299,7 @@
<div class="btn-group">
<button translate type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu">
<li><a translate href="#">Dropdown link</a></li>
@ -724,7 +724,7 @@
<li class="disabled"><a translate>Disabled</a></li>
<li class="dropdown">
<a translate class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
Dropdown <span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a translate href="#dropdown1" data-toggle="tab">Action</a></li>
@ -758,7 +758,7 @@
<li class="disabled"><a translate href="#">Disabled</a></li>
<li class="dropdown">
<a translate class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
Dropdown <span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>
@ -778,7 +778,7 @@
<li class="disabled"><a translate href="#">Disabled</a></li>
<li class="dropdown">
<a translate class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
Dropdown <span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a translate href="#">Action</a></li>

10
openstack_dashboard/static/dashboard/scss/_mixins.scss
View File

@ -17,3 +17,13 @@
@content;
}
}
@mixin horizontal-center {
float: none;
margin: 0 auto;
}
@mixin vertical-center {
display: inline-block;
vertical-align: middle;
}

7
openstack_dashboard/static/dashboard/scss/_util.scss
View File

@ -2,8 +2,11 @@
.row .horizontal-center,
.horizontal-center {
float: none;
margin: 0 auto;
@include horizontal-center();
}
.vertical-center {
@include vertical-center();
}
/* new clearfix */

4
openstack_dashboard/themes/material/static/bootstrap/_variable_customizations.scss
View File

@ -30,10 +30,6 @@ $icon-font-svg-id: "material";
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$border-radius-base: 0;
$border-radius-small: 0;
//== Navbar
//
//##

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

@ -1,3 +1,5 @@
@import "/dashboard/scss/mixins";
// This file does a 1-1 mapping of each font-awesome icon in use to
// a corresponding Material Design Icon.
@ -64,3 +66,12 @@ $icon-swap: (
@extend .mdi-#{$mdi-icon};
}
}
.dropdown-toggle > {
&.btn-lg .fa-caret-down {
font-size: 1.2em;
}
.fa-caret-down {
@include vertical-center();
}
}

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

@ -39,6 +39,11 @@
z-index: 4;
}
// Border radius is unattractive here
.navbar {
border-radius: 0;
}
.navbar-brand {
svg {
fill: $navbar-inverse-link-active-color;