Upgrade to Bootstrap 5.0, untested here but in production

ubc-cpsc · Aug 13, 2024 · 2528cf7 · 2528cf7
1 parent 16670fb
commit 2528cf7
Show file tree

Hide file tree

Showing 10 changed files with 6,721 additions and 887 deletions.
diff --git a/public/themes/custom/ubccs/css/bootstrap.css b/public/themes/custom/ubccs/css/bootstrap.css
diff --git a/public/themes/custom/ubccs/css/ckeditor.css b/public/themes/custom/ubccs/css/ckeditor.css
@@ -129,8 +129,7 @@ pre {
   word-wrap: normal;
   line-height: 1.5;
   tab-size: 4;
-  -webkit-hyphens: none;
-          hyphens: none;
+  hyphens: none;
 }
 
 pre,
@@ -267,7 +266,6 @@ input,
 textarea,
 select,
 input[type=text] {
-  -webkit-appearance: none;
   appearance: none;
   border: 2px solid #444;
   border-radius: 0;

diff --git a/public/themes/custom/ubccs/css/ckeditor5.css b/public/themes/custom/ubccs/css/ckeditor5.css
@@ -138,8 +138,7 @@
   word-wrap: normal;
   line-height: 1.5;
   tab-size: 4;
-  -webkit-hyphens: none;
-          hyphens: none;
+  hyphens: none;
 }
 .ck-content pre,
 .ck-content code,
