Commit 129fdc86 authored by Liam's avatar Liam Committed by Rebecca Blundell

Bug #1765276: Changing panels to cards. fixing font sizes and families

behatnotneeded

Change-Id: I4907f4f1a50b92d414bb93d3fba4b5de15bbe2c8
parent 1a2c1845
......@@ -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
@include media-breakpoint-up(lg) {
.viewfooter .comment-item .comment-attachment .panel.collapsible h4 a.collapsed {
.viewfooter .comment-item .comment-attachment .card.collapsible h4 a.collapsed {
color: $theme-text-color;
}
}
......@@ -573,7 +573,7 @@
}
// Used to remove the second border around the legal information
#agreetoprivacy .panel {
#agreetoprivacy .card {
border: 0;
}
......
......@@ -43,7 +43,7 @@
}
// Used on pending friends page
.btn-toggle.panel-footer {
.btn-toggle.card-footer {
padding:0;
> .btn {
border-radius: 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;
......@@ -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;
......
......@@ -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;
}
......@@ -82,11 +82,11 @@
}
h4.list-group-item-heading {
font-size: $font-size-base + 1;
font-size: $font-size-base + 0.0715;
}
.list-group-item h5 {
font-size: $font-size-base + 1;
font-size: $font-size-base + 0.0715;
}
.list-group-item-warning {
......@@ -172,7 +172,7 @@ h4.list-group-item-heading {
@include media-breakpoint-up(md) {
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;
}
......
......@@ -88,7 +88,7 @@ $width-sm: 90%;
}
.modal-header,
.mce-panel .mce-window-head {
.mce-card .mce-window-head {
background: $card-bg;
padding: 10px 15px;
h4, .mce-title {
......
......@@ -42,7 +42,7 @@
@include pagination-size($pagination-padding-y-xs, $pagination-padding-x-xs, $font-size-sm, $pagination-line-height, $border-radius-sm);
}
.panel-pagination {
.card-pagination {
width: 100%;
clear: both;
}
......@@ -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
}
}
.panel-body {
.card-body {
.with-user-icon-lg {
padding-right: 67px;
}
......
......@@ -29,7 +29,7 @@
float: left;
width: 32%;
.panel {
.card {
@include card-as-link();
width: 100%;
}
......@@ -72,7 +72,7 @@
}
.collapse & {
&:first-child {
// To override panel listgroup no top border on first-child
// To override card listgroup no top border on first-child
border-top: 1px solid $list-group-border-color !important;
border-bottom: 0;
}
......
......@@ -15,7 +15,7 @@
}
}
.panel-fake {
.card-fake {
margin-bottom: 15px;
.title {
padding: 0;
......@@ -62,7 +62,7 @@
// reset padding and margin inside collapsible
.filelist.table,
.filelist-wrapper.panel,
.filelist-wrapper.card,
.filebrowser.form-group {
margin-bottom: 0;
padding: 0 !important // override form-group padding;
......@@ -127,7 +127,7 @@
}
.filelist-wrapper {
.panel-heading {
.card-heading {
padding: 10px 0 10px 20px;
margin-bottom: 10px;
}
......
......@@ -31,7 +31,7 @@
}
}
.notification {
.panel-control {
.card-control {
top: 5px;
+ a[data-toggle="collapse"] {
padding-left: 60px;
......@@ -71,7 +71,7 @@
white-space: nowrap;
max-width: 100%;
}
.panel-heading {
.card-heading {
font-weight: 300;
}
}
......
.option-alt {
border-top: 1px solid $card-border-color;
position: relative;
&.panel-body {
&.card-body {
padding: 30px 15px;
}
}
......
// User content in portfolio pages is within panels which need some unstyling first.
// User content in portfolio pages is within cards which need some unstyling first.
// Users also have access to a full WYSIWYG editor so some content for that needs styles.
// This styling is scoped to user-page-content which appears on the edit and display page pages.
......@@ -6,19 +6,19 @@
#tinymce,
#view-description {
// Unstyle panel elements
.panel .panel-body table,
.panel .panel-body table thead,
.panel-body ul {
// Unstyle card elements
.card .card-body table,
.card .card-body table thead,
.card-body ul {
color: $theme-text-color;
font-size: $font-size-base;
}
.panel-body small {
.card-body small {
color: $theme-text-color;
}
.panel-body ul:not(.list-unstyled):not(.unstyled):not(.select2-selection__rendered) {
.card-body ul:not(.list-unstyled):not(.unstyled):not(.select2-selection__rendered) {
padding-left: 40px;
}
......
......@@ -108,7 +108,7 @@
&.fake-form {
border: 0;
padding: 0;
.collapsible-group .panel.collapsible & {
.collapsible-group .card.collapsible & {
border: 0;
padding: 0;
}
......@@ -117,7 +117,7 @@
// this is a weird and somewhat broken case where form renderers are being use to render regular html
&.html form {
display: block;
.collapsible-group .panel.collapsible & .form-group {
.collapsible-group .card.collapsible & .form-group {
border: 0;
padding: 0;
}
......@@ -567,7 +567,7 @@
}
}
.panel .form-group-nested {
.card .form-group-nested {
padding-bottom: 20px;
}
......
......@@ -96,7 +96,7 @@ label,
}
}
.as-panel form {
.as-card form {
margin-top:0;
}
......
......@@ -64,7 +64,7 @@
}
.sidebar,
.login-panel {
.login-card {
.errmsg {
margin-left: 0;
}
......
......@@ -55,7 +55,7 @@ body {
.columns3,
.columns4,
.columns5 {
.wallpost .panel-heading {
.wallpost .card-heading {
font-size: 12px;
padding-right:40px;
h4 {
......
.profile-block.panel-heading {
.profile-block.card-heading {
padding:0;
.username {
padding: 10px 75px 10px 15px;
......
// Display objects in panels differently
.panel-body {
// Display objects in cards differently
.card-body {
ul:not(.profile-info) {
font-size: 0.9em;
&:not(.list-unstyled):not(.unstyled):not(.select2-selection__rendered) {
......@@ -11,7 +11,7 @@
}
}
.sidebar & .form-group,
.login-panel & .form-group {
.login-card & .form-group {
padding: 8px 0 8px 0;
}
.form-group.login{
......@@ -20,10 +20,10 @@
padding: 0;
}
}
> .panel-footer,
form .panel-footer {
> .card-footer,
form .card-footer {
clear:both;
margin: 15px -15px -15px; //alter padding for panel footers inside panel-body (needed for some forms) c.f. login form
margin: 15px -15px -15px; //alter padding for card footers inside card-body (needed for some forms) c.f. login form
}
.collapse & {
padding-bottom: 0;
......
// This file handles/modifies both real collapsible panels,
// and collapsible pieform fieldsets (which are styled to look like panels)
// This file handles/modifies both real collapsible cards,
// and collapsible pieform fieldsets (which are styled to look like cards)
.panel.collapsible {
.card.collapsible {
margin-bottom: 0;
border-radius: 0;
.panel-heading a {
.card-heading a {
border-radius: 0;
}
&.form-group {
display:block;
}
.panel {
.card {
border-radius: 0;
}
}
.pieform-fieldset,
.panel {
.card {
&.collapsible {
@include box-shadow(none);
&.last {
legend,
.panel-heading {
.card-heading {
@include border-bottom-radius($border-radius-sm);
a {
&.collapsed {
......@@ -41,7 +41,7 @@
@include border-bottom-radius($border-radius-sm);
}
}
&.first .panel-heading a {
&.first .card-heading a {
@include border-top-radius(3px);
}
......@@ -61,8 +61,8 @@
padding: 0 30px;
}
&.has-attachment .panel-heading,
.collapsible-group & .panel-heading,
&.has-attachment .card-heading,
.collapsible-group & .card-heading,
legend h4,
legend h3 {
margin: 0;
......@@ -128,13 +128,13 @@
}
// @todo: Rethink this, it's too complex
.panel.collapsible:not(.panel-secondary) {
.card.collapsible:not(.card-secondary) {
border-width: 0;
// For attachment collapsible
&.has-attachment {
border-radius: $border-radius-sm;
border-width: 1px;
.panel-heading a {
.card-heading a {
border-width: 0;
&:not(.collapsed) {
border-bottom-width: 1px;
......@@ -144,22 +144,22 @@
// Remove border from heading - add to link tag.
// In this case we have a nested a tag that takes up the whole of the heading space
// rather than applying the panel-header to the link
.panel-heading {
// rather than applying the card-header to the link
.card-heading {
border: 0;
a {
text-shadow: 1px 0 0 $text-shadow;
}
}
&.panel-primary{
.panel-heading a {
&.card-primary{
.card-heading a {
font-weight: bold;
}
}
&.notification {
.panel-footer {
.card-footer {
margin-bottom: 20px;
}
.no-footer {
......@@ -168,26 +168,26 @@
}
}
.panel-body,
.panel-footer,
.panel-heading a {
.card-body,
.card-footer,
.card-heading a {
border: 1px solid $card-border-color;
}
.panel-heading a,
.panel-body:not(.no-footer) {
.card-heading a,
.card-body:not(.no-footer) {
border-bottom-width: 0;
}
// last class will add bottom border to collapsible element(s)
// Except has-attachment, it doesn't need one.
&.last .panel-heading a.collapsed {
&.last .card-heading a.collapsed {
border-bottom-width: 1px;
}
// Style variations
// @each $status, $bgcolor in $panel-background {
// &.panel-#{$status} {
// .panel-heading a {
// @each $status, $bgcolor in $card-background {
// &.card-#{$status} {
// .card-heading a {
// background-color: darken($bgcolor, 3%);
// &.collapsed {
// background-color: $bgcolor;
......@@ -197,13 +197,13 @@
// background-color: darken($bgcolor, 3%);
// }
// }
// .panel-footer,
// .panel-body,
// .panel-heading a {
// .card-footer,
// .card-body,
// .card-heading a {
// border: 1px solid darken($bgcolor, 15%);
// }
// .panel-heading a,
// .panel-body:not(.no-footer) {
// .card-heading a,
// .card-body:not(.no-footer) {
// border-bottom-width:0;
// }
// }
......
/*
* Input boxes, links, or buttons positioned over the panel header
* Input boxes, links, or buttons positioned over the card header
*/
.panel-control {
.card-control {
display: block;
font-size: $font-size-base - 2;
margin: 0;
......@@ -10,14 +10,14 @@
position: absolute;
width: auto;
z-index: 5;
&.panel-header-action {
&.card-header-action {
right:0;
top:0;
.btn {
padding-top:0;
}
}
&.panel-header-form-actions {
&.card-header-form-actions {
right:0;
top:0;
padding:0;
......@@ -40,7 +40,7 @@
color: $link-color;
}
}
a.panel-control {
a.card-control {
&:hover, &:hover span {
color: $link-color;
}
......
a.panel-footer {
a.card-footer {
text-align:center;
color: $gray-500;
display: block;
......@@ -24,7 +24,7 @@ a.panel-footer {
background-color: $card-bg;
}
.panel-footer {
.card-footer {
p {
margin:0;
}
......@@ -61,6 +61,6 @@ a.panel-footer {
}
}
.fieldset-body .panel-footer {
.fieldset-body .card-footer {
margin: 20px -15px -10px;
}
.panel-form {
.card-form {
background-color: lighten($card-bg, 1%);
border-bottom: 1px solid $card-border-color;
padding: 15px 15px 0 15px;
......
.panel-half {
.card-half {
width: 48%;
float: left;
margin-left: 4%;
......
.collapsible legend h4,
.collapsible legend h3,
.panel-heading {
.card-heading {
position: relative;
display: block;
font-family: $font-family-sans-serif;
......@@ -27,7 +27,7 @@
color: inherit;
padding: 10px 15px;
.panel-secondary > & {
.card-secondary > & {
padding: 10px 8px;
}
......@@ -38,7 +38,7 @@
&.outer-link {
background: none;
}
.panel-secondary > & {
.card-secondary > & {
padding: 10px 8px;
}
}
......@@ -47,7 +47,7 @@
text-decoration: none;
}