
Bootswatch provides many out of the box Bootstrap themes. We plan on using this in Horizon to provide a theme that implements Google's Material Design. We plan on using this in Horizon to provide a theme that implements Google's Material Design. The 'material' theme gives an example of how to make use of a 3rd party theme using the theming functionality. In addition to incorporating a theme, loaded as a static asset using requirements.txt, it also gives examples of how to cleanly override styles, variables, icon fonts and Django templates. This theme is replacing 'blue' as the example of how to use a theme other than 'default'. Partially-Implements: blueprint horizon-theme-css-reorg Change-Id: I83753ca7f50d8e6d3051af4a7a929665e0de4d4d
183 lines
3.2 KiB
Plaintext
183 lines
3.2 KiB
Plaintext
// Readable 3.3.5
|
|
// Bootswatch
|
|
// -----------------------------------------------------
|
|
|
|
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
|
|
|
|
// Navbar =====================================================================
|
|
|
|
.navbar {
|
|
font-family: @headings-font-family;
|
|
|
|
&-nav,
|
|
&-form {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&-nav > li > a {
|
|
@margin-vertical: ((@navbar-height - 2*@padding-base-vertical - @line-height-computed - 2px) / 2);
|
|
margin: @margin-vertical 6px;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
border: 1px solid transparent;
|
|
border-radius: @border-radius-base;
|
|
|
|
&:hover {
|
|
border: 1px solid #ddd;
|
|
}
|
|
}
|
|
|
|
&-nav > .active > a,
|
|
&-nav > .active > a:hover {
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
&-default .navbar-nav > .active > a:hover {
|
|
color: @navbar-default-link-hover-color;
|
|
}
|
|
|
|
&-inverse .navbar-nav > .active > a:hover {
|
|
color: @navbar-inverse-link-hover-color;
|
|
}
|
|
|
|
&-brand {
|
|
padding-top: ((@navbar-height - 2*@font-size-large) / 2);
|
|
padding-bottom: ((@navbar-height - 2*@font-size-large) / 2);
|
|
line-height: 1.9;
|
|
}
|
|
}
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
.navbar {
|
|
.navbar-nav > li > a {
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: @grid-float-breakpoint - 1) {
|
|
.navbar {
|
|
.navbar-nav > li > a {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Buttons ====================================================================
|
|
|
|
.btn {
|
|
font-family: @headings-font-family;
|
|
}
|
|
|
|
// Typography =================================================================
|
|
|
|
// Tables =====================================================================
|
|
|
|
// Forms ======================================================================
|
|
|
|
legend {
|
|
font-family: @headings-font-family;
|
|
}
|
|
|
|
.input-group-addon {
|
|
font-family: @font-family-sans-serif;
|
|
}
|
|
|
|
// Navs =======================================================================
|
|
|
|
.nav {
|
|
.open > a,
|
|
.open > a:hover,
|
|
.open > a:focus {
|
|
border: 1px solid #ddd;
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
|
|
font-family: @headings-font-family;
|
|
|
|
&-lg > li > a,
|
|
&-lg > li > span {
|
|
padding: 14px 24px;
|
|
}
|
|
}
|
|
|
|
.pager {
|
|
|
|
font-family: @headings-font-family;
|
|
|
|
a {
|
|
color: @text-color;
|
|
}
|
|
|
|
a:hover {
|
|
border-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
.disabled a {
|
|
border-color: @pager-border;
|
|
}
|
|
}
|
|
|
|
// Indicators =================================================================
|
|
|
|
.close {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
opacity: 0.4;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #fff;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
.alert-link {
|
|
color: @alert-success-text;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-family: @headings-font-family;
|
|
font-weight: normal;
|
|
|
|
&-default {
|
|
border: 1px solid #ddd;
|
|
color: @text-color;
|
|
}
|
|
|
|
}
|
|
|
|
.badge {
|
|
padding: 1px 7px 5px;
|
|
vertical-align: 2px;
|
|
font-family: @headings-font-family;
|
|
font-weight: normal;
|
|
}
|
|
|
|
// Progress bars ==============================================================
|
|
|
|
// Containers =================================================================
|
|
|
|
.panel {
|
|
.box-shadow(none);
|
|
|
|
&-default {
|
|
.close {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
.close {
|
|
color: @text-color;
|
|
}
|
|
}
|