Commit 01f29d8c authored by Evonne's avatar Evonne Committed by Robert Lyon
Browse files

Bug 1845104 Primary School theme changes

- remove redundant styles
- put necessary changes back to raw
- recalculate card-header colour backgrounds for gridstack
- realigning gridstack margins with page margins
- small tidying in raw

behatnotneeded

Change-Id: I21cbfee31344794560d17d121d306f8ba5ae6dc0
parent 6a0358f3
......@@ -20,3 +20,11 @@
}
}
}
// loading message in header
.loading-inner {
background: transparent;
.icon-spinner {
color: #fff;
}
}
.arrow-bar {
background-color: $arrow-bar-bg;
.arrow {
background-color: $arrow-color;
&:after {
border-left: 14px solid $arrow-color;
}
.text {
color: $arrow-text-color;
}
}
// to theme the Résumé nav and Groups nav green
&.resume,
&.group {
......@@ -18,53 +6,9 @@
.arrow {
background-color: $arrow-alt-color;
color: #FFF;
&:after {
border-left-color: $arrow-alt-color;
}
}
.nav-inpage {
&.nav > li {
> a, button {
color: $arrow-link-color;
&:hover,
&:focus {
background: $arrow-link-background-color;
color: $arrow-link-hover-color;
}
}
&.active > a,
&.active > button {
color: $arrow-link-active-color;
background: $arrow-link-background-color;
&:hover,
&:focus {
color: $arrow-link-active-color;
}
}
}
}
}
}
.nav-inpage {
&.nav > li {
> a, button {
color: $arrow-link-color;
&:hover,
&:focus {
background: $arrow-link-background-color;
color: $arrow-link-hover-color;
}
}
&.active > a,
&.active > button {
color: $arrow-link-active-color;
background: $arrow-link-background-color;
&:hover,
&:focus {
color: $arrow-link-active-color;
}
}
}
}
// using bootstrap popover to style the help content
.contextualHelp {
.help-dismiss {
color: $theme-primary-color;
}
}
.expand-indicator,
.move-indicator {
margin-left: -4px;
.card-secondary & {
color: #FFF;
}
}
.collapse-indicator {
color: scale-color($theme-primary-color, $lightness: 10%);
.collapsed & {
color: scale-color($theme-primary-color, $lightness: 10%);
}
a:hover &,
a:focus & {
color: $theme-primary-color;
}
}
//dash inner
//messages: inbox, sent
//admin: site options
//journals
.inboxblock .link-block,
.form-notificationlist h4 a,
.pieform-fieldset.collapsible h4 a,
.myblogs h5 a {
tr[data-toggle="collapse"],
a[data-toggle="collapse"] {
&:hover .collapse-indicator,
&:focus .collapse-indicator {
&:focus .collapse-indicator{
color: scale-color($theme-primary-color, $lightness: 10%);
}
.collapse-indicator {
......@@ -25,37 +27,51 @@
}
}
.collapse-indicator,
.collapsed .collapse-indicator {
color: $theme-primary-color;
}
a:focus .collapse-indicator,
a:hover .collapse-indicator {
color: scale-color($theme-primary-color, $lightness: 10%);
[data-toggle="collapse"].outer-link:focus ~ .collapse-indicator,
[data-toggle="collapse"].outer-link:hover ~ .collapse-indicator {
&.collapsed {
~ .collapse-indicator {
color: scale-color($theme-primary-color, $lightness: 10%);
}
}
&:hover,
&:focus {
~ .collapse-indicator {
color: $theme-primary-color;
}
}
}
// if indicators are in colour block titles then make it white
.card-secondary {
.card-header {
.move-indicator {
color: #FFFFFF !important;
}
.collapse-inline {
width: auto;
[data-toggle="collapse"].outer-link:focus ~ .collapse-indicator,
[data-toggle="collapse"].outer-link:hover ~ .collapse-indicator {
color: #FFFFFF;
&.collapsed {
~ .collapse-indicator {
color: #FFFFFF;
}
}
a:hover,
a:focus {
.collapse-indicator {
color: #FFFFFF;
}
}
}
.collapse-indicator {
color: #FFFFFF;
&:hover,
&:focus {
.collapsed & {
color: #FFFFFF;
}
a:hover &,
a:focus & {
color: #FFFFFF;
}
}
}
}
[data-toggle="collapse"].outer-link:focus ~ .collapse-indicator,
[data-toggle="collapse"].outer-link:hover ~ .collapse-indicator {
color: #FFFFFF;
}
......@@ -3,15 +3,3 @@
.list-group-item-heading {
font-family: $font-family-sans-serif;
}
// Attachment list
.list-group-item-link {
padding: 0;
a {
font-size: 14px;
color: $link-color;
small {
color: #666;
}
}
}
\ No newline at end of file
.blockinstance {
&.configure {
.modal-header,
.mce-panel .mce-window-head {
.close,
.mce-close {
opacity: 1;
background-color: $theme-primary-color;
border-color: $theme-primary-color;
left: -29px;
&:hover,
&:focus {
background-color: scale-color($theme-primary-color, $lightness: 5%);
border-color: scale-color($theme-primary-color, $lightness: 5%);
.times {
opacity: 1;
}
}
.times {
opacity: 0.8;
font-size: 25px;
color: #FFFFFF;
}
}
}
}
}
// 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;
}
}
}
}
.form-group {
.form-group {
//advanced collapsible toggle in form groups
&.collapsible-group {
legend {
top: 0;
right: 10px;
h4 a {
padding: 10px 15px !important;
.icon {
margin-top: 0 !important;
margin-left: 3px;
}
}
}
// legend {
// top: 0;
// right: 10px;
// h4 a {
// padding: 10px 15px !important;
// .icon {
// margin-top: 0 !important;
// margin-left: 3px;
// }
// }
// }
.advanced {
.fieldset-body {
margin-left: 5px;
......
.footer {
background-color: rgba(255, 255, 255, 0.7);
border-top: 5px solid #ececec;
.footer-nav {
font-size: $font-size-base;
}
}
.admin {
.footer {
background-color: transparent;
border-top: 0;
}
}
......@@ -2,7 +2,7 @@
.collapsible legend h3,
.card-header {
&.has-link {
a .icon {
a .collapse-indicator {
color: $theme-primary-color;
}
}
......@@ -17,11 +17,16 @@
}
}
.collapse-inline {
width: 85%;
}
// custom block heading
// custom block heading pre gridstack
.column-layout {
&:nth-child(3n+1) {
.card-secondary {
.card.card-secondary,
.blockinstance {
&:nth-child(5n+1) > .card-header, .card-header-nested {
background-color: scale-color($theme-primary-color, $lightness: 10%);
color: #FFFFFF;
......@@ -45,7 +50,8 @@
}
}
&:nth-child(3n+2) {
.card-secondary {
.card.card-secondary,
.blockinstance {
&:nth-child(5n+1) > .card-header, .card-header-nested {
background-color: $theme-accent-color-two;
color: #FFFFFF;
......@@ -69,7 +75,8 @@
}
}
&:nth-child(3n+3) {
.card-secondary {
.card.card-secondary,
.blockinstance {
&:nth-child(5n+1) > .card-header, .card-header-nested {
background-color: $theme-accent-color-three;
color: #FFFFFF;
......@@ -94,17 +101,58 @@
}
}
// gridstack card-header colors
.grid-stack .grid-stack-item {
&:nth-child(5n+1) .card-header,
&:nth-child(5n+1) .card.card-secondary.blockinstance.card .card-header {
background-color: scale-color($theme-primary-color, $lightness: 10%);
color: #FFFFFF;
}
&:nth-child(5n+2) .card-header,
&:nth-child(5n+2) .card.card-secondary.blockinstance.card .card-header {
background-color: $theme-accent-color;
color: #FFFFFF;
}
&:nth-child(5n+3) .card-header,
&:nth-child(5n+3) .card.card-secondary.blockinstance.card .card-header {
background-color: $theme-accent-color-two;
color: #FFFFFF;
}
&:nth-child(5n+4) .card-header,
&:nth-child(5n+4) .card.card-secondary.blockinstance.card .card-header {
background-color: $theme-secondary-color;
color: #FFFFFF;
}
&:nth-child(5n+5) .card-header,
&:nth-child(5n+5) .card.card-secondary.blockinstance.card .card-header {
background-color: $theme-accent-color-three;
color: #FFFFFF;
}
.has-attachment .card-header,
.card.card-secondary.blockinstance.card .has-attachment .card-header {
background-color: $card-header-bg;
color: $theme-text-color;
&:hover,
&:focus {
background-color: $card-bg;
}
.collapse-indicator {
color: $theme-primary-color;
}
}
}
.card {
.card-header:before {
@include fonttype(solid);
color: rgba(255, 255, 255, 0.6);
padding-right: 5px;
}
// custom icons to some blocks
// custom icons to some blocks, they do not appear on the edit page
&.bt-newviews .card-header:before {
content: fa-content($fa-var-bullhorn);
}
&.bt-inbox .card-header:before {
&.bt-inbox .card-header:before{
content: fa-content($fa-var-inbox);
}
&.bt-myviews .card-header:before {
......@@ -216,3 +264,8 @@
.card.card-brand .card-header:before {
@include fonttype(brands);
}
// remove the empty icon in attached files header
.has-attachment .card-header::before {
display: none;
}
.card.card-secondary {
@include box-shadow(none);
> .card-header {
> .card-header, .card-header-nested {
font-family: $font-family-sans-serif;
border-radius: 0;
border-bottom: 0;
}
> .card-header, .card-header-nested {
border-bottom: 0;
padding-left: 10px;
background-color: #047DB1;
color: #FFFFFF;
a {
......@@ -16,16 +11,4 @@
text-decoration: underline;
}
}
.blockinstance-controls {
.btn-group-top {
top: 10px;
@include media-breakpoint-down(md) {
top: -10px;
}
@include media-breakpoint-down(sm) {
top: 0px;
}
}
}
}
/*
* Primary navigation menu
*/
.navbar-default {
border-left-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.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;
}
}
}
}