diff --git a/mod/wiki/styles.css b/mod/wiki/styles.css index c374b99a237..f91676c6f33 100644 --- a/mod/wiki/styles.css +++ b/mod/wiki/styles.css @@ -233,11 +233,6 @@ a.wiki_newentry:link, a.wiki_newentry:visited { font-style: italic; } -#intro.generalbox { - margin-top: 10px; - padding: 5px; -} - .wiki_navigation_container { margin: 0 auto; } diff --git a/theme/noname/classes/output/core_renderer.php b/theme/noname/classes/output/core_renderer.php index 315c5ac383b..1abf19f43a8 100644 --- a/theme/noname/classes/output/core_renderer.php +++ b/theme/noname/classes/output/core_renderer.php @@ -137,7 +137,7 @@ class core_renderer extends \core_renderer { * @return string */ public function get_compact_logo_url($maxwidth = 100, $maxheight = 100) { - return parent::get_compact_logo_url(null, 43); + return parent::get_compact_logo_url(null, 35); } /** @@ -286,24 +286,6 @@ class core_renderer extends \core_renderer { if (empty($bc->blockinstanceid) || !strip_tags($bc->title)) { $bc->collapsible = block_contents::NOT_HIDEABLE; } - if (!empty($bc->blockinstanceid)) { - $bc->attributes['data-instanceid'] = $bc->blockinstanceid; - } - $skiptitle = strip_tags($bc->title); - if ($bc->blockinstanceid && !empty($skiptitle)) { - $bc->attributes['aria-labelledby'] = 'instance-'.$bc->blockinstanceid.'-header'; - } else if (!empty($bc->arialabel)) { - $bc->attributes['aria-label'] = $bc->arialabel; - } - if ($bc->dockable) { - $bc->attributes['data-dockable'] = 1; - } - if ($bc->collapsible == block_contents::HIDDEN) { - $bc->add_class('hidden'); - } - if (!empty($bc->controls)) { - $bc->add_class('block_with_controls'); - } $id = !empty($bc->attributes['id']) ? $bc->attributes['id'] : uniqid('block-'); $context = new stdClass(); diff --git a/theme/noname/scss/moodle/admin.scss b/theme/noname/scss/moodle/admin.scss index fe18fc713de..a3fb64a8818 100644 --- a/theme/noname/scss/moodle/admin.scss +++ b/theme/noname/scss/moodle/admin.scss @@ -175,11 +175,13 @@ } #notice { - // Would like the use the alert stuff below for this, - // but the way buttons are used makes it tricky. width: 60%; min-width: 220px; margin: auto; + text-align: center; + .buttons { + padding: 0 + } } #page-admin-index .releasenoteslink, diff --git a/theme/noname/scss/moodle/blocks.scss b/theme/noname/scss/moodle/blocks.scss index 34ff7c0a490..1b6fbc13c32 100644 --- a/theme/noname/scss/moodle/blocks.scss +++ b/theme/noname/scss/moodle/blocks.scss @@ -14,7 +14,7 @@ } .block .card-title { - margin-bottom: -1.5rem; + word-break: break-all; } .block .block-controls { diff --git a/theme/noname/scss/moodle/core.scss b/theme/noname/scss/moodle/core.scss index 232cb739d95..cd44c9f9d93 100644 --- a/theme/noname/scss/moodle/core.scss +++ b/theme/noname/scss/moodle/core.scss @@ -179,7 +179,7 @@ img.resize { .action-menu .userpicture { width: auto; height: auto; - padding-left: 1rem; + margin-left: 1rem; } .block img.resize, .breadcrumb img.resize { @@ -377,8 +377,12 @@ a.skip:active { } // My Moodle -.path-my .coursebox .overview { - margin: 15px 30px 10px 30px; +.path-my .coursebox { + margin: $spacer-y 0; + padding: 0; + .overview { + margin: 15px 30px 10px 30px; + } } .path-my .coursebox .info { float: none; @@ -1642,18 +1646,29 @@ img#persona_signin { .navbar-brand { .logo { display: inline-block; - margin-top: -$navbar-brand-padding-y; + margin: -$navbar-brand-padding-y 0; } .site-name { display: inline-block; - margin-left: $spacer/2; } - height: 43px; + &.has-logo { + .site-name { + margin-left: $spacer / 2; + } + } } @include media-breakpoint-down(xs) { - .navbar-brand .site-name { - display: none; + .navbar { + .navbar-brand { + max-width: 80%; + margin-right: 0; + &.has-logo { + .site-name { + display: none; + } + } + } } } @@ -1691,14 +1706,6 @@ header { margin-right: 1em; margin-bottom: 1em; } - .page-header-headings { - margin-top: 30px; - margin-bottom: 10px; - - h1 { - display: block; - } - } .page-header-headings, .header-button-group { diff --git a/theme/noname/scss/moodle/course.scss b/theme/noname/scss/moodle/course.scss index 7cb643a56eb..d4d6a4249cc 100644 --- a/theme/noname/scss/moodle/course.scss +++ b/theme/noname/scss/moodle/course.scss @@ -37,9 +37,11 @@ .sitetopic ul.section { margin: 0; } + .course-content ul.section { - margin: 1em; + margin: $spacer; } + .section { .side { &.left { @@ -84,11 +86,16 @@ .contentwithoutlink, .activityinstance { - min-width: 40%; display: table-cell; padding-right: 4px; min-height: 2em; + > a, + > .inplaceeditable-text { + display: block; + text-indent: -31px; + padding-left: 31px; + } } } .label { @@ -182,7 +189,7 @@ } .editing .section .activity:hover, .editing .section .activity.action-menu-shown { - background-color: $gray-lighter; + background-color: $table-bg-accent; } .course-content .current { @extend .tag-info; @@ -241,8 +248,11 @@ margin-top: 0; } .course-content ul li.section.main { - border-bottom: 2px solid $table-border-color; + border-bottom: $border-width solid $table-border-color; margin-top: 0; + &:last-child { + border-bottom: 0; + } } .course-content ul li.section.hidden { .sectionname > span, @@ -256,21 +266,23 @@ margin-right: 10px; } } -.course-content ul.topics li.section .content, -.course-content ul.weeks li.section .content { - margin-right: 20px; - margin-left: 20px; +.course-content ul.topics, +.course-content ul.weeks { padding: 0; + li.section { + padding-top: $spacer; + padding-bottom: $spacer; + .content { + margin: 0; + padding: 0; + } + } } .course-content { margin-top: 0; } -.course-content ul.topics li.section { - padding-bottom: 20px; -} - .course-content ul.topics li.section .summary { margin-left: 25px; } @@ -303,6 +315,12 @@ } } } + .right { + > .icon:first-child { + /* Remove the spacer icon. */ + display: none; + } + } } } @@ -473,10 +491,7 @@ span.editinstructions { } .coursebox { - margin-bottom: 15px; - border: 1px dotted #ddd; - @include border-radius(4px); - padding: 5px; + padding: $spacer / 2; } .coursebox > .info > .coursename a { @@ -544,8 +559,8 @@ span.editinstructions { .coursebox .content .coursefile, .coursebox .content .teachers, .coursebox.remotecoursebox .remotecourseinfo { - margin:3px 5px; - padding:0; + margin: 15px 5px 5px; + padding: 0; } .coursebox.remotehost > .info > .categoryname a { @@ -557,17 +572,23 @@ span.editinstructions { .coursebox.collapsed > .content { display:none; } -.courses .coursebox.collapsed { - border: 1px solid $table-border-color; - padding: 5px; + +.courses .coursebox { + &.collapsed { + padding-top: $spacer-y / 2; + padding-bottom: $spacer-y / 2; + } + &.even { + background-color: $table-bg-accent; + } + &:hover { + background-color: $table-bg-hover; + } } -.courses .coursebox.even { - background-color: $table-bg-accent; -} -.courses .coursebox:hover, -.course_category_tree .courses > .paging.paging-morelink:hover { - background-color: $table-bg-hover; +.courses > .paging.paging-morelink { + text-align: center; + padding: $spacer; } .course_category_tree .category .numberofcourse { @@ -622,39 +643,14 @@ span.editinstructions { display:none; } -.course_category_tree .category >.info { - @extend .card; - min-height:0; - padding:0; - margin:3px 0; - margin-bottom:3px; +.course_category_tree .category > .info { clear: both; } -.course_category_tree.frontpage-category-names .category >.info { - background:none; - border:none; - margin:0; -} + .course_category_tree .category > .content { padding-left:16px; } -.course_category_tree .subcategories > .paging, -.courses > .paging { - margin:0; - padding:5px; - text-align:center; -} - -.courses > .paging.paging-morelink, -.course_category_tree .subcategories > .paging.paging-morelink { - text-align:left; -} - -.course_category_tree .paging.paging-morelink a { - font-size: $font-size-sm; -} - #page-course-index-category .generalbox.info { margin-bottom: 15px; border: 1px dotted #ddd; diff --git a/theme/noname/scss/moodle/forms.scss b/theme/noname/scss/moodle/forms.scss index c56fcb9ec09..39efb068395 100644 --- a/theme/noname/scss/moodle/forms.scss +++ b/theme/noname/scss/moodle/forms.scss @@ -20,7 +20,9 @@ margin-bottom: 4px; } .mform fieldset { - margin-left: $spacer; + margin-left: $spacer * 1.5; + margin-bottom: $spacer / 2; + border-bottom: $border-width solid $table-border-color; } .mform fieldset.collapsible legend a.fheader { padding: 0 5px 0 ($spacer * 1.5); diff --git a/theme/noname/scss/moodle/icons.scss b/theme/noname/scss/moodle/icons.scss index a8e8d97a67c..e0ba42e1aa6 100644 --- a/theme/noname/scss/moodle/icons.scss +++ b/theme/noname/scss/moodle/icons.scss @@ -28,3 +28,11 @@ a:first-of-type > .icon { .ygtvcell .icon { margin-left: 0 !important; } + +// In the navigation, tree icons should not have margins. +.block_navigation, +.block_settings { + .tree_item .icon { + margin-left: 0; + } +} diff --git a/theme/noname/scss/moodle/modules.scss b/theme/noname/scss/moodle/modules.scss index 665c126d52c..461b14a3a69 100644 --- a/theme/noname/scss/moodle/modules.scss +++ b/theme/noname/scss/moodle/modules.scss @@ -224,6 +224,11 @@ div#dock { width: 100%; } +// Dropdown styling. +.dropdown-menu { + margin-top: 11px; +} + // Survey module .path-mod-survey { diff --git a/theme/noname/scss/moodle/user.scss b/theme/noname/scss/moodle/user.scss index 97b540f395d..af436496482 100644 --- a/theme/noname/scss/moodle/user.scss +++ b/theme/noname/scss/moodle/user.scss @@ -15,13 +15,7 @@ } .userprofile .profile_tree section { @extend .card; - //display: inline-block; - //width: 100%; - //border: 1px solid #ddd; - //border-radius: $baseBorderRadius; - //padding: 0 15px; - //margin-bottom: 20px; - //@include box-sizing(border-box); + @extend .card-block; } .userprofile .profile_tree section h3 { @extend .lead; @@ -43,9 +37,9 @@ #page-user-profile .node_category, .path-user .node_category { ul { - margin-left: 0; - margin-right: 0; + margin: 0; list-style: none; + padding-left: 0; } li { margin-top: 5px; diff --git a/theme/noname/scss/preset-default.scss b/theme/noname/scss/preset-default.scss index dbcdd1d7525..e95ece6b1e2 100644 --- a/theme/noname/scss/preset-default.scss +++ b/theme/noname/scss/preset-default.scss @@ -4,52 +4,7 @@ * Use this space to customise variables, create mixins and override SCSS. */ -// Variables and mixins here. Do not forget to make your variable defaults. - -// Variables -// -// Copy settings from this file into the provided `_custom.scss` to override -// the Bootstrap defaults without modifying key, versioned files. - - -// Table of Contents -// // Colors -// Options -// Spacing -// Body -// Links -// Grid breakpoints -// Grid containers -// Grid columns -// Fonts -// Components - -@mixin _assert-ascending($map, $map-name) { - $prev-key: null; - $prev-num: null; - @each $key, $num in $map { - @if $prev-num == null { - // Do nothing - } @else if not comparable($prev-num, $num) { - @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } @else if $prev-num >= $num { - @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } - $prev-key: $key; - $prev-num: $num; - } -} - -// General variable structure -// -// Variable format should follow the `$component-modifier-state-property` order. - - -// Colors -// -// Grayscale and brand colors for use across Bootstrap. - $gray-dark: #373a3c !default; $gray: #55595c !default; $gray-light: #818a91 !default; @@ -63,801 +18,83 @@ $brand-warning: #ff8800 !default; $brand-danger: #ff4136 !default; $brand-inverse: $gray-dark !default; - -// Options -// -// Quickly modify global styling by enabling or disabling optional features. - -$enable-flex: false !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: false !default; -$enable-hover-media-query: false !default; -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - - // Spacing -// -// Control the default styling of most Bootstrap elements by modifying these -// variables. Mostly focused on spacing. -// You can add more entries to the $spacers map, should you need more variation. - $spacer: 1rem !default; $spacer-x: $spacer !default; $spacer-y: $spacer !default; -$spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: $spacer-x, - y: $spacer-y - ), - 2: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) - ), - 3: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) - ) -) !default; $border-width: 1px !default; - // Body -// -// Settings for the `` element. - $body-bg: #f4f4f4 !default; -$body-color: #333333 !default; - - -// Links -// -// Style anchor elements. - -$link-color: $brand-primary !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; - - -// Grid breakpoints -// -// Define the minimum dimensions at which your layout will change, -// adapting to different screen sizes, for use in media queries. - -$grid-breakpoints: ( - xs: 0, - sm: 544px, - md: 768px, - lg: 992px, - xl: 1200px -) !default; -@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); - - -// Grid containers -// -// Define the maximum width of `.container` for different screen sizes. - -$container-max-widths: ( - sm: 576px, - md: 720px, - lg: 940px, - xl: 1140px -) !default; -@include _assert-ascending($container-max-widths, "$container-max-widths"); - - -// Grid columns -// -// Set the number of columns and specify the width of the gutters. - -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; - +$body-color: #3a3a3a !default; // Typography -// -// Font, line-height, and color for body text, headings, and more. - $font-family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; -$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; - -// Pixel value used to responsively scale all typography. Applied to the `` element. $font-size-root: 14px !default; -$font-size-base: 1rem !default; -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; -$font-size-xs: .75rem !default; - -$line-height-base: 1.5 !default; - -$font-size-h1: 2.5rem !default; -$font-size-h2: 2rem !default; -$font-size-h3: 1.75rem !default; -$font-size-h4: 1.5rem !default; -$font-size-h5: 1.25rem !default; -$font-size-h6: 1rem !default; - -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; - -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.1 !default; -$headings-color: inherit !default; - -$lead-font-size: 1.25rem !default; -$lead-font-weight: 300 !default; - -$small-font-size: 80% !default; - -$text-muted: $gray-light !default; - -$abbr-border-color: $gray-light !default; - -$blockquote-small-color: $gray-light !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; -$blockquote-border-color: $gray-lighter !default; -$blockquote-border-width: .25rem !default; - -$hr-border-color: rgba(0,0,0,.1) !default; -$hr-border-width: $border-width !default; - -$mark-padding: .2em !default; - -$dt-font-weight: bold !default; - -$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; -$nested-kbd-font-weight: bold !default; - -$list-inline-padding: 5px !default; - - -// Components -// -// Define common padding and border radius sizes and more. - -$line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; - -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; - -$component-active-color: #fff !default; -$component-active-bg: $brand-primary !default; - -$caret-width: .3em !default; -$caret-width-lg: $caret-width !default; - - // Tables -// -// Customizes the `.table` component with basic values, each used across all table variations. - -$table-cell-padding: .75rem !default; -$table-sm-cell-padding: .3rem !default; - $table-bg: transparent !default; $table-bg-accent: #fafafa !default; $table-bg-hover: lighten($brand-primary, 55%) !default; $table-bg-active: $table-bg-hover !default; - -$table-border-width: $border-width !default; -$table-border-color: $gray-lighter !default; - - -// Buttons -// -// For each of Bootstrap's buttons, define text, background and border color. - -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !default; -$btn-font-weight: normal !default; -$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; -$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; - -$btn-primary-color: #fff !default; -$btn-primary-bg: $brand-primary !default; -$btn-primary-border: $btn-primary-bg !default; - -$btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: #fff !default; -$btn-secondary-border: #ccc !default; - -$btn-info-color: #fff !default; -$btn-info-bg: $brand-info !default; -$btn-info-border: $btn-info-bg !default; - -$btn-success-color: #fff !default; -$btn-success-bg: $brand-success !default; -$btn-success-border: $btn-success-bg !default; - -$btn-warning-color: #fff !default; -$btn-warning-bg: $brand-warning !default; -$btn-warning-border: $btn-warning-bg !default; - -$btn-danger-color: #fff !default; -$btn-danger-bg: $brand-danger !default; -$btn-danger-border: $btn-danger-bg !default; - -$btn-link-disabled-color: $gray-light !default; - -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; - -$btn-block-spacing-y: .5rem !default; -$btn-toolbar-margin: .5rem !default; - -// Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; - - -// Forms - -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; - -$input-bg: #fff !default; -$input-bg-disabled: $gray-lighter !default; - -$input-color: $gray !default; -$input-border-color: rgba(0,0,0,.15) !default; -$input-btn-border-width: $border-width !default; // For form controls and buttons -$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; - -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; - -$input-bg-focus: $input-bg; -$input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-focus: $input-color; - -$input-color-placeholder: #999 !default; - -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; - -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; - -$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; - -$form-group-margin-bottom: $spacer-y !default; - -$input-group-addon-bg: $gray-lighter !default; -$input-group-addon-border-color: $input-border-color !default; - -$cursor-disabled: not-allowed !default; - -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-spacer-y: .25rem !default; - -$custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: #ddd !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default; - -$custom-control-disabled-cursor: $cursor-disabled !default; -$custom-control-disabled-indicator-bg: #eee !default; -$custom-control-disabled-description-color: #767676 !default; - -$custom-control-checked-indicator-color: #fff !default; -$custom-control-checked-indicator-bg: #0074d9 !default; -$custom-control-checked-indicator-box-shadow: none !default; - -$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; - -$custom-control-active-indicator-color: #fff !default; -$custom-control-active-indicator-bg: #84c6ff !default; -$custom-control-active-indicator-box-shadow: none !default; - -$custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; -$custom-checkbox-indeterminate-bg: #0074d9 !default; -$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; -$custom-checkbox-indeterminate-box-shadow: none !default; - -$custom-radio-radius: 50% !default; -$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default; - -$custom-select-padding-x: .75rem !default; -$custom-select-padding-y: .375rem !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-light !default; -$custom-select-bg: #fff !default; -$custom-select-disabled-bg: $gray-lighter !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; -$custom-select-border-width: $input-btn-border-width !default; -$custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; - -$custom-select-focus-border-color: #51a7e8 !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default; - -$custom-select-sm-padding-y: .2rem !default; -$custom-select-sm-font-size: 75% !default; - -$custom-file-height: 2.5rem !default; -$custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; - -$custom-file-padding-x: .5rem !default; -$custom-file-padding-y: 1rem !default; -$custom-file-line-height: 1.5 !default; -$custom-file-color: #555 !default; -$custom-file-bg: #fff !default; -$custom-file-border-width: $border-width !default; -$custom-file-border-color: #ddd !default; -$custom-file-border-radius: $border-radius !default; -$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: #eee !default; -$custom-file-text: ( - placeholder: ( - en: "Choose file..." - ), - button-label: ( - en: "Browse" - ) -) !default; - - -// Form validation icons -$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; -$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; -$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; - +$table-border-color: #f4f4f4 !default; // Dropdowns -// -// Dropdown menu container and contents. - -$dropdown-min-width: 160px !default; -$dropdown-padding-y: 5px !default; -$dropdown-margin-top: 2px !default; -$dropdown-bg: #fff !default; -$dropdown-border-color: rgba(0,0,0,.15) !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: #e5e5e5 !default; -$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; - -$dropdown-link-color: $gray-dark !default; -$dropdown-link-hover-color: darken($gray-dark, 5%) !default; -$dropdown-link-hover-bg: #f5f5f5 !default; - -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; - -$dropdown-link-disabled-color: $gray-light !default; - -$dropdown-item-padding-x: 20px !default; - -$dropdown-header-color: $gray-light !default; - - -// Z-index master list -// -// Warning: Avoid customizing these values. They're used for a bird's eye view -// of components dependent on the z-axis and are designed to all work together. - -$zindex-dropdown-backdrop: 990 !default; -$zindex-navbar: 1000 !default; -$zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; -$zindex-navbar-fixed: 1030 !default; -$zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; -$zindex-modal: 1050 !default; - +$dropdown-border-color: #e2e2e2 !default; +$dropdown-link-color: rgba(0,0,0,.535) !default; // Navbar - -$navbar-border-radius: $border-radius !default; -$navbar-padding-x: $spacer !default; -$navbar-padding-y: ($spacer / 2) !default; -$navbar-brand-padding-y: .25rem !default; - -$navbar-dark-color: rgba(255,255,255,.5) !default; -$navbar-dark-hover-color: rgba(255,255,255,.75) !default; -$navbar-dark-active-color: rgba(255,255,255,1) !default; -$navbar-dark-disabled-color: rgba(255,255,255,.25) !default; - $navbar-light-color: rgba(0,0,0,.535) !default; $navbar-light-hover-color: $brand-primary !default; $navbar-light-active-color: $brand-primary !default; -$navbar-light-disabled-color: rgba(0,0,0,.15) !default; - - -// Navs - -$nav-item-margin: .2rem !default; -$nav-item-inline-spacer: 1rem !default; -$nav-link-padding: .5em 1em !default; -$nav-link-hover-bg: $gray-lighter !default; -$nav-disabled-link-color: $gray-light !default; -$nav-disabled-link-hover-color: $gray-light !default; -$nav-disabled-link-hover-bg: transparent !default; - -$nav-tabs-border-color: #ddd !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-lighter !default; -$nav-tabs-active-link-hover-color: $gray !default; -$nav-tabs-active-link-hover-bg: $body-bg !default; -$nav-tabs-active-link-hover-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; -$nav-tabs-justified-active-link-border-color: $body-bg !default; - -$nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; - - -// Pagination - -$pagination-padding-x: .75rem !default; -$pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .75rem !default; -$pagination-padding-y-sm: .275rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-padding-y-lg: .75rem !default; - - -$pagination-color: $link-color !default; -$pagination-bg: #fff !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: #ddd !default; - -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-lighter !default; -$pagination-hover-border: #ddd !default; - -$pagination-active-color: #fff !default; -$pagination-active-bg: $brand-primary !default; -$pagination-active-border: $brand-primary !default; - -$pagination-disabled-color: $gray-light !default; -$pagination-disabled-bg: #fff !default; -$pagination-disabled-border: #ddd !default; - - -// Jumbotron - -$jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-lighter !default; - - -// Form states and alerts -// -// Define colors for form feedback states and, by default, alerts. - -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; -$state-success-border: darken($state-success-bg, 5%) !default; - -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; -$state-info-border: darken($state-info-bg, 7%) !default; - -$state-warning-text: #8a6d3b !default; -$state-warning-bg: #fcf8e3 !default; -$mark-bg: $state-warning-bg !default; -$state-warning-border: darken($state-warning-bg, 5%) !default; - -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; -$state-danger-border: darken($state-danger-bg, 5%) !default; - // Cards -$card-spacer-x: 1.25rem !default; -$card-spacer-y: .75rem !default; -$card-border-width: 1px !default; -$card-border-radius: none !default; +$card-border-radius: 0 !default; $card-border-color: rgba(238,238,238,1) !default; -$card-border-radius-inner: $card-border-radius !default; -$card-cap-bg: #f5f5f5 !default; -$card-bg: #fff !default; - -$card-link-hover-color: #fff !default; - -$card-img-overlay-padding: 1.25rem !default; - -$card-deck-margin: .625rem !default; - -$card-columns-sm-up-column-gap: 1.25rem !default; - - -// Tooltips - -$tooltip-max-width: 200px !default; -$tooltip-color: #fff !default; -$tooltip-bg: #000 !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: 3px !default; -$tooltip-padding-x: 8px !default; -$tooltip-margin: 3px !default; - -$tooltip-arrow-width: 5px !default; -$tooltip-arrow-color: $tooltip-bg !default; - - -// Popovers - -$popover-inner-padding: 1px !default; -$popover-bg: #fff !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba(0,0,0,.2) !default; -$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default; - -$popover-title-bg: darken($popover-bg, 3%) !default; -$popover-title-padding-x: 14px !default; -$popover-title-padding-y: 8px !default; - -$popover-content-padding-x: 14px !default; -$popover-content-padding-y: 9px !default; - -$popover-arrow-width: 10px !default; -$popover-arrow-color: $popover-bg !default; - -$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; - - -// Tags - -$tag-default-bg: $gray-light !default; -$tag-primary-bg: $brand-primary !default; -$tag-success-bg: $brand-success !default; -$tag-info-bg: $brand-info !default; -$tag-warning-bg: $brand-warning !default; -$tag-danger-bg: $brand-danger !default; - -$tag-color: #fff !default; -$tag-link-hover-color: #fff !default; -$tag-font-size: 75% !default; -$tag-font-weight: bold !default; -$tag-padding-x: .4em !default; -$tag-padding-y: .25em !default; - -$tag-pill-padding-x: .6em !default; -// Use a higher than normal value to ensure completely rounded edges when -// customizing padding or font-size on labels. -$tag-pill-border-radius: 10rem !default; - -// Modals - -// Padding applied to the modal body -$modal-inner-padding: 15px !default; - -$modal-dialog-margin: 10px !default; -$modal-dialog-sm-up-margin-y: 30px !default; - -$modal-title-padding: 15px !default; -$modal-title-line-height: $line-height-base !default; - -$modal-content-bg: #fff !default; -$modal-content-border-color: rgba(0,0,0,.2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default; -$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; - -$modal-backdrop-bg: #000 !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: #e5e5e5 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; - -$modal-lg: 900px !default; -$modal-md: 600px !default; -$modal-sm: 300px !default; - - -// Alerts -// -// Define alert colors, border radius, and padding. - -$alert-padding: 15px !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: bold !default; -$alert-border-width: $border-width !default; - -$alert-success-bg: $state-success-bg !default; -$alert-success-text: $state-success-text !default; -$alert-success-border: $state-success-border !default; - -$alert-info-bg: $state-info-bg !default; -$alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; - -$alert-warning-bg: $state-warning-bg !default; -$alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; - -$alert-danger-bg: $state-danger-bg !default; -$alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; - - -// Progress bars - -$progress-bg: #eee !default; -$progress-bar-color: #0074d9 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default; - -$progress-bar-bg: $brand-primary !default; -$progress-bar-success-bg: $brand-success !default; -$progress-bar-warning-bg: $brand-warning !default; -$progress-bar-danger-bg: $brand-danger !default; -$progress-bar-info-bg: $brand-info !default; - - -// List group - -$list-group-bg: #fff !default; -$list-group-border-color: #ddd !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-hover-bg: #f5f5f5 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border: $list-group-active-bg !default; -$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; - -$list-group-disabled-color: $gray-light !default; -$list-group-disabled-bg: $gray-lighter !default; -$list-group-disabled-text-color: $list-group-disabled-color !default; - -$list-group-link-color: #555 !default; -$list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: #333 !default; - -$list-group-item-padding-x: 1.25rem !default; -$list-group-item-padding-y: .75rem !default; -$list-group-item-heading-margin-bottom: 5px !default; - - -// Image thumbnails - -$thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; -$thumbnail-border-color: #ddd !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; - - -// Figures - -$figure-caption-font-size: 90% !default; - // Breadcrumbs - -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; - -$breadcrumb-bg: $gray-lighter !default; -$breadcrumb-divider-color: $gray-light !default; -$breadcrumb-active-color: $gray-light !default; -$breadcrumb-divider: "/" !default; - - -// Media objects - -$media-margin-top: 15px !default; -$media-heading-margin-bottom: 5px !default; -$media-alignment-padding-x: 10px !default; - - -// Carousel - -$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; - -$carousel-control-color: #fff !default; -$carousel-control-width: 15% !default; -$carousel-control-sm-up-size: 30px !default; -$carousel-control-opacity: .5 !default; -$carousel-control-font-size: 20px !default; - -$carousel-indicators-width: 60% !default; - -$carousel-indicator-size: 10px !default; -$carousel-indicator-active-size: 12px !default; -$carousel-indicator-active-bg: #fff !default; -$carousel-indicator-border-color: #fff !default; - -$carousel-caption-width: 70% !default; -$carousel-caption-sm-up-width: 60% !default; -$carousel-caption-color: #fff !default; - -$carousel-icon-width: 20px !default; - - -// Close - -$close-font-weight: bold !default; -$close-color: #000 !default; -$close-text-shadow: 0 1px 0 #fff !default; - - -// Code - -$code-font-size: 90% !default; -$code-padding-x: .4rem !default; -$code-padding-y: .2rem !default; -$code-color: #bd4147 !default; -$code-bg: #f7f7f9 !default; - -$kbd-color: #fff !default; -$kbd-bg: #333 !default; - -$pre-bg: #f7f7f9 !default; -$pre-color: $gray-dark !default; -$pre-border-color: #ccc !default; -$pre-scrollable-max-height: 340px !default; +$breadcrumb-bg: transparent !default; +$breadcrumb-padding-x: 0 !default; +$breadcrumb-divider: "/" !default; +$breadcrumb-divider-rtl: "/" !default; // Import everything. @import "moodle"; -// Additional scss here. - -.navbar-brand { - padding-left: 1rem; - padding-right: 1rem; -} - +/** + * Navigation bar identity. + */ .navbar-light { background-color: #fff; - border-bottom: 1px solid #e5e5e5; - border-radius: 0; + border-bottom: $border-width solid #e5e5e5; + + .container { + padding-left: 0; + padding-right: 0; + } + .navbar-brand { + padding-left: 1rem; + padding-right: 1rem; + margin-right: $spacer * 2; color: #fff; background-color: $brand-primary; @include hover-focus { - color: #fff; + color: #fff; + } + &.has-logo { + color: $brand-primary; + background-color: transparent; + @include hover-focus { + color: $brand-primary; + } } } + .navbar-nav { + .nav-item + .nav-item { + margin-left: $spacer * 2; + } .nav-link { font-size: $font-size-sm; text-transform: uppercase; @@ -866,39 +103,35 @@ $pre-scrollable-max-height: 340px !default; } } -.navbar-nav { - .nav-item + .nav-item { - margin-left: 0; - } -} - +/** + * Styling the dropdown menus. + */ .dropdown-menu { font-size: 14px; - border-color: #e2e2e2; border-radius: 0; - margin-top: 11px; .dropdown-item { - color: rgba(0,0,0,.535); - padding: 8px 20px; - border-bottom: 1px solid #e2e2e2; + padding-top: 8px; + padding-bottom: 8px; + border-bottom: $border-width solid $dropdown-border-color; &:last-child { border-bottom: 0; } } + .dropdown-divider { + display: none; + } } -#page-header { - background-color: #fff; - border: 1px solid rgba(238,238,238,1); - margin-top: $spacer; - margin-bottom: $spacer; -} - -.breadcrumb { - background-color: transparent; - border-radius: 0; +/** + * User picture. + */ +.userpicture { + border-radius: 50%; } +/** + * For background in content areas. + */ #page.container-fluid { padding: 0 (2 * $spacer); } @@ -911,46 +144,20 @@ $pre-scrollable-max-height: 340px !default; padding-right: 0; } +#page-header { + background-color: #fff; + border: $border-width solid $card-border-color; + margin-top: $spacer; + margin-bottom: $spacer; +} + #region-main { background-color: #fff; - border: 1px solid rgba(238,238,238,1); + border: $border-width solid $card-border-color; padding-top: $spacer; padding-bottom: $spacer; } -.pagelayout-login { - &.notloggedin { - #region-main { - background-color: transparent; - border: 0; - padding: 0 !important; - } - .login-wrapper { - background-color: #fff; - border: 1px solid rgba(238,238,238,1); - } - } - #notice { - text-align: center; - } -} - -.block-region .card-block { - .card-title { - padding-bottom: ($spacer/2); - font-size: 1.143rem; - font-weight: 600; - text-transform: uppercase; - } -} - -.block_navigation, -.block_settings { - .block_tree .tree_item { - margin: ($spacer/2) 0; - } -} - #page-footer { color: #fff; text-align: right; @@ -958,120 +165,76 @@ $pre-scrollable-max-height: 340px !default; border-top: none; } -// Frontpage - -.courses { - .coursebox { - &.collapsed { - border: none; - padding: 10px 5px; +/** + * Login page. + */ +.pagelayout-login { + &.notloggedin { + #region-main { + background-color: transparent; + border: 0; + padding: 0; } - &.even { - background-color: $table-bg-accent; - } - &:hover { - background-color: $table-bg-hover; + .login-wrapper { + background-color: #fff; + border: $border-width solid $card-border-color; } } - > .paging { - padding: 15px 10px; - &.paging-morelink { - text-align: center; - } + #notice { + text-align: center; } } -.coursebox { - margin-bottom: 0; - border: none; - border-radius: 0; - padding: 10px 5px; - .content { - .summary, - .courseimage, - .teachers { - margin: 15px 5px 5px; - } - } -} - -.course_category_tree { - .paging.paging-morelink a { - font-size: 1rem; - } - .courses > .paging.paging-morelink:hover { +/** + * Dashboard styling. + */ +.pagelayout-mydashboard { + #region-main { background-color: transparent; - } - .category > .info { - border: none; + border: 0; + padding: 0; } } -h2, -#site-news-forum h2, -#frontpage-course-list h2, -#frontpage-category-names h2, -#frontpage-category-combo h2 { - border-bottom: 1px solid #f4f4f4; +/** + * Blocks. + */ +.block-region .card-block { + .card-title { + padding-bottom: ($spacer/2); + font-size: 1.143rem; + font-weight: 600; + text-transform: uppercase; + } +} + +/** + * Navigation. + */ +.block_navigation, +.block_settings { + .block_tree .tree_item { + margin: ($spacer/2) 0; + } +} + +/** + * Style for content title. + */ +#region-main h2 { + border-bottom: $border-width solid $table-border-color; padding-bottom: $spacer; margin-bottom: $spacer; } -// Course content - -.course-content ul { - &.topics li.section { - padding-top: $spacer; - padding-bottom: ($spacer/2); - } - li.section.main { - border-bottom: 1px solid #f4f4f4; - &:last-child { - border-bottom: none; - } - } -} - -.activityinstance { - > a, - .inplaceeditable.inplaceeditable-text { - display: block; - text-indent: -31px; - padding-left: 31px; - } -} - -.editing .section .activity { - &:hover, - &.action-menu-shown { - background-color: $table-bg-accent; - } -} - -// Edit settings - -.mform fieldset { - margin-left: 1.5rem; - margin-bottom: 5px; - border-bottom: 1px solid #f4f4f4; -} +/** + * Form styles. + */ .form-group { margin-top: ($spacer/2); } -// Forum - -.forumaddnew { - text-align: center; - display: block; - margin-bottom: $spacer; -} - -.forumnodiscuss { - text-align: center; -} - -#notice { - text-align: center; +.form-inline .form-group { + margin-top: 0; } diff --git a/theme/noname/templates/core/block.mustache b/theme/noname/templates/core/block.mustache index 418bddf2393..8b80d1ad71c 100644 --- a/theme/noname/templates/core/block.mustache +++ b/theme/noname/templates/core/block.mustache @@ -5,26 +5,32 @@ {{! Start Block Container }}