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

behatnotneeded

Change-Id: I4907f4f1a50b92d414bb93d3fba4b5de15bbe2c8

htdocs/theme/raw/sass/_custom.scss

@@ -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;
 }
 

htdocs/theme/raw/sass/components/_btn.scss

@@ -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;

htdocs/theme/raw/sass/components/_indicator.scss

@@ -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;

htdocs/theme/raw/sass/components/_list-group.scss

 // // 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;
 }
 

htdocs/theme/raw/sass/components/_modal.scss

@@ -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 {

htdocs/theme/raw/sass/components/_pagination.scss

@@ -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;
 }

htdocs/theme/raw/sass/components/_user-icon.scss

@@ -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;
     }

htdocs/theme/raw/sass/features/_comment.scss

@@ -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;
         }

htdocs/theme/raw/sass/features/_filebrowser.scss

@@ -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;
     }

htdocs/theme/raw/sass/features/_notification.scss

@@ -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;
     }
 }

htdocs/theme/raw/sass/features/_option-alt.scss

 .option-alt {
     border-top: 1px solid $card-border-color;
     position: relative;
-    &.panel-body {
+    &.card-body {
         padding: 30px 15px;
     }
 }

htdocs/theme/raw/sass/features/_user-pages.scss

-// 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;
     }
 

htdocs/theme/raw/sass/form/_form-group.scss

@@ -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;
 }
 

htdocs/theme/raw/sass/form/_form.scss

@@ -96,7 +96,7 @@ label,
     }
 }
 
-.as-panel form {
+.as-card form {
     margin-top:0;
 }
 

htdocs/theme/raw/sass/form/_site-messages.scss

@@ -64,7 +64,7 @@
 }
 
 .sidebar,
-.login-panel {
+.login-card {
     .errmsg {
         margin-left: 0;
     }

htdocs/theme/raw/sass/layout/_layout.scss

@@ -55,7 +55,7 @@ body {
 .columns3,
 .columns4,
 .columns5 {
-    .wallpost .panel-heading {
+    .wallpost .card-heading {
         font-size: 12px;
         padding-right:40px;
         h4 {

htdocs/theme/raw/sass/layout/_profile-block.scss

-.profile-block.panel-heading {
+.profile-block.card-heading {
     padding:0;
     .username {
         padding: 10px 75px 10px 15px;

htdocs/theme/raw/sass/layout/card/_card-body.scss

-// 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;

htdocs/theme/raw/sass/layout/card/_card-collapse.scss

-// 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;
     //         }
     //     }

htdocs/theme/raw/sass/layout/card/_card-control.scss

 /*
- * 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;
     }

htdocs/theme/raw/sass/layout/card/_card-footer.scss

-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;
 }

htdocs/theme/raw/sass/layout/card/_card-form.scss

-.panel-form {
+.card-form {
     background-color: lighten($card-bg, 1%);
     border-bottom: 1px solid $card-border-color;
     padding: 15px 15px 0 15px;

htdocs/theme/raw/sass/layout/card/_card-half.scss

-.panel-half {
+.card-half {
     width: 48%;
     float: left;
     margin-left: 4%;

htdocs/theme/raw/sass/layout/card/_card-heading.scss

 
 .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;
         }