Commit 1d1bb649 authored by Evonne's avatar Evonne Committed by Robert Lyon
Browse files

Bug 1845104 Modern theme changes

- removed redundant styles
- reconvert files to make macros work on windows (has to do with woff)
- put necessary changes back into raw
- put in OFL file for font Raleway

behatnotneeded

Change-Id: If1a3eb4bfba86ec18f3f0e38104b79e6642048d0
parent aef1675e
.icon {
&.text-danger,
&.text-success,
&.text-warning {
color: $theme-text-color;
}
}
// Makes the label red when a form error is shown // Makes the label red when a form error is shown
.has-error { .has-error {
label { label {
...@@ -13,31 +5,9 @@ ...@@ -13,31 +5,9 @@
} }
} }
// Lighten the Administration link in the menu bar in the admin area // logged out login box help icon needs the right colour
div.admin-title a {
color:#FFFFFF;
}
.loggedout { .loggedout {
.help .icon-info-circle { .help .icon-info-circle {
color: inherit; color: inherit;
} }
} }
// Remove the weird smaller button in the approve friend request box
.btn-text,
button.btn-text:not(:disabled):not(.disabled) {
border: 0;
box-shadow: none;
&:active {
box-shadow: none;
background-color: transparent;
border-width: 0;
color: inherit;
}
}
#searchviews_matchalltags_container {
input {
margin-top: -20px;
}
}
.arrow-bar {
background-color: $arrow-bar-bg;
.arrow {
background-color: $arrow-color;
&:after {
border-left: 14px solid $arrow-color;
}
.text {
color: $arrow-text-color;
}
}
}
.nav-inpage {
&.nav > li {
> a, button {
color: $arrow-link-color;
&:hover,
&:focus {
background: scale-color($arrow-bar-bg, $lightness: 5%);
color: $arrow-link-hover-color;
}
}
&.active > a,
&.active > button {
color: $theme-text-color;
background: $arrow-link-background-color;
&:hover,
&:focus {
color: $arrow-link-active-color;
}
}
}
}
#close_site_submit {
&.btn {
border-color: $danger;
color: $danger;
background-color: scale-color($danger, $lightness: 70%);
&:hover,
&:focus {
color:#FFFFFF;
background-color: $danger;
}
}
}
.btn-group {
&.btn-toolbar {
&.btn-group-top{
.active {
background-color: $theme-primary-color;
color: #FFF;
}
}
}
}
// Tinymce primary button
.tox-dialog,
.mce-widget,
.mce-reset {
.tox-primary {
background-color: $btn-primary-bg;
border-color: $btn-primary-border;
font-family: $font-family-sans-serif;
&:hover {
background-color: scale-color($btn-primary-bg, $lightness: -5%);
}
.mce-txt {
color: $btn-primary-color;
}
}
// Vertically center Raleway font
.mce-abs-layout-item button .mce-txt {
vertical-align: baseline;
}
}
.modal-tinymce {
.pieform {
button.btn-secondary {
background-color: $btn-primary-bg;
border-color: $btn-primary-border;
font-family: $font-family-sans-serif;
color: $btn-primary-color;
&:hover {
background-color: scale-color($btn-primary-bg, $lightness: -5%);
}
}
}
}
// Navigation toggle styles
.nav-toggle-area {
.user-icon {
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
}
}
.navbar-toggle {
color: $navbar-toggle-color;
background-color: $navbar-toggle-bg;
background-image: none;
border: 1px solid transparent;
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
&.collapsed {
background-color: transparent;
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
}
&.search-toggle {
@include media-breakpoint-up(md) {
display: none;
}
.icon {
color: $navbar-toggle-color;
background-color: $navbar-toggle-bg;
}
}
&.user-toggle {
color: $navbar-toggle-color;
background-color: $navbar-toggle-bg;
@include media-breakpoint-up(md) {
border-left-width: 1px;
}
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
}
&:last-of-type {
border-left-width: 1px;
}
}
// navbar menu children toggles
.nav {
.navbar-showchildren {
color: $navbar-inverse-toggle-color;
background: $navbar-inverse-toggle-bg;
border: 0;
&:hover,
&:focus {
background: $navbar-inverse-toggle-hover-bg;
.icon {
color: $navbar-inverse-toggle-hover-color;
}
}
.active & {
background-color: $navbar-inverse-toggle-active-bg;
.icon {
color: $navbar-inverse-toggle-active-color;
}
}
}
}
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
.card-header { .card-header {
background-color: $theme-secondary-color; background-color: $theme-secondary-color;
border-color: $theme-secondary-color; border-color: $theme-secondary-color;
color: #FFF; color: $white;
.text-midtone { .text-midtone {
color: #FFF; color: $white;
} }
} }
} }
.navbar-main {
.navbar-collapse {
border: 1px solid transparent;
@include media-breakpoint-down(sm) {
border-width: 1px 0 0 0;
}
&.navbar-form {
border: 0;
}
}
// Top level navigation items use colour variables from "navbar-default"
.navbar-nav {
> li > a {
color: $navbar-default-link-color;
background-color: $navbar-default-link-bg;
border-top: 1px solid $navbar-default-link-border;
border-bottom: 1px solid $navbar-default-link-border;
&:hover,
&:focus {
background-color: $navbar-default-link-hover-bg;
color: $navbar-default-link-hover-color;
}
@include media-breakpoint-up(md) {
border: 1px solid $navbar-default-link-border;
}
}
> .active > a {
background-color: $navbar-default-active-bg;
color: $navbar-default-active-color;
&:hover,
&:focus {
background-color: $navbar-default-active-bg;
color: $navbar-default-active-color;
}
}
}
// Child navigation items
.child-nav {
li > a {
color: $navbar-inverse-link-color;
background-color: $navbar-inverse-bg;
&:hover,
&:focus {
background-color: $navbar-inverse-link-hover-bg;
color: $navbar-inverse-link-hover-color;
}
}
.active > a {
background-color: $navbar-inverse-link-active-bg;
color: $navbar-inverse-link-active-color;
&:hover,
&:focus {
background-color: $navbar-inverse-link-hover-bg;
color: $navbar-inverse-link-hover-color;
}
}
}
}
/*
* Modification to bootstraps default navbar components
*/
// Login link and language form
.topright-menu {
.login-link a {
color: $navbar-default-link-color;
&:focus,
&:hover {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
}
}
.navbar-default {
background-color: $navbar-default-bg;
border-color: $navbar-default-border;
}
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
text-decoration: none;
}
.navbar-messages-count {
background-color: $navbar-messages-count-bg;
color: $navbar-messages-count-color;
}
}
$font-path: '../fonts'; $font-path: '../fonts';
$thin: 100, normal;
$light: 300, normal; $light: 300, normal;
$lightItalic: 300, italic; $lightItalic: 300, italic;
$regular: normal, normal; $regular: normal, normal;
$italic: normal, italic; $italic: normal, italic;
$bold: 700, bold; $bold: 700, normal;
$raleway: ( $raleway: (
raleway-thin: $thin,
raleway-light: $light, raleway-light: $light,
raleway-lightitalic: $lightItalic, raleway-lightitalic: $lightItalic,
raleway-regular: $regular, raleway-regular: $regular,
...@@ -21,10 +19,10 @@ $raleway: ( ...@@ -21,10 +19,10 @@ $raleway: (
font-family: 'Raleway'; font-family: 'Raleway';
src: url('#{$font-path}/raleway/#{$fontname}.eot'); src: url('#{$font-path}/raleway/#{$fontname}.eot');
src: url('#{$font-path}/raleway/#{$fontname}.eot?#iefix') format('embedded-opentype'), src: url('#{$font-path}/raleway/#{$fontname}.eot?#iefix') format('embedded-opentype'),
url('#{$font-path}/raleway/#{$fontname}.woff2') format('woff2'),
url('#{$font-path}/raleway/#{$fontname}.svg##{$fontname}') format('svg'), url('#{$font-path}/raleway/#{$fontname}.svg##{$fontname}') format('svg'),
url('#{$font-path}/raleway/#{$fontname}.otf') format('opentype'), url('#{$font-path}/raleway/#{$fontname}.otf') format('opentype'),
url('#{$font-path}/raleway/#{$fontname}.ttf') format('truetype'), url('#{$font-path}/raleway/#{$fontname}.ttf') format('truetype'),
url('#{$font-path}/raleway/#{$fontname}.woff2') format('woff2'),
url('#{$font-path}/raleway/#{$fontname}.woff') format('woff'); url('#{$font-path}/raleway/#{$fontname}.woff') format('woff');
font-weight: nth($style, 1); font-weight: nth($style, 1);
font-style: nth($style, 2); font-style: nth($style, 2);
......
...@@ -12,12 +12,12 @@ $link-hover-color: scale-color($link-color, $lightness: ...@@ -12,12 +12,12 @@ $link-hover-color: scale-color($link-color, $lightness:
// Typography // Typography
$font-family-sans-serif: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-serif: $font-family-sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif; $font-family-base: $font-family-sans-serif;
$headings-font-family: $font-family-sans-serif; $headings-font-family: $font-family-sans-serif;
$headings-font-weight: 600; $headings-font-weight: 700;
// Forms // Forms
$input-disabled-bg: $gray-100; $input-disabled-bg: $gray-100;
......
...@@ -4,14 +4,8 @@ ...@@ -4,14 +4,8 @@
@import "../layout/card/card-header"; @import "../layout/card/card-header";
@import "../layout/card/card-secondary"; @import "../layout/card/card-secondary";
@import "../layout/nav/main-nav";
@import "../layout/nav/navbar";
@import "../form/form"; @import "../form/form";
@import "../components/arrow-bar";
@import "../components/btn";
@import "../components/user-icon"; @import "../components/user-icon";
@import "../components/toggles";
@import "../features/dashboard-widget"; @import "../features/dashboard-widget";
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -541,3 +541,17 @@ td.action-list-copy { ...@@ -541,3 +541,17 @@ td.action-list-copy {
} }
} }
} }
// Admin
#close_site_submit {
&.btn {
border-color: $danger;
color: $white;
background-color: $danger;
&:hover,
&:focus {
color: $white;
background-color: scale-color($danger, $lightness: -10%);
}
}
}
...@@ -82,6 +82,9 @@ $width-sm: 90%; ...@@ -82,6 +82,9 @@ $width-sm: 90%;
} }
.btn.submit { .btn.submit {
margin-top: 15px; margin-top: 15px;
&.unselect {
margin-top: 0;
}
} }
.artefactchooser-search { .artefactchooser-search {
.btn.submit { .btn.submit {
...@@ -183,16 +186,10 @@ $width-sm: 90%; ...@@ -183,16 +186,10 @@ $width-sm: 90%;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
top: 1px; top: 1px;
left: -29px; left: -26px;
padding: 10px 7px 9px; padding: 8px 7px 14px;
background: $modal-header-color; background: $modal-header-color;
border: 1px solid $modal-header-border-color; border: 0;
border-right:0;
@include media-breakpoint-down(md) {
left:-22px;
padding: 10px 4px 9px 3px;
}
.times { .times {
color: $theme-text-midtone-color; color: $theme-text-midtone-color;
opacity:0.4; opacity:0.4;
......
$font-path: '../../raw/fonts'; $font-path: '../../raw/fonts';
$thin: 100, normal;
$light: 300, normal; $light: 300, normal;
$lightItalic: 300, italic; $lightItalic: 300, italic;
$regular: normal, normal; $regular: normal, normal;
...@@ -16,7 +15,6 @@ $opensans: ( ...@@ -16,7 +15,6 @@ $opensans: (
); );
$robotoslab: ( $robotoslab: (
robotoslab-thin: $thin,
robotoslab-light: $light, robotoslab-light: $light,
robotoslab-regular: $regular, robotoslab-regular: $regular,
robotoslab-bold: $bold robotoslab-bold: $bold
......
...@@ -273,7 +273,7 @@ table.table tr { ...@@ -273,7 +273,7 @@ table.table tr {
vertical-align: bottom; vertical-align: bottom;
margin: 5px; margin: 5px;
font-size: 16px; font-size: 16px;
font-weight: 100; font-weight: 300;
} }
// Unset border top on the first row of the table // Unset border top on the first row of the table
......
Markdown is supported
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