Commit c7843457 authored by Liam's avatar Liam Committed by Rebecca Blundell

Bug #1765276: Cleaned up layout. added some new files

behatnotneeded

Change-Id: I9863da4752a45cef4063264d63855266593f0a2f
parent 16bfaa1a
......@@ -135,8 +135,8 @@
}
}
// Specific panel-secondary styling for the edit page layout
.panel-secondary.blockinstance > .panel-heading > .blockinstance-header {
// Specific card-secondary styling for the edit page layout
.card-secondary.blockinstance > .card-heading > .blockinstance-header {
display: block;
padding-left: 10px;
padding-right: 80px;
......@@ -206,7 +206,7 @@
border-bottom: 0 none;
}
// Login panel
// Login card
.login-externallink {
display: inline-block;
}
......@@ -269,7 +269,7 @@
}
.thumbnail {
margin: 0 15px 0 0;
.panel-body & {
.card-body & {
margin-bottom: 10px;
}
}
......@@ -354,7 +354,7 @@
}
}
.panel-secondary > .panel-heading {
.card-secondary > .card-heading {
font-size: 18px;
}
......@@ -428,7 +428,7 @@
// Remove the link colour from a comment that has an attachement
@media (min-width: 992px) {
.viewfooter .comment-item .comment-attachment .panel.collapsible h4 a.collapsed {
.viewfooter .comment-item .comment-attachment .card.collapsible h4 a.collapsed {
color: $text-color;
}
}
......@@ -573,7 +573,7 @@
}
// Used to remove the second border around the legal information
#agreetoprivacy .panel {
#agreetoprivacy .card {
border: 0;
}
......
......@@ -61,7 +61,7 @@
.navbar-main.navbar {
min-height: auto;
@include media-breakpoint-up(md) {
// height: $navbar-height; // CHANGE this value
height: $navbar-height; // CHANGE this value
}
}
}
/*
* Primary navigation menu
* with collapsible
*/
.navbar-fixed-top {
position:relative;
border: 0;
@include media-breakpoint-up(md) {
position:fixed;
}
}
.navbar-main {
margin-bottom: 0;
> .container {
position: relative;
}
.nav-toggle-area {
float: right;
padding: 10px 0;
}
.navbar-collapse {
padding: 0;
position: static;
clear: both;
max-height: none;
@include media-breakpoint-up(md) {
position: absolute;
right: 15px;
top: 30px - 2px;
max-width: 300px;
z-index: 5;
max-height: 88vh;
overflow-y: auto;
overflow-x: hidden;
margin-right: 0;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}
&.collapsing {
overflow-y: hidden;
}
}
// Top level navigation items use colour variables from "navbar-default"
.navbar-nav {
margin: 0;
@include media-breakpoint-up(md) {
width: 300px;
}
li {
float: none;
display: block;
}
// Styles for all links inside navbar-nav
a {
// @include text-overflow;
display: block;
width: 100%;
}
> li > a {
// color: $navbar-default-color;
// background-color: $navbar-default-bg;
padding: 10px 15px;
font-weight: normal;
// border-top: 1px solid $navbar-default-border;
// border-bottom: 1px solid $navbar-default-border;
margin-top: -1px;
&:hover,
&:focus {
text-decoration:none;
// color: $navbar-default-link-hover-color;
}
// @include media-breakpoint-up(md) {
// border: 1px solid $navbar-default-border;
// }
}
}
// Child navigation items use colour variables from "navbar-inverse"
.child-nav {
border-top:0;
max-width: 100%;
overflow: hidden;
padding: 0;
li > a {
// color: $navbar-inverse-link-color;
// background-color: $navbar-inverse-bg;
padding: 9px 29px;
margin-top: -1px;
font-weight: normal;
&:hover,
&:focus {
text-decoration: none;
// background-color: $navbar-inverse-link-hover-bg;
// color: $navbar-inverse-link-hover-color;
}
}
.active > a {
font-weight: bold;
// 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 {
float: right;
padding-top: 10px;
li {
display: inline-block;
float: right;
}
.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;
margin-bottom: 0;
border: 0;
@include media-breakpoint-up(md) {
position: absolute;
display: block;
max-width: none;
visibility: visible;
top: 10px;
right: 163px;
margin: 0 30px 0 0;
padding: 0;
box-shadow: none;
height: auto !important;
}
.header-search-form {
input[type=text] {
width: calc(100% - 43px);
float: left;
@include media-breakpoint-up(md) {
width: auto;
}
}
.input-group-btn {
display: block !important;
float: left;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
// border-left: 1px solid $btn-default-border;
margin-left: -1px;
@include media-breakpoint-up(md) {
float: right;
}
}
}
}
// Allowing the public search to sit in right place
// when lang selector exists or not
.loggedout .navbar-form.navbar-collapse {
@include media-breakpoint-down(md) {
right: 0px;
margin-right: 15px;
&.with-langform {
right: 270px;
}
&.with-langform-login {
right: 370px;
}
}
}
.navbar-default {
border-left: 0;
border-right: 0;
border-top: 0;
//
// height: 60px;
// /* border-left-color: #fff; */
// /* border-right-color: #fff; */
// /* border-bottom-color: #fff; */
// background-color: #0162a7;
}
.nav-toggle-area {
float: right;
padding: 10px 0;
}
.navbar-main {
background-color: #fff;
top: 0;
.navbar-toggle {
display: block;
margin: 0;
border-color: transparent;
border-left-width: 0;
border-radius: 3px;
min-width: 45px;
color: #556d32;
padding: 6px 10px;
background-color: transparent;
position: relative;
float: right;
&.search-toggle {
@include media-breakpoint-up(md) {
display: none;
}
}
&.user-toggle {
padding-left: 40px;
}
&:hover,
&:focus {
background-color: #f1f1f1;
}
}
}
// *
// * This file is for hotfixes, hacks, and anything that you don't have time to test
// * or implement properly. If you are unsure where to put something, it is ok to put it
// * here.
// *
// * Please comment your code to make it easier for someone to fix or hunt down later.
// *
// *
// IE9 specific styles
.ie9 {
// dropdown group
.dropdown,
.pieform {
.picker {
width: 218px;
}
.picker:before {
content: "";
}
select.form-control {
padding: 0;
}
}
.admin-user-search .dropdown-group{
.picker {
@media (min-width: $screen-sm-min) {
width: 300px;
}
}
.dropdown-group .with-dropdown {
@media (min-width: $screen-sm-min) {
width: 282px;
}
}
}
}
// Overrides the main bootstrap table file and adds padding into tables so that text
// isnt squashed against the border.
.alert {
.table-bordered {
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
padding-left: 8px;
}
> th:last-child,
> td:last-child {
padding-right: 8px;
}
}
}
}
}
// Overrides the default link underline state so that the note block's
// 'Make a copy' link can have an underline
.alert a.copytextboxnote {
text-decoration: underline;
}
......@@ -30,7 +30,7 @@ $indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
&:focus {
+ .switch-label {
// @include tab-focus;
// outline-color: $brand-info;
outline-color: $brand-info;
.switch-inner:before,
.switch-inner:after {
background-color: darken($secondary, 5%);
......
......@@ -52,6 +52,7 @@
width: 40px;
}
.text {
@include ellipsis(true);
display: block;
color: $arrow-text-color;
font-weight: 700;
......
......@@ -43,7 +43,7 @@
}
// Used on pending friends page
.btn-toggle.panel-footer {
.btn-toggle.card-footer {
padding:0;
> .btn {
border-radius: 0;
......@@ -54,7 +54,7 @@
text-align: left;
&:first-child {
border-radius: 0 0 0 3px;
border-bottom: 1px solid $panel-default-border;
border-bottom: 1px solid $card-default-border;
}
&:last-child {
border-radius: 0 0 3px 0;
......@@ -162,7 +162,7 @@ td.action-list-copy {
// Often the same template is used to render buttons at the top of the page and
// in a list group. cf. groups table/groups
.list-group,
.panel-heading {
.card-heading {
.btn-group-top {
@include clearfix;
text-align: right;
......@@ -176,7 +176,7 @@ td.action-list-copy {
.btn {
@extend .btn-sm;
padding-top: 3px;
border-top: 1px solid $panel-default-border;
border-top: 1px solid $card-default-border;
@media (min-width: $screen-md-min) {
border-top-left-radius: 0;
border-top-right-radius: 0;
......@@ -193,7 +193,7 @@ td.action-list-copy {
}
}
// Edit page configure buttons
.panel-secondary .blockinstance-controls .btn-group-top {
.card-secondary .blockinstance-controls .btn-group-top {
position: absolute;
top: 11px;
right: 10px;
......
// Components - small reusable design elements
@import "arrow-bar";
@import "artefactchooser";
@import "btn";
@import "btn-group";
@import "carousel";
@import "contextual-help";
@import "cells";
@import "custom-dropdown";
@import "dropzone-previews";
@import "indicator";
@import "label";
@import "link-thumb"; // text displayed as a thumbnail (cf. admin cookie consent directives)
@import "list-group";
@import "loading-inner";
@import "modal";
@import "pagination";
@import "switch";
@import "toggles";
@import "tags";
@import "user-icon";
@import "framework"; // For the framework matrix
@import "datepicker";
......@@ -37,8 +37,8 @@
.highlight {
border-radius: 4px;
width: 100%;
background-color: $panel-warning-heading-bg;
border: 2px dashed scale-color($panel-warning-border, $lightness: -9.50%);
background-color: $card-warning-heading-bg;
border: 2px dashed scale-color( $card-warning-border, $lightness: -9.50%);
}
// Extending dropzone-previews for adding artefact to a page
......
......@@ -6,10 +6,10 @@
opacity: 0.7;
a:hover &,
.panel-heading:hover & {
.card-heading:hover & {
opacity: 1;
}
.panel-secondary & {
.card-secondary & {
float: left;
margin-top: 5px;
margin-left: 0;
......
// // modifications for list elements such a list of pages, collections
// Left panel
// Left card
.list-group {
margin-bottom: 0;
a {
......@@ -17,11 +17,11 @@
}
}
.panel &,
.panel-body & {
.card &,
.card-body & {
margin-bottom: 0;
}
.user-panel & {
.user-card & {
min-height: 41px;
}
......@@ -31,7 +31,7 @@
padding: 3px 15px;
}
small {
// @extend .text-midtone; //replace
@extend .text-midtone;
}
}
&.list-group-unbordered {
......@@ -110,7 +110,7 @@ h4.list-group-item-heading {
.list-group-item-link {
padding: 0;
a {
// @extend .text-default; //replace
@extend .text-default;
font-size: $font-size-small;
display: block;
padding: 10px 15px;
......@@ -159,7 +159,7 @@ h4.list-group-item-heading {
@extend .list-group-item-warning;
}
&.published {
background: scale-color($panel-default-heading-bg, $lightness: 50%);
background: scale-color($card-default-heading-bg, $lightness: 50%);
}
&.flush {
padding: 10px 0;
......@@ -172,7 +172,7 @@ h4.list-group-item-heading {
@media (min-width: $screen-sm-min) {
float: left;
}
.panel & {
.card & {
float: none;
}
}
......@@ -238,8 +238,8 @@ h4.list-group-item-heading {
margin-top: 5px;
}
// Modifiy for list-groups in panels
.panel > .block {
// Modifiy for list-groups in cards
.card > .block {
> .list-group {
margin-bottom: 0;
}
......@@ -269,7 +269,7 @@ h4.list-group-item-heading {
}
}
.panel-heading + .block > .list-group .list-group-item:first-child {
.card-heading + .block > .list-group .list-group-item:first-child {
border-top-width: 0;
}
......
......@@ -18,7 +18,7 @@ $width-sm: 90%;
@extend .icon;
@extend .icon-spinner;
@extend .icon-3x;
// @extend .text-watermark; //replace
@extend .text-watermark;
&::before {
@extend .icon-pulse;
}
......@@ -88,8 +88,8 @@ $width-sm: 90%;
}
.modal-header,
.mce-panel .mce-window-head {
background: $panel-default-heading-bg;
.mce-card .mce-window-head {
background: $card-default-heading-bg;
padding: 10px 15px;
h4, .mce-title {
font-family: $font-family-base;
......
......@@ -42,7 +42,7 @@
// @include pagination-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small); //replace
}
.panel-pagination {
.card-pagination {
width: 100%;
clear: both;
}
......@@ -41,7 +41,7 @@
}
.tag-filters {
@extend .clearfix;
background: scale-color($panel-default-heading-bg, $lightness: -1.40%);
background: scale-color($card-default-heading-bg, $lightness: -1.40%);
padding: 10px 15px;
}
......
.user-icon {
border-radius: 3px;
background-color: $panel-bg;
background-color: $card-bg;
padding: 5px;
display: table;
border: 1px solid $thumbnail-border;
......@@ -82,13 +82,13 @@
padding-left: 53px;
}
.panel-heading {
.card-heading {
a.has-user-icon , a.has-user-icon.collapsed {
padding-left:65px; //make room for user image
}
}