MDL-44364 theme_bootstrapbase: Improve variable usage

The rules or selectors removed appeared either not to be used any more or were enforcing a rule that was not adequate and should not be replaced by a variable. Basically, the focus was to simplify our usage of the colours and variables to use LESS more efficiently.
moodle · Mar 24, 2014 · e514c72 · e514c72
1 parent 7c923ca
commit e514c72
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 90 deletions.
diff --git a/theme/bootstrapbase/less/moodle/admin.less b/theme/bootstrapbase/less/moodle/admin.less
@@ -161,8 +161,8 @@ img.iconsmall {
 }
 
 #page-admin-roles-define .capdefault {
-    background-color: #eee;
-    border: 1px solid #cecece;
+    background-color: @tableBackgroundHover;
+    border: 1px solid @tableBorder;
 }
 
 #page-filter-manage .backlink,
@@ -474,12 +474,12 @@ img.iconsmall {
 }
 
 #adminthemeselector .selectedtheme td.c0 {
-    border: 1px solid;
+    border: 1px solid @black;
     border-right-width: 0;
 }
 
 #adminthemeselector .selectedtheme td.c1 {
-    border: 1px solid;
+    border: 1px solid @black;
     border-left-width: 0;
 }
 
@@ -506,16 +506,16 @@ img.iconsmall {
 
 .admin_colourpicker .colourdialogue {
     float: left;
-    border: 1px solid #000;
+    border: 1px solid @black;
 }
 
 .admin_colourpicker .previewcolour {
-    border: 1px solid #000;
+    border: 1px solid @black;
     margin-left: 301px;
 }
 
 .admin_colourpicker .currentcolour {
-    border: 1px solid #000;
+    border: 1px solid @black;
     margin-left: 301px;
     border-top-width: 0;
 }
@@ -648,7 +648,7 @@ img.iconsmall {
 #page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo .separator,
 #plugins-check .status .pluginupdateinfo .separator,
 #page-admin-plugins .separator {
-    border-left: 1px dotted #999;
+    border-left: 1px dotted @grayLight;
 }
 
 #plugins-control-panel .msg td {
@@ -713,10 +713,6 @@ img.iconsmall {
     font-size: @fontSizeSmall;
 }
 
-#page-admin-mnet-peers .mform .certdetails {
-    background-color: white;
-}
-
 #page-admin-mnet-peers .mform .deletedhostinfo {
     background-color: @errorBackground;
     border: 2px solid @errorBorder;
@@ -736,7 +732,6 @@ img.iconsmall {
 }
 
 #core-cache-store-summaries .default-store td {
-    color: #333;
     font-style: italic;
 }
 

diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
@@ -160,7 +160,7 @@
     .content li {
         margin-bottom: 10px;
         padding: 5px;
-        border: 1px solid #ddd;
+        border: 1px solid @tableBorder;
         .border-radius(@baseBorderRadius);
         .link {
             font-weight: inherit;

diff --git a/theme/bootstrapbase/less/moodle/bootstrapoverride.less b/theme/bootstrapbase/less/moodle/bootstrapoverride.less
@@ -5,6 +5,9 @@
  * rules defined in Bootstrap.
 */
 
+// Create missing variables.
+@wellBorder: darken(@wellBackground, 7%);
+
 // Headings.
 h1 { font-size: round(@baseFontSize * 2.30); } // ~32px
 h2 { font-size: round(@baseFontSize * 2.00); } // ~28px
@@ -32,4 +35,21 @@ h4 small { font-size: round(@baseFontSize * 0.85); } // ~12px
 .fluid-span-full (@columns, @columnWidth, @gutterWidth) {
     width: (@columnWidth * @columns) + (@gutterWidth * (@columns - 1));
     *width: (@columnWidth * @columns) + (@gutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
+}
+
+/**
+ * Implement missing variables, or faulty ones, in Bootstrap rules.
+ *
+ * Those are minimal overrides of Bootstrap rules to introduce the usage
+ * of a variable, or to fix a variable being used.
+ */
+legend {
+    border-bottom-color: @tableBorder;
+    color: @textColor;
+}
+.breadcrumb {
+    background-color: @wellBackground;
+}
+.well {
+    border-color: @wellBorder;
 }
diff --git a/theme/bootstrapbase/less/moodle/core.less b/theme/bootstrapbase/less/moodle/core.less
@@ -664,16 +664,6 @@ table.mod_index {
     right: auto;
     margin: .3em;
 }
-.comment-delete-confirm {
-    background: #eee;
-    padding: 2px;
-    width: 5em;
-    text-align: center;
-}
-.comment-container {
-    float: left;
-    margin: 4px;
-}
 .comment-report-selectall{
     display: none
 }
@@ -837,8 +827,8 @@ table#tag-management-list th {
     position: absolute;
     width: 420px;
     left: 20%;
-    border: 1px solid #404040;
-    background: #fff;
+    border: 1px solid @dropdownBorder;
+    background: @dropdownBackground;
     overflow: hidden;
     z-index: 9050;
 }
@@ -867,7 +857,8 @@ table#tag-management-list th {
     white-space: nowrap;
 }
 #relatedtags-autocomplete li.yui-ac-highlight{
-    background: #FFFFCC;
+    background: @dropdownLinkBackgroundHover;
+    color: @dropdownLinkColorHover;
 }
 h2.tag-heading,
 div#tag-description,
@@ -1898,7 +1889,7 @@ a.criteria-action {
 }
 table.issuedbadgebox {
     width: 750px;
-    background-color: #FFFFFF;
+    background-color: @wellBackground;
 }
 table.badgeissuedimage {
     width: 150px;
@@ -2121,8 +2112,8 @@ img#persona_signin {
         display:block;
         position: absolute;
         text-align: left;
-        background-color: #fff;
-        border: 1px solid #ccc;
+        background-color: @dropdownBackground;
+        border: 1px solid @dropdownBorder;
         z-index:1000;
         .border-radius(5px);
         .box-shadow(5px 5px 20px 0 #666);

diff --git a/theme/bootstrapbase/less/moodle/course.less b/theme/bootstrapbase/less/moodle/course.less
@@ -254,7 +254,7 @@
     background-color: @infoBackground;
 }
 .course-content .section-summary {
-    border: 1px solid #DDD;
+    border: 1px solid @tableBorder;
     margin-top: 5px;
     list-style: none;
 }
@@ -313,7 +313,7 @@
     margin-top: 0;
 }
 .course-content ul li.section.main {
-    border-bottom: 2px solid #eee;
+    border-bottom: 2px solid @tableBorder;
     margin-top: 0;
 }
 .course-content ul li.section.hidden {
@@ -653,16 +653,16 @@ span.editinstructions {
     display:none;
 }
 .courses .coursebox.collapsed {
-    border:1px solid #eeeeee;
-    padding:5px;
+    border: 1px solid @tableBorder;
+    padding: 5px;
 }
 
 .courses .coursebox.even {
-    background-color:#f6f6f6;
+    background-color: @tableBackgroundAccent;
 }
 .courses .coursebox:hover,
 .course_category_tree .courses > .paging.paging-morelink:hover {
-    background-color:#eeeeee;
+    background-color: @tableBackgroundHover;
 }
 
 .course_category_tree .category .numberofcourse {
@@ -823,7 +823,7 @@ span.editinstructions {
  * Borders                  #e1e1e8
  */
 #course-category-listings {
-    background-color:#fff;
+    background-color: @tableBackground;
     margin-bottom:200px;
 
     /** Two column layout */
@@ -840,16 +840,13 @@ span.editinstructions {
 
     > div > div {
         min-height:300px;
-        border:1px solid #e1e1e8;
         > ul.ml > li:first-child > div {
             border-top:0;
         }
     }
     h3 {
         margin:0;
         padding:0.4rem 0.6rem 0.3rem;
-        background-color:#F5F5F5;
-        border-bottom:1px solid #e1e1e8;
     }
     h4 {
         margin:1rem 0 0;
@@ -912,7 +909,7 @@ span.editinstructions {
         line-height:2.2em;
         > div {
             &:hover {
-                background-color:#fafafa;
+                background-color: @tableBackgroundHover;
             }
         }
         .tree-icon {
@@ -922,16 +919,10 @@ span.editinstructions {
         }
         &[data-selected='1'] {
             > div {
-                background-color:#FFFFD8;
-                border-top-color: #e1e1e8;
-                border-bottom-color:#F5F5F5;
-            }
-            li:first-of-type > div,
-            &[data-expandable='0']+li > div {
-                border-top-color:#e1e1e8;
+                background-color: @tableBackgroundAccent;
             }
-            &:last-of-type > div {
-                border-bottom-color:#e1e1e8;
+            > div:hover {
+                background-color: @tableBackgroundHover;
             }
         }
 
@@ -944,11 +935,6 @@ span.editinstructions {
         li li li li li .tree-icon {margin-left:4.5em;}
         li li li li li li .tree-icon {margin-left:5em;}
         li li li li li li li .tree-icon {margin-left:5.5em;}
-
-        &+li > div,
-        &:first-child > div {
-            border-top-color:#F5F5F5;
-        }
     }
 
     .item-actions {
@@ -1018,11 +1004,11 @@ span.editinstructions {
             }
         }
         &.highlight {
-            background-color:transparent;
+            background-color: @tableBackground;
             > div,
             > div:hover,
             &[data-selected='1'] > div {
-                background-color:#ddffaa;
+                background-color: @tableBackgroundHover;
             }
         }
     }
@@ -1063,7 +1049,7 @@ span.editinstructions {
                 }
             }
             &.highlight > div > .ba-checkbox {
-                background-color:#ddffaa;
+                background-color: @tableBackgroundHover;
             }
             &[data-selected='1'] > div > .ba-checkbox {
                 margin:0 0.5em 0 0;
@@ -1099,7 +1085,7 @@ span.editinstructions {
     }
 
     .detail-pair {
-        border-bottom:1px solid #e1e1e8;
+        border-bottom:1px solid @tableBorder;
         margin:0 1rem;
         > * {
             display:inline-block;
@@ -1128,12 +1114,12 @@ span.editinstructions {
     .listing-pagination {
         text-align:center;
         .yui3-button {
-            background-color:#FFF;
+            background-color: @btnBackground;
             border:0;
             margin:0.4rem 0.2rem 0.45rem;
             font-size:10.4px;
             &.active-page {
-                background-color:#E5EFFD;
+                background-color: @btnBackgroundHighlight;
             }
         }
     }
@@ -1319,7 +1305,7 @@ span.editinstructions {
  */
 @media (min-width: 1200px) and (max-width: 1600px) {
     #course-category-listings.columns-3 {
-        background-color:transparent;
+        background-color: @tableBackground;
         border:0;
 
         #category-listing,
@@ -1329,8 +1315,7 @@ span.editinstructions {
         #category-listing > div,
         #course-listing > div,
         #course-detail > div {
-            border:1px solid #e1e1e8;
-            background-color:#FFF;
+            background-color: @tableBackground;
         }
         #course-detail {
             width:100%;
@@ -1343,7 +1328,7 @@ span.editinstructions {
 @media (max-width: 1199px) {
     #course-category-listings.columns-2,
     #course-category-listings.columns-3 {
-        background-color:transparent;
+        background-color: @tableBackground;
         border:0;
         #category-listing,
         #course-listing,
@@ -1354,8 +1339,7 @@ span.editinstructions {
         #category-listing > div,
         #course-listing > div,
         #course-detail > div {
-            border:1px solid #e1e1e8;
-            background-color:#FFF;
+            background-color: @tableBackground;
         }
     }
 }
diff --git a/theme/bootstrapbase/less/moodle/forms.less b/theme/bootstrapbase/less/moodle/forms.less
@@ -240,7 +240,7 @@ div.backup-section + form,
 }
 .mform legend a,
 .mform legend a:hover {
-    color: @grayDark;
+    color: @textColor;
     text-decoration: none;
 }
 .dir-rtl .mform .fitem .felement {