@@ -251,7 +250,6 @@
 .ck-content textarea,
 .ck-content select,
 .ck-content input[type=text] {
-  -webkit-appearance: none;
   appearance: none;
   border: 2px solid #444;
   border-radius: 0;
@@ -505,13 +503,13 @@
 .ck-content .button--primary:hover {
   background-color: #007c74;
   color: #fff;
-  box-shadow: 0 1px 2px hsla(203deg, 10%, 10%, 0.25);
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 }
 .ck-content .button.form-submit.button--active, .ck-content .button.form-submit:active,
 .ck-content .button--active.button--primary,
 .ck-content .button--primary:active {
   background-color: #005554;
-  box-shadow: inset 0 1px 3px hsla(0deg, 0%, 0%, 0.2);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 }
 .ck-content .button--secondary {
   border-color: #005554;
@@ -525,11 +523,11 @@
 }
 .ck-content .button--hover.button--secondary, .ck-content .button--secondary:hover {
   background-color: #007c74;
-  box-shadow: 0 1px 2px hsla(203deg, 10%, 10%, 0.25);
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 }
 .ck-content .button--active.button--secondary, .ck-content .button--secondary:active {
   background-color: #003c3b;
-  box-shadow: inset 0 1px 3px hsla(0deg, 0%, 0%, 0.2);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 }
 .ck-content .button-action::before {
   margin-left: -0.2em;
@@ -631,7 +629,7 @@
   box-shadow: none;
   color: #5c5c5c;
   cursor: default;
-  text-shadow: 0 1px hsla(0deg, 0%, 100%, 0.6);
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
 }
 .ck-content .read-more {
   margin-top: 2rem;
@@ -719,7 +717,7 @@
   border-bottom-width: 3px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M53 34H11a3 3 0 010-6h42a3 3 0 010 6z' fill='%2300afa4'/%3E%3C/svg%3E");
 }
-@media (max-width: 767.98px) {
+@media (max-width: 575.98px) {
   .ck-content details summary {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -737,13 +735,6 @@
   background-color: #005554;
   color: #fff;
 }
-@media (min-width: 768px) {
-  .ck-content .inline-block-left,
-  .ck-content .inline-block-right {
-    max-width: 260px;
-    width: 100%;
-  }
-}
 .ck-content .inline-block-left h2,
 .ck-content .inline-block-left h3,
 .ck-content .inline-block-left h4,
@@ -762,6 +753,13 @@
 .ck-content .inline-block-right h4 {
   margin-top: 0;
 }
+@media (min-width: 768px) {
+  .ck-content .inline-block-left,
+  .ck-content .inline-block-right {
+    max-width: 260px;
+    width: 100%;
+  }
+}
 .ck-content .inline-block-left {
   margin-right: 2rem;
 }

diff --git a/public/themes/custom/ubccs/css/local.clf.fixes.css b/public/themes/custom/ubccs/css/local.clf.fixes.css
@@ -90,7 +90,7 @@ ul.secondary.tabs {
   width: 100%;
 }
 
-@media (min-width: 980px) and (max-width: 1499.98px) {
+@media (min-width: 980px) and (max-width: 1199.98px) {
   #ubc7-wordmark {
     width: 100% !important;
     border-right: #fff solid 100px;

diff --git a/public/themes/custom/ubccs/css/main.css b/public/themes/custom/ubccs/css/main.css
@@ -138,8 +138,7 @@ pre {
   word-wrap: normal;
   line-height: 1.5;
   tab-size: 4;
-  -webkit-hyphens: none;
-          hyphens: none;
+  hyphens: none;
 }
 
 pre,
@@ -276,7 +275,6 @@ input,
 textarea,
 select,
 input[type=text] {
-  -webkit-appearance: none;
   appearance: none;
   border: 2px solid #444;
   border-radius: 0;
@@ -764,13 +762,13 @@ td :last-child {
 .button--primary:hover {
   background-color: #007c74;
   color: #fff;
-  box-shadow: 0 1px 2px hsla(203deg, 10%, 10%, 0.25);
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 }
 .button.form-submit.button--active, .button.form-submit:active,
 .button--active.button--primary,
 .button--primary:active {
   background-color: #005554;
-  box-shadow: inset 0 1px 3px hsla(0deg, 0%, 0%, 0.2);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 }
 
 .button--secondary {
@@ -785,11 +783,11 @@ td :last-child {
 }
 .button--hover.button--secondary, .button--secondary:hover {
   background-color: #007c74;
-  box-shadow: 0 1px 2px hsla(203deg, 10%, 10%, 0.25);
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 }
 .button--active.button--secondary, .button--secondary:active {
   background-color: #003c3b;
-  box-shadow: inset 0 1px 3px hsla(0deg, 0%, 0%, 0.2);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 }
 
 /**
@@ -914,7 +912,7 @@ td :last-child {
   box-shadow: none;
   color: #5c5c5c;
   cursor: default;
-  text-shadow: 0 1px hsla(0deg, 0%, 100%, 0.6);
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
 }
 
 .read-more {
@@ -1141,13 +1139,13 @@ td :last-child {
 }
 
 /* Responsive */
-@media (max-width: 979.98px) {
+@media (max-width: 767.98px) {
   .course-section-info .views-field-field-course-days,
   .course-section-info .views-field-field-course-end-time {
     display: none;
   }
 }
-@media (max-width: 767.98px) {
+@media (max-width: 575.98px) {
   .course-section-info .views-field-field-course-term,
   .course-section-info .views-field-field-course-room,
   .course-section-info .views-field-field-course-instructors {
@@ -1215,7 +1213,7 @@ details[open] summary {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M53 34H11a3 3 0 010-6h42a3 3 0 010 6z' fill='%2300afa4'/%3E%3C/svg%3E");
 }
 
-@media (max-width: 767.98px) {
+@media (max-width: 575.98px) {
   details summary {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1314,7 +1312,7 @@ label.error {
 .form-disabled textarea.form-textarea,
 .form-disabled select.form-select {
   border-color: #d4d4d4;
-  background-color: hsla(0deg, 0%, 0%, 0.08);
+  background-color: hsla(0, 0%, 0%, 0.08);
   box-shadow: none;
 }
 
@@ -1323,7 +1321,7 @@ label.error {
 .form-item select.error {
   border-width: 1px;
   border-color: #e62600;
-  background-color: hsl(15deg, 75%, 97%);
+  background-color: hsl(15, 75%, 97%);
   box-shadow: inset 0 5px 5px -5px #b8b8b8;
   color: #a51b00;
 }
@@ -1480,7 +1478,7 @@ input[type=text]:focus {
 /**
  * Improve form element usability on narrow devices.
  */
-@media (max-width: 767.98px) {
+@media (max-width: 575.98px) {
   input.form-autocomplete,
   input.form-text,
   input.form-tel,
@@ -1892,13 +1890,6 @@ div.filter-options select {
   background-color: #005554;
   color: #fff;
 }
-@media (min-width: 768px) {
-  .inline-block-left,
-  .inline-block-right {
-    max-width: 260px;
-    width: 100%;
-  }
-}
 .inline-block-left h2,
 .inline-block-left h3,
 .inline-block-left h4,
@@ -1917,6 +1908,13 @@ div.filter-options select {
 .inline-block-right h4 {
   margin-top: 0;
 }
+@media (min-width: 768px) {
+  .inline-block-left,
+  .inline-block-right {
+    max-width: 260px;
+    width: 100%;
+  }
+}
 
 .inline-block-left {
   margin-right: 2rem;
@@ -2110,7 +2108,7 @@ div.filter-options select {
     display: none;
   }
 }
-@media (max-width: 979.98px) {
+@media (max-width: 767.98px) {
   #ubc7-unit-navigation .menu--main {
     display: none;
   }
@@ -2607,12 +2605,8 @@ div.filter-options select {
 
 .research-area__label {
   display: flex;
-}
-@media (max-width: 575.98px) {
-  .research-area__label {
-    flex-direction: column;
-    align-items: center;
-  }
+  flex-direction: column;
+  align-items: center;
 }
 
 .research-area__icon {