Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
7
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Open sidebar
mahara
mahara
Commits
129fdc86
Commit
129fdc86
authored
May 24, 2018
by
Liam
Committed by
Rebecca Blundell
Feb 26, 2019
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Bug #1765276: Changing panels to cards. fixing font sizes and families
behatnotneeded Change-Id: I4907f4f1a50b92d414bb93d3fba4b5de15bbe2c8
parent
1a2c1845
Changes
35
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
35 changed files
with
1090 additions
and
1090 deletions
+1090
-1090
htdocs/theme/raw/sass/_custom.scss
htdocs/theme/raw/sass/_custom.scss
+7
-7
htdocs/theme/raw/sass/components/_btn.scss
htdocs/theme/raw/sass/components/_btn.scss
+3
-3
htdocs/theme/raw/sass/components/_indicator.scss
htdocs/theme/raw/sass/components/_indicator.scss
+2
-2
htdocs/theme/raw/sass/components/_list-group.scss
htdocs/theme/raw/sass/components/_list-group.scss
+10
-10
htdocs/theme/raw/sass/components/_modal.scss
htdocs/theme/raw/sass/components/_modal.scss
+1
-1
htdocs/theme/raw/sass/components/_pagination.scss
htdocs/theme/raw/sass/components/_pagination.scss
+1
-1
htdocs/theme/raw/sass/components/_user-icon.scss
htdocs/theme/raw/sass/components/_user-icon.scss
+2
-2
htdocs/theme/raw/sass/features/_comment.scss
htdocs/theme/raw/sass/features/_comment.scss
+2
-2
htdocs/theme/raw/sass/features/_filebrowser.scss
htdocs/theme/raw/sass/features/_filebrowser.scss
+3
-3
htdocs/theme/raw/sass/features/_notification.scss
htdocs/theme/raw/sass/features/_notification.scss
+2
-2
htdocs/theme/raw/sass/features/_option-alt.scss
htdocs/theme/raw/sass/features/_option-alt.scss
+1
-1
htdocs/theme/raw/sass/features/_user-pages.scss
htdocs/theme/raw/sass/features/_user-pages.scss
+7
-7
htdocs/theme/raw/sass/form/_form-group.scss
htdocs/theme/raw/sass/form/_form-group.scss
+3
-3
htdocs/theme/raw/sass/form/_form.scss
htdocs/theme/raw/sass/form/_form.scss
+1
-1
htdocs/theme/raw/sass/form/_site-messages.scss
htdocs/theme/raw/sass/form/_site-messages.scss
+1
-1
htdocs/theme/raw/sass/layout/_layout.scss
htdocs/theme/raw/sass/layout/_layout.scss
+1
-1
htdocs/theme/raw/sass/layout/_profile-block.scss
htdocs/theme/raw/sass/layout/_profile-block.scss
+1
-1
htdocs/theme/raw/sass/layout/card/_card-body.scss
htdocs/theme/raw/sass/layout/card/_card-body.scss
+6
-6
htdocs/theme/raw/sass/layout/card/_card-collapse.scss
htdocs/theme/raw/sass/layout/card/_card-collapse.scss
+31
-31
htdocs/theme/raw/sass/layout/card/_card-control.scss
htdocs/theme/raw/sass/layout/card/_card-control.scss
+5
-5
htdocs/theme/raw/sass/layout/card/_card-footer.scss
htdocs/theme/raw/sass/layout/card/_card-footer.scss
+3
-3
htdocs/theme/raw/sass/layout/card/_card-form.scss
htdocs/theme/raw/sass/layout/card/_card-form.scss
+1
-1
htdocs/theme/raw/sass/layout/card/_card-half.scss
htdocs/theme/raw/sass/layout/card/_card-half.scss
+1
-1
htdocs/theme/raw/sass/layout/card/_card-heading.scss
htdocs/theme/raw/sass/layout/card/_card-heading.scss
+6
-6
htdocs/theme/raw/sass/layout/card/_card-items.scss
htdocs/theme/raw/sass/layout/card/_card-items.scss
+6
-6
htdocs/theme/raw/sass/layout/card/_card-quarter.scss
htdocs/theme/raw/sass/layout/card/_card-quarter.scss
+12
-12
htdocs/theme/raw/sass/layout/card/_card-secondary.scss
htdocs/theme/raw/sass/layout/card/_card-secondary.scss
+16
-16
htdocs/theme/raw/sass/layout/card/_card.scss
htdocs/theme/raw/sass/layout/card/_card.scss
+1
-1
htdocs/theme/raw/sass/layout/nav/_tabs.scss
htdocs/theme/raw/sass/layout/nav/_tabs.scss
+1
-1
htdocs/theme/raw/sass/lib/_draggable.scss
htdocs/theme/raw/sass/lib/_draggable.scss
+2
-2
htdocs/theme/raw/sass/lib/_elasticsearch.scss
htdocs/theme/raw/sass/lib/_elasticsearch.scss
+1
-1
htdocs/theme/raw/sass/lib/_tinymce.scss
htdocs/theme/raw/sass/lib/_tinymce.scss
+2
-2
htdocs/theme/raw/sass/lib/bootstrap4/_variables.scss
htdocs/theme/raw/sass/lib/bootstrap4/_variables.scss
+932
-932
htdocs/theme/raw/sass/typography/_typography.scss
htdocs/theme/raw/sass/typography/_typography.scss
+2
-2
htdocs/theme/raw/sass/utilities/_bootstrap-variables.scss
htdocs/theme/raw/sass/utilities/_bootstrap-variables.scss
+14
-14
No files found.
htdocs/theme/raw/sass/_custom.scss
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
// // 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
panel
s
.
panel
>
.block
{
// Modifiy for list-groups in
card
s
.
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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
.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
View file @
129fdc86
// User content in portfolio pages is within
panel
s which need some unstyling first.
// User content in portfolio pages is within
card
s 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
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
...
...
@@ -96,7 +96,7 @@ label,
}
}
.as-
panel
form
{
.as-
card
form
{
margin-top
:
0
;
}
...
...
htdocs/theme/raw/sass/form/_site-messages.scss
View file @
129fdc86
...
...
@@ -64,7 +64,7 @@
}
.sidebar
,
.login-
panel
{
.login-
card
{
.errmsg
{
margin-left
:
0
;
}
...
...
htdocs/theme/raw/sass/layout/_layout.scss
View file @
129fdc86
...
...
@@ -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
View file @
129fdc86
.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
View file @
129fdc86
// Display objects in
panel
s differently
.
panel
-body
{
// Display objects in
card
s 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
View file @
129fdc86
// This file handles/modifies both real collapsible
panel
s,
// and collapsible pieform fieldsets (which are styled to look like
panel
s)
// This file handles/modifies both real collapsible
card
s,
// and collapsible pieform fieldsets (which are styled to look like
card
s)
.
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
View file @
129fdc86
/*
* 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
View file @
129fdc86
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
View file @
129fdc86
.
panel
-form
{
.
card
-form
{
background-color
:
lighten
(
$card-bg
,
1%
);
border-bottom
:
1px
solid
$card-border-color
;
padding
:
15px
15px
0
15px
;
...
...