Commit 5e15470d authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon
Browse files

Bug 1674518: Design changes for themes

Change-Id: Ib22e09ecc91221f5a42f2d2b16f614c8b067a84a
behatnotneeded: design changes only
parent ff4a9a9d
......@@ -74,6 +74,7 @@
padding: 0 8px;
line-height: 2em;
margin-top: 9px;
margin-bottom: 9px;
&:hover,
&:focus {
@include transition-duration(0.3s);
......
......@@ -581,6 +581,11 @@ h4.list-group-item-heading {
a {
display: block;
&:focus,
&:hover {
text-decoration: none;
}
}
&.list-small {
......
......@@ -4,7 +4,7 @@
.user-icon {
padding: 0;
position: absolute;
margin: 7px 0 7px 9px;
margin: 4px 0 5px 9px;
z-index: 3;
left: 45px;
display: block;
......@@ -19,25 +19,37 @@
margin: 0;
border-color: $navbar-default-toggle-border-color;
border-left-width: 0;
border-radius: 0;
border-radius: 3px;
min-width: 45px;
color: $navbar-default-toggle-icon-bar-bg;
padding: 6px 10px;
background-color: $navbar-default-toggle-hover-bg;
&:hover,
&:focus {
background-color: $navbar-default-toggle-hover-bg;
}
&.collapsed {
background-color: transparent;
&:hover,
&:focus {
background-color: $navbar-default-toggle-hover-bg;
}
}
&.search-toggle {
@media (min-width: $screen-sm-min) {
display: none;
}
.icon {
color: $navbar-default-link-hover-color;
color: $navbar-default-link-color;
}
}
&.user-toggle {
padding-left: 45px;
padding-left: 40px;
background-color: transparent;
@media (min-width: $screen-sm-min) {
border-left-width: 1px;
}
......
......@@ -30,7 +30,7 @@
// if container is directly after header, then it will need a margin
+ .container {
@media (min-width: $screen-sm-min) {
margin-top: 50px;
margin-top: 30px;
}
}
}
......@@ -11,7 +11,7 @@ body {
}
.main {
margin: 0px 0 20px;
padding-top: 20px;
padding-top: 30px;
padding-bottom: 0;
@media (min-width: $screen-sm-min) {
padding-bottom:50px;
......@@ -136,4 +136,3 @@ body {
.forumfooter {
margin: 15px 0;
}
......@@ -13,6 +13,7 @@
.navbar-main {
margin-bottom: 0;
> .container {
position: relative;
}
......@@ -23,7 +24,7 @@
.nav-toggle-area {
float: right;
padding: 7px 0;
padding: 10px 0;
}
.navbar-collapse {
......
......@@ -14,14 +14,21 @@
.login-link a {
margin-left: 15px;
padding: 7px 15px;
color: $navbar-default-link-color;
&:focus,
&:hover {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
}
}
// Header search form
.navbar-form.navbar-collapse {
padding: 15px 0 15px 15px;
padding: 15px;
margin-bottom: 0;
border-bottom-width: 0;
border: 0;
@media (min-width: $screen-sm-min) {
position: absolute;
display: block;
......@@ -48,7 +55,7 @@
float: left;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
border-left: 1px solid $btn-default-border;
margin-left: -1px;
@media (min-width: $screen-sm-min) {
float: right;
......@@ -56,3 +63,9 @@
}
}
}
.navbar-default {
border-left: 0;
border-right: 0;
border-top: 0;
}
......@@ -6,10 +6,10 @@
src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'),
url('#{$fa-font-path}/fontawesome-webfont.otf?v=#{$fa-version}') format('opentype'),
url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff');
font-weight: normal;
font-style: normal;
}
......@@ -16,10 +16,10 @@ $opensans: (
);
$robotoslab: (
RobotoSlab-Thin: $thin,
RobotoSlab-Light: $light,
RobotoSlab-Regular: $regular,
RobotoSlab-Bold: $bold
robotoslab-thin: $thin,
robotoslab-light: $light,
robotoslab-regular: $regular,
robotoslab-bold: $bold
);
......@@ -27,11 +27,12 @@ $robotoslab: (
@font-face {
font-family: 'Open Sans';
src: url('#{$font-path}/opensans/#{$fontname}.eot');
src: url('#{$font-path}/opensans/#{$fontname}.eot') format('embedded-opentype'),
src: url('#{$font-path}/opensans/#{$fontname}.eot?#iefix') format('embedded-opentype'),
url('#{$font-path}/opensans/#{$fontname}.woff2') format('woff2'),
url('#{$font-path}/opensans/#{$fontname}.woff') format('woff'),
url('#{$font-path}/opensans/#{$fontname}.svg##{$fontname}') format('svg'),
url('#{$font-path}/opensans/#{$fontname}.otf') format('opentype'),
url('#{$font-path}/opensans/#{$fontname}.ttf') format('truetype'),
url('#{$font-path}/opensans/#{$fontname}.svg##{$fontname}') format('svg');
url('#{$font-path}/opensans/#{$fontname}.woff') format('woff');
font-weight: nth($style, 1);
font-style: nth($style, 2);
}
......@@ -40,7 +41,13 @@ $robotoslab: (
@each $fontname, $style in $robotoslab {
@font-face {
font-family: 'Roboto Slab';
src: url('#{$font-path}/robotoslab/#{$fontname}.ttf') format('truetype');
src: url('#{$font-path}/robotoslab/#{$fontname}.eot');
src: url('#{$font-path}/robotoslab/#{$fontname}.eot?#iefix') format('embedded-opentype'),
url('#{$font-path}/robotoslab/#{$fontname}.woff2') format('woff2'),
url('#{$font-path}/robotoslab/#{$fontname}.svg##{$fontname}') format('svg'),
url('#{$font-path}/robotoslab/#{$fontname}.otf') format('opentype'),
url('#{$font-path}/robotoslab/#{$fontname}.ttf') format('truetype'),
url('#{$font-path}/robotoslab/#{$fontname}.woff') format('woff');
font-weight: nth($style, 1);
font-style: nth($style, 2);
}
......
......@@ -25,7 +25,7 @@ h1 {
// Add padding if there is no navigation
.header + .container h1 {
padding-top: 20px;
padding-top: 10px;
}
.page-header {
......@@ -283,3 +283,35 @@ pre {
}
}
}
/* headings in html entered by user neutralised */
.myblogs,
.content-text,
.panel-body,
#resumefieldform_coverletterdisplay_container,
#resumefieldform_interestdisplay_container,
.note-name div,
.view-description,
.forum-post .postedits,
.mce-content-body {
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-base;
font-weight: bold;
color: $text-color;
/* but not some titles */
&.list-group-item-heading,
&.title {
font-family: $headings-font-family;
font-weight: $headings-font-weight;
color: $headings-color;
}
}
/* remove border bottom, padding and margin for h1 */
h1 {
border-bottom: 0;
padding: 0 !important;
margin-bottom: 10px;
}
}
......@@ -386,15 +386,15 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height: none !default;
$navbar-default-color: #777 !default;
$navbar-default-color: $link-color !default;
$navbar-default-bg: #fff !default;
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
// Navbar links
$navbar-default-link-color: $text-color !default;
$navbar-default-link-hover-color: #333 !default;
$navbar-default-link-color: $link-color !default;
$navbar-default-link-hover-color: $link-hover-color !default;
$navbar-default-link-hover-bg: #F1F1F1 !default;
$navbar-default-link-active-color: #555 !default;
$navbar-default-link-active-color: #333 !default;
$navbar-default-link-active-bg: darken(#F1F1F1, 2%) !default;
$navbar-default-link-disabled-color: #ccc !default;
$navbar-default-link-disabled-bg: transparent !default;
......@@ -406,8 +406,8 @@ $navbar-default-brand-hover-bg: transparent !default;
// Navbar toggle
$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg !default;
$navbar-default-toggle-icon-bar-bg: $gray !default;
$navbar-default-toggle-border-color: #ddd !default;
$navbar-default-toggle-icon-bar-bg: $link-color !default;
$navbar-default-toggle-border-color: transparent !default;
// Inverted navbar
......@@ -421,7 +421,7 @@ $navbar-inverse-link-color: $link-color !default;
$navbar-inverse-link-hover-color: $link-hover-color !default;
$navbar-inverse-link-hover-bg: darken($navbar-inverse-bg, 5%) !default;
$navbar-inverse-link-active-color: $text-color !default;
$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg !default;
$navbar-inverse-link-active-bg: #F1F1F1 !default;
$navbar-inverse-link-disabled-color: #444 !default;
$navbar-inverse-link-disabled-bg: transparent !default;
......
......@@ -14,8 +14,26 @@
border-color: transparent;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wkPAhEFWvh1jAAAAA1JREFUCNdjYGBgcAAAAEUAQT9reqQAAAAASUVORK5CYII=') {$data.background};
.navbar-toggle:focus,
.navbar-toggle.collapsed:focus,
.navbar-toggle.collapsed:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
color: #333;
background-color: #F1F1F1;
}
.navbar-toggle:hover .icon,
.navbar-toggle:focus .icon,
.navbar-toggle.collapsed:focus .icon,
.navbar-toggle.collapsed:hover .icon,
.navbar-default .navbar-toggle:focus .icon,
.navbar-default .navbar-toggle:hover .icon {
color: #333;
}
@media (max-width: 767px) {
.search-toggle.navbar-toggle .icon {
color: {$data.backgroundfg};
}
}
.navbar-main .navbar-nav > li > a {
......@@ -25,22 +43,31 @@
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
color: #333;
background-color: #f9f9f9;
color: {$data.navfg};
background-color: {$data.navbg};
}
.navbar-main .navbar-nav > li.active > a {
font-weight: bold;
color: {$data.navfg};
background-color: {$data.navbg};
}
.navbar-main .navbar-nav > li.active > a:focus,
.navbar-main .navbar-nav > li.active > a:hover {
font-weight: bold;
color: {$data.navfg};
background-color: {$data.navbg};
}
.navbar-toggle.navbar-showchildren .icon {
color: {$data.navfg};
}
.navbar-main .navbar-nav .navbar-showchildren,
.navbar-main .navbar-nav > .active .navbar-showchildren,
.navbar-toggle.navbar-showchildren:hover,
.navbar-toggle.navbar-showchildren:focus {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wkPAhEFWvh1jAAAAA1JREFUCNdjYGBgcAAAAEUAQT9reqQAAAAASUVORK5CYII=') {$data.background};
background-color: transparent;
}
.navbar-toggle.navbar-showchildren:hover .icon,
......@@ -49,19 +76,42 @@
}
.navbar-main .child-nav > li > a {
color: {$data.navbg};
background-color: {$data.navfg};
color: {$data.navfg};
background-color: {$data.navbg};
font-size: 13px;
}
.navbar-main .child-nav > li > a:hover,
.navbar-main .child-nav > li > a:focus {
color: #333;
background-color: #f9f9f9;
background-color: #F1F1F1;
}
.navbar-main .child-nav .active > a {
color: {$data.navfg};
background-color: {$data.navbg};
}
.navbar-main .child-nav .active > a:hover,
.navbar-main .child-nav .active > a:focus {
color: #333;
background-color: #F1F1F1;
}
.topright-menu .login-link a {
color: {$data.navfg};
background-color: {$data.navbg};
}
.topright-menu .login-link a:focus,
.topright-menu .login-link a:hover {
color: #333;
background-color: #F1F1F1;
}
.modal-docked .modal-header,
.modal-header {
background: {$data.background};
color: {$data.backgroundfg};
}
.dashboard-widget-container .circle-bg,
......@@ -77,7 +127,7 @@
a.panel-footer:hover .icon.pull-right,
.modal-docked .modal-header .close:hover .times,
.modal-docked .modal-header .close:focus .times {
color: #666;
color: #767676;
}
@media (max-width: 767px) {
......@@ -93,6 +143,8 @@ a.panel-footer:hover .icon.pull-right,
.dashboard-widget-container .logged-in .widget-detail,
.modal-docked .modal-header,
.modal-header,
.modal-docked .modal-header a,
.modal-docked .modal-header h4,
.close,
.modal-header .close:focus .times,
.modal-header .close:hover .times,
......@@ -157,12 +209,19 @@ a:focus,
color: {$data.link};
}
a:focus, a:hover {
text-decoration-color: {$data.link};
}
.btn-default, a.btn-default {
color: #333;
}
.btn-primary,
a.btn-primary {
background: {$data.background};
background-color: {$data.background};
color: {$data.backgroundfg};
border-color: #ccc;
border-color: transparent;
}
.btn-primary.active,
.btn-primary.focus,
......@@ -170,7 +229,7 @@ a.btn-primary {
.btn-primary:focus,
.btn-primary:hover,
.open > .btn-primary.dropdown-toggle {
border-color: #ccc;
border-color: #CCCCCC;
color: #333;
background-color: #e0e0e0;
}
......@@ -201,7 +260,7 @@ a.admin-site {
}
.pagination > li > a,
.pagination> li > span {
color: #666;
color: #767676;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
......@@ -210,8 +269,8 @@ a.admin-site {
color: #333;
}
.pagination >.active > span {
background-color: #666;
border-color: #666;
background-color: #767676;
border-color: #767676;
}
.pagination >.active > span:hover,
.pagination >.active > span:focus {
......@@ -219,5 +278,5 @@ a.admin-site {
}
.custom-dropdown > ul > li > span {
background-color: #666;
background-color: #767676;
}
{include file="header.tpl"}
<a class="btn btn-lg btn-default btn-with-heading" href="{$WWWROOT}skin/index.php">
<span class="icon icon-magic icon-flip-horizontal icon-lg left" role="presentation" aria-hidden="true"></span>
{str tag=manageskins section=skin}
</a>
{include file="view/editviewtabs.tpl" selected='skin' new=$new issiteview=$issiteview}
<div class="subpage">
......@@ -70,7 +65,12 @@
</div>
</div>
<div class="manage-skins-btn">
<a class="btn btn-default" href="{$WWWROOT}skin/index.php">
<span class="icon icon-magic icon-flip-horizontal icon-lg left" role="presentation" aria-hidden="true"></span>
{str tag=manageskins section=skin}
</a>
</div>
</div>
<div class="col-md-9">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment