From 7a02b3ce823a2f9cdfdb1e79a017eb01a330202e Mon Sep 17 00:00:00 2001 From: James O'Toole Date: Mon, 23 Sep 2024 12:39:48 -0700 Subject: [PATCH 1/2] Remove sass and package.json --- package-lock.json | 248 -------------------------- package.json | 10 -- sass/_alerts.scss | 73 -------- sass/_button-clf-hamburger.scss | 56 ------ sass/_clf.fixes.scss | 70 -------- sass/_mixins.scss | 97 ---------- sass/_system.theme.local.scss | 46 ----- sass/_variables.scss | 37 ---- sass/ckeditor5.scss | 36 ---- sass/clf.drupal.scss | 11 -- sass/clf.social-icons.scss | 49 ----- sass/local-tasks.scss | 86 --------- sass/maintenance-page.scss | 79 --------- sass/navigation.secondary.scss | 4 - sass/navigation.slidein.scss | 304 -------------------------------- sass/navigation.sticky.scss | 55 ------ 16 files changed, 1261 deletions(-) delete mode 100644 package-lock.json delete mode 100644 package.json delete mode 100644 sass/_alerts.scss delete mode 100755 sass/_button-clf-hamburger.scss delete mode 100644 sass/_clf.fixes.scss delete mode 100644 sass/_mixins.scss delete mode 100644 sass/_system.theme.local.scss delete mode 100644 sass/_variables.scss delete mode 100644 sass/ckeditor5.scss delete mode 100644 sass/clf.drupal.scss delete mode 100644 sass/clf.social-icons.scss delete mode 100644 sass/local-tasks.scss delete mode 100644 sass/maintenance-page.scss delete mode 100644 sass/navigation.secondary.scss delete mode 100644 sass/navigation.slidein.scss delete mode 100644 sass/navigation.sticky.scss diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 6214a4c..0000000 --- a/package-lock.json +++ /dev/null @@ -1,248 +0,0 @@ -{ - "name": "galactus", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "devDependencies": { - "sass": "^1.0.0" - } - }, - "node_modules/anymatch": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", - "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, - "license": "ISC", - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/binary-extensions": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", - "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/braces": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", - "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", - "dev": true, - "license": "MIT", - "dependencies": { - "fill-range": "^7.1.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/fill-range": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", - "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", - "dev": true, - "license": "MIT", - "dependencies": { - "to-regex-range": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/immutable": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", - "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", - "dev": true, - "license": "MIT" - }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "license": "MIT", - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "license": "MIT", - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, - "node_modules/sass": { - "version": "1.77.8", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", - "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index a81863f..0000000 --- a/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "private": true, - "scripts": { - "build:css": "sass sass:css", - "watch:css": "sass -w sass:css" - }, - "devDependencies": { - "sass": "^1.0.0" - } -} diff --git a/sass/_alerts.scss b/sass/_alerts.scss deleted file mode 100644 index 3f9312e..0000000 --- a/sass/_alerts.scss +++ /dev/null @@ -1,73 +0,0 @@ -/** - * @file - * Override the CLF's alert styles. - */ - -/* UNIT Alert Styles --------------------------------------------------- */ - -/* VARIABLES */ -$unit-warning: #ef8843; -$unit-danger: #b33542; -$unit-error: $unit-danger; -$unit-success: #95be4f; -$unit-info: #324d6a; -$unit-status: $unit-info; - -/* GENERAL STYLES */ -.alert { - color: #fff; - padding: 15px 35px 15px 15px; - margin-top: 1em; - margin-bottom: 1em; - border-width: 2px; - border-radius: 0; - a, - h4 { - color: #fff; - } -} -a.close { - position: relative; - top: -2px; - right: -21px; - color: white !important; - text-decoration: none; - opacity: 0.4; - padding: 0; - cursor: pointer; - background: transparent; - float: right; - font-size: 22.5px; - font-weight: bold; - line-height: 1; - &:hover { - opacity: 1; - } -} - -.alert h4.alert-heading { - margin-top: 0; -} - -.alert-warning { - background-color: $unit-warning; - border-color: #d77a3c; -} - -.alert-danger, -.alert-error { - background-color: $unit-danger; - border-color: #900f1d; -} - -.alert-success, -.alert-status { - background-color: $unit-success; - border-color: #73963d; -} - -.alert-info { - background-color: $unit-info; - border-color: #00162f; -} diff --git a/sass/_button-clf-hamburger.scss b/sass/_button-clf-hamburger.scss deleted file mode 100755 index f06dd7a..0000000 --- a/sass/_button-clf-hamburger.scss +++ /dev/null @@ -1,56 +0,0 @@ -// ----------------------------------------------------------------------------- -// This file contains all styles related to the hamburger button component. -// ----------------------------------------------------------------------------- -// BUTTONS -$toggle--background: #fff; -$toggle--color: #002145; -$toggle--shadow-color: #191938; -$toggle--bar-height: 2px; -$toggle--bar-width: 18px; -$toggle--bar-spacing: 3px; - - -.drawer-toggle--hamburger { - background-color: $toggle--background; - box-shadow: 1px 1px 1px $toggle--shadow-color; - -moz-box-shadow: 1px 1px 1px $toggle--shadow-color; - -webkit-box-shadow: 1px 1px 1px $toggle--shadow-color; - float: right; - height: 24px; - padding: 11px 0 0 13px; - width: 32px; - &:hover { - box-shadow: 1px 1px 1px $toggle--shadow-color; - -moz-box-shadow: 1px 1px 1px $toggle--shadow-color; - -webkit-box-shadow: inset 1px 1px 1px $toggle--shadow-color; - } - span { - margin-top: $toggle--bar-spacing; - display: block; - width: $toggle--bar-width; - height: $toggle--bar-height; - background-color: $toggle--color; - -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - &:first-child { - margin-top: 0; - } - } -} - -@media screen and (min-width: 998px) { - .drawer-toggle--hamburger { - display: block !important; - margin-top: 2px; - margin-right: 13px; - margin-bottom: 3px; - } -} -@media screen and (min-width: 1200px) { - .drawer-toggle--hamburger { - margin-top: 5px; - margin-right: 17px; - margin-bottom: 5px; - } -} diff --git a/sass/_clf.fixes.scss b/sass/_clf.fixes.scss deleted file mode 100644 index 6c173dd..0000000 --- a/sass/_clf.fixes.scss +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @file - * Overrides some default CLF styles - */ - - /* Change the 'body' background colour when full width and left-aligned layouts are chosen */ - body.full-width, - body.fluid-width { - background-color: #fff; - } - - /* Remove the inset shadoes and text shadows from the unit area */ -.make-nice #ubc7-unit { - box-shadow: none; - -webkit-box-shadow: none; -} -.make-nice #ubc7-unit-name a, -.make-nice #ubc7-unit-name a:hover { - text-shadow: none; -} - -/* Add some padding to the main content region. */ -#unit-content { - padding-bottom: 2em; -} - -/* Alter default CLF form styles */ -// TODO - revise this to exclude important statements - blech -// input { -// box-sizing: border-box !important; -// padding: .25em !important; -// height: auto !important; -// } - -// Undo the forced width of 206px in the CLF. -input, -textarea, -.uneditable-input { - width: inherit; -} - -#block-userlogin .item-list ul { - list-style: none; - margin-left: 0; -} - -#block-userlogin .item-list li { - float: left; - margin-right: .5em; - font-size: .875em; -} - -#block-userlogin .item-list li+li { - float: right; - margin-right: 0; -} - -/* Add in styles for default drupal form classes. */ -.form--inline .form-item { - float: left; - margin-right: 1em; -} -.form--inline .form-actions { - clear: both; -} - -/* Remove the overly-opinionated CLF footer style */ -footer { - background-color: inherit; -} diff --git a/sass/_mixins.scss b/sass/_mixins.scss deleted file mode 100644 index 3a83952..0000000 --- a/sass/_mixins.scss +++ /dev/null @@ -1,97 +0,0 @@ -/** - * @file - * LESS mixins for theme - */ - - -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------- -// For clearing floats like a boss h5bp.com/q -@mixin clearfix() { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -// Webkit-style focus -// ------------------ -@mixin tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -// ---------------------------------- -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - - -// Text overflow -// ------------------------- -// Requires inline-block or block for proper styling -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// ------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -@mixin hide-text() { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - -// FORMS -// -------------------------------------------------- - -// Block level inputs -@mixin input-block-level() { - display: block; - width: 100%; - // Make inputs at least the height of their button counterpart. - min-height: 28px; - // Makes inputs behave like true block-level elements. - box-sizing: border-box; -} - -// Vertical align -@mixin vertical-align() { - position: relative; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} - -// Grid System -// ----------- - -// Centered container element -@mixin container-fixed() { - margin-right: auto; - margin-left: auto; - @include clearfix(); -} diff --git a/sass/_system.theme.local.scss b/sass/_system.theme.local.scss deleted file mode 100644 index a411f96..0000000 --- a/sass/_system.theme.local.scss +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @file - * Overrides for system.theme.css file (can't seem to remove it from the stack ?!?) - */ - -/** - * Markup generated by menu.html.twig. - */ -ul.menu { - margin-left: inherit; /* LTR */ -} -[dir="rtl"] ul.menu { - margin-right: inherit; -} -.menu-item--expanded, -.menu-item--collapsed, -[dir="rtl"] .menu-item--collapsed { - list-style-image: none; - list-style-type: none; -} -.menu-item { - padding-top: inherit; - margin: 0; -} -ul.menu a.is-active { - color: inherit; -} -.node--unpublished .unpublished { - height: 0; - overflow: visible; - color: #d8d8d8; - font-size: 5em; - line-height: 1; - font-family: Impact, "Arial Narrow", Helvetica, sans-serif; - font-weight: bold; - text-transform: uppercase; - text-align: center; - word-wrap: break-word; - position: absolute; - top: 0; - left: 0; - right: 0; -} -.node--unpublished .field__item { - position: relative; -} diff --git a/sass/_variables.scss b/sass/_variables.scss deleted file mode 100644 index dd47c54..0000000 --- a/sass/_variables.scss +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @file - * LESS variables for theme - */ - - -// MEDIA QUERIES AND GRIDS -// ------------------------- -$grid-gutter-width: 15px; -$screen-md: 980px; -$container-large-desktop: (1170px + $grid-gutter-width); - - -// COLOURS -// ------------------------- -$ubc-blue: #002145; -$ubc-grey: #2f5d7c; -$ubc-light-grey: #5e869f; -$ubc-lighter-grey: #98b2c3; -$ubc-silver-grey: #c3d0d8; -$ubc-silver: #d7e0e7; -$silver: #cfcfd0; - - -// GREYS -// ------------------------- -$black: #000; -$gray-darker: #222; -$gray-dark: #333; -$gray: #555; -$gray-light: #999; -$gray-lighter: #eee; -$white: #fff; - - -// LOCAL TASKS -// ------------------------- diff --git a/sass/ckeditor5.scss b/sass/ckeditor5.scss deleted file mode 100644 index 760c1de..0000000 --- a/sass/ckeditor5.scss +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @file - * Approximate CLF's style in CKEditor instances on the Drupal back-end. - */ - -.ck-content { - /* Captions */ - .caption > * { - background: #f3f3f3; - padding: 0.5ex; - border: 1px solid #ccc; - } - - .caption > figcaption { - border: 1px solid #ccc; - border-top: none; - padding-top: 0.5ex; - font-size: small; - text-align: center; - } - - /* Override clf's default blockquote and pre styles when captioned. */ - .caption-pre > pre, - .caption-blockquote > blockquote { - margin: 0; - } - .caption-blockquote > figcaption::before { - content: "— "; - } - .caption-blockquote > figcaption { - text-align: left; - } - [dir="rtl"] .caption-blockquote > figcaption { - text-align: right; - } -} diff --git a/sass/clf.drupal.scss b/sass/clf.drupal.scss deleted file mode 100644 index ecbf177..0000000 --- a/sass/clf.drupal.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @file - * Overrides some default CLF styles - */ - -// Core variables and mixins -@import "_variables.scss"; -@import "_mixins.scss"; -@import "_system.theme.local.scss"; -@import "_clf.fixes.scss"; -@import "_alerts.scss"; diff --git a/sass/clf.social-icons.scss b/sass/clf.social-icons.scss deleted file mode 100644 index d9901b5..0000000 --- a/sass/clf.social-icons.scss +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @file - * Reproduce the CLF's alert styles when we load the minimal CLF. - */ - -/* CLF Social Icon Styles --------------------------------------------------- */ - -/* VARIABLES */ -$clf-social-icon-color: #002145; -$clf-social-icon-color--hover: rgba($clf-social-icon-color, .9); - - -/* GENERAL STYLES */ -#ubc7-unit-social-icons a { - text-decoration: none; -} -#ubc7-unit-social-icons i { - display: inline-block; - height: 32px; - width: 32px; - background-color: $clf-social-icon-color; - background-repeat: no-repeat; - background-position: center center; - background-size: 24px 24px; -} -#ubc7-unit-social-icons i:hover { - background-color: $clf-social-icon-color--hover; -} - -.icon-facebook-sign { - background-image: url('../img/social-icons/facebook.svg'); -} - -.icon-twitter-sign { - background-image: url('../img/social-icons/twitter.svg'); -} - -.icon-youtube-sign { - background-image: url('../img/social-icons/youtube.svg'); -} - -.icon-linkedin-sign { - background-image: url('../img/social-icons/linkedin.svg'); -} - -.icon-instagram-sign { - background-image: url('../img/social-icons/instagram.svg'); -} diff --git a/sass/local-tasks.scss b/sass/local-tasks.scss deleted file mode 100644 index 226e0e8..0000000 --- a/sass/local-tasks.scss +++ /dev/null @@ -1,86 +0,0 @@ -/** - * @file - * Overrides some default Drupal tab styles - */ - -div.tabs { - margin: 0 0 5px 0; -} -ul.primary, -ul.secondary { - width: 99%; -} -ul.primary { - margin: 0 0 .5em 0; - padding: 0; - list-style: none; - white-space: nowrap; - line-height: normal; - box-shadow: inset 0 -3px #999; -} -ul.primary li { - float: left; - margin: 0; - padding: 0; -} -ul.primary li a.is-active { - background-color: #f3f3f3; - color: #005ca7; - box-shadow: inset 0 -3px #005ca7; -} -ul.primary li a.is-active:hover { - color: #01a7e1; - box-shadow: inset 0 -3px #01a7e1; -} -ul.primary li a { - display: inline-block; - margin: 0 3px 0 0; - padding: .25em 1em .5em; - text-decoration: none; - color: #999; - transition: color 0.3s, box-shadow 0.3s; -} -ul.primary li a:hover { - color: #005ca7; -} -ul.primary li a .tab { - display: block; - height: 24px; - margin: 0; - padding: 4px 13px 4px 6px; - line-height: 20px; -} -ul.secondary { - margin: 0; - padding: 0 0 0 5px; - border-bottom: 1px solid silver; - list-style: none; - white-space: nowrap; -} -ul.secondary li { - float: left; - margin: 0 5px 0 0; - padding: 5px 0; - border-right: none; -} -ul.secondary a { - display: block; - height: 24px; - margin: 0; - padding: 0; - border: 1px solid silver; - text-decoration: none; - color: #777; -} -ul.secondary a.is-active, -ul.secondary a.is-active:hover { - border: 1px solid silver; - color: #000; -} -ul.secondary a .tab { - display: block; - height: 18px; - margin: 0; - padding: 3px 8px; - line-height: 18px; -} diff --git a/sass/maintenance-page.scss b/sass/maintenance-page.scss deleted file mode 100644 index 7f3516d..0000000 --- a/sass/maintenance-page.scss +++ /dev/null @@ -1,79 +0,0 @@ -/** - * @file - * Styles for site in maintenance mode - */ - -body.maintenance-page { - background-color: #fff; - color: #000; -} -.maintenance-page #page-wrapper { - background: #fff; - margin-left: auto; - margin-right: auto; - min-width: 0; - min-height: 0; - border: 1px solid #ddd; - margin-top: 40px; -} -.maintenance-page #page { - margin: 10px; -} -.maintenance-page #main-wrapper { - min-height: inherit; -} -.maintenance-page #header, -.maintenance-page #messages { - width: auto; -} -.maintenance-page #main { - margin: 0; -} -.maintenance-page #content .section { - padding: 0 0 0 10px; -} -.maintenance-page #header { - background-color: #fff; - background-image: none; -} -.maintenance-page #name-and-slogan { - margin-bottom: 50px; - margin-left: 0; - padding-top: 20px; - font-size: 90%; -} -.maintenance-page #name-and-slogan, -.maintenance-page #name-and-slogan a, -.maintenance-page #name-and-slogan a:hover, -.maintenance-page #name-and-slogan a:focus { - color: #777; -} -.maintenance-page h1#page-title { - line-height: 1em; - margin-top: 0; -} -.maintenance-page #messages { - padding: 0; - margin-top: 30px; -} -.maintenance-page #messages div.messages { - margin: 0; -} -@media all and (min-width: 800px) { - .maintenance-page #page-wrapper { - width: 800px; - } - .maintenance-page #header div.section, - .maintenance-page #main { - width: 700px; - } - .maintenance-page #messages div.section { - padding: 0; - width: auto; - } -} -@media all and (min-width: 600px) { /* $TODO find the proper breakpoint */ - .maintenance-page #page { - margin: 20px 40px 40px; - } -} diff --git a/sass/navigation.secondary.scss b/sass/navigation.secondary.scss deleted file mode 100644 index f899bf6..0000000 --- a/sass/navigation.secondary.scss +++ /dev/null @@ -1,4 +0,0 @@ -/** - * @file - * Placeholder - */ diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss deleted file mode 100644 index 5ad3de9..0000000 --- a/sass/navigation.slidein.scss +++ /dev/null @@ -1,304 +0,0 @@ -/** - * @file - * Styles for drawer navigation - */ - -// VARIABLES -$box-shadow: 2px 0 2px rgba(0, 0, 0, .15); -$transition-speed: .125s; -$transition-easing: ease; -$hide-desktop-trigger-below: 979px; -$drawer--width: 20rem; -$drawer--padding: 18px; -$drawer--z-index: 10; -$mask--z-index: 2; -$pushed-content--z-index: 1; -$rotation-transition: all .3s ease; -$rotation-transform: rotate(90deg); - -$mask--background: rgba(255, 255, 255, 0.5); -$drawer--background-color: #0055B7; -$drawer--background-color--hover: darken($drawer--background-color, 10%); -$drawer--background-color--focus: darken($drawer--background-color, 15%); -$drawer--border-color: #002145; -$drawer--inner--color: #fff; -$drawer--inner--font-size: 16px; -$drawer-button--background-color: rgba(0, 0, 0, 0); -$drawer-button--background-color--hover: #002145 !important; -$drawer-button--color: #000; -$drawer-button--color--hover: #fff !important; -$drawer-button--font-family: Arial, -Sans-Serif; -$drawer-button--font-size: 14px; -$drawer-button--line-height: 1.75em !important; -$drawer-button--margin-right: 17px; -$drawer-button--padding: 10px; -$drawer-button--padding-small: 8px 10px; - -#drawer-button { - background-color: $drawer-button--background-color; - border: none; - color: $drawer-button--color; - float: right; - font-family: $drawer-button--font-family; - font-size: $drawer-button--font-size; - line-height: $drawer-button--line-height; - margin-right: $drawer-button--margin-right; - outline: 0; - padding: $drawer-button--padding-small; -} - -@media (min-width: 1200px) { - #drawer-button { - padding: $drawer-button--padding; - } -} - -#drawer-button:hover, -.off-canvas-drawer--is-active #drawer-button { - background-color: $drawer-button--background-color--hover; - color: $drawer-button--color--hover; -} - -@import 'button-clf-hamburger'; - -body.toolbar-tray-open.toolbar-vertical.toolbar-fixed.off-canvas-drawer--is-active { - margin-left: 0 !important; -} - -body { - - &.off-canvas-drawer--is-animating, - &.off-canvas-drawer--is-active { - overflow: hidden !important; - } -} - -#pushed-content { - position: relative; - z-index: $pushed-content--z-index; - display: block; - // overflow: hidden; - transition: transform $transition-speed $transition-easing; -} - -#pushed-content.drawer--push-left.off-canvas-drawer--is-active { - transform: translate3D(-$drawer--width, 0, 0); - box-shadow: $box-shadow; -} - -#pushed-content.drawer--push-right.off-canvas-drawer--is-active { - transform: translate3D($drawer--width, 0, 0); - box-shadow: $box-shadow; -} - -#off-canvas-drawer--primary { - transition: transform $transition-speed $transition-easing, visibility $transition-speed $transition-easing; - visibility: visible; - height: 100% !important; - width: 0; - position: fixed; - top: 0; - background-color: $drawer--background-color; - display: block; - overflow: auto; -} - -#off-canvas-drawer--primary.drawer--cover-left, -#off-canvas-drawer--primary.drawer--push-left { - right: 0; - transform: translate3D($drawer--width, 0, 0); -} - -#off-canvas-drawer--primary.drawer--cover-right, -#off-canvas-drawer--primary.drawer--push-right { - left: 0; - transform: translate3D(-$drawer--width, 0, 0); -} - -#off-canvas-drawer--primary.off-canvas-drawer--is-animating { - width: $drawer--width; - z-index: $drawer--z-index; -} - -#off-canvas-drawer--primary.off-canvas-drawer--is-active { - transform: translate3D(0, 0, 0); - z-index: $drawer--z-index; - width: $drawer--width; -} - -#off-canvas-mask { - height: 100%; - width: 0; - position: fixed; - z-index: $mask--z-index; - top: 0; - left: 0; - background-color: $mask--background; - overflow-y: auto; - overflow-x: hidden; - text-align: center; - opacity: 0; - transition: opacity $transition-speed; -} - -#off-canvas-mask.off-canvas-drawer--is-active { - width: 100% !important; - opacity: .5; -} - -@media screen and (max-width: $hide-desktop-trigger-below) { - .has-off-canvas-drawer #ubc7-unit-menu { - display: none; - } -} - -/* Alter CLF Navigation markup to work vertically */ -.off-canvas-drawer, -.off-canvas-drawer a, -.off-canvas-drawer .dropdown-menu a { - color: $drawer--inner--color; -} - -.off-canvas-drawer { - .drawer__close { - background-color: $drawer--background-color; - border-top: 1px solid $drawer--border-color; - border-bottom: none; - border-left: none; - border-right: none; - color: $drawer--inner--color; - padding: $drawer--padding; - display: block; - position: relative; - text-transform: uppercase; - text-align: right; - width: 100%; - - &:hover { - background-color: $drawer--background-color--hover; - } - - &:focus { - background-color: $drawer--background-color--focus; - } - } - - a { - border-top-style: solid; - border-top-width: 1px; - border-color: $drawer--border-color; - box-shadow: none; - box-sizing: border-box; - padding: $drawer--padding; - padding-right: 0; - text-decoration: none; - - &:hover { - color: $drawer--inner--color; - border-color: $drawer--border-color; - } - } - - .nav { - border-bottom: 1px solid $drawer--border-color; - } - - .nav > li > a:focus, - .nav > li > a:hover, - .btn-group:hover > .btn, - .btn-group > a:focus { - background-color: $drawer--background-color--hover; - } - - .btn-group { - width: 100%; - - .dropdown-toggle { - z-index: 2; - float: none; - position: absolute; - right: 0; - top: 0; - height: 55px; - box-shadow: none; - - &:hover:after, - &:focus:after { - color: $drawer--inner--color; - } - - span { - transition: $rotation-transition; - } - - &:hover span { - transform: $rotation-transform; - } - } - - .dropdown-menu { - border: none; - width: 100%; - margin-top: 0; - - li { - border-bottom: none; - } - - a { - background-color: lighten($drawer--background-color, 10%); - padding-top: $drawer--padding; - padding-bottom: $drawer--padding; - } - } - - > a { - width: 100%; - z-index: 1; - } - - > .btn { - background-color: $drawer--background-color; - border-left: none; - border-right: none; - border-bottom: none; - border-color: $drawer--border-color; - line-height: 18px; - box-shadow: none !important; - background-image: none !important; - text-align: left; - } - - &:hover > .dropdown-toggle { - background-color: $drawer--background-color--focus; - } - - &.open { - span { - transform: $rotation-transform; - transition: $rotation-transition; - } - - .btn.dropdown-toggle { - background-color: $drawer--background-color--hover; - border-color: $drawer--border-color; - } - - > .dropdown-menu { - display: block; - position: relative; - } - } - } - - // Make blue arrow white by changing sprite bg position - .ubc7-arrow, - .ubc7-arrow.down-arrow { - background-position: -1178px -227px; - } - - button:focus { - outline: 0; - } -} diff --git a/sass/navigation.sticky.scss b/sass/navigation.sticky.scss deleted file mode 100644 index 8a1774f..0000000 --- a/sass/navigation.sticky.scss +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @file - * Styles for sticky navigation - */ - - // VARIABLES -$mq-large-desktop-min: 1200px; -$mq-desktop-min: 980px; -$mq-mobile-max: 979px; -$menu-height-mobile: 50px; -$menu-height-desktop: 40px; -$menu-height-large-desktop: 45px; - - -@media screen and (max-width: $mq-mobile-max) { - body.unit-area-is-sticky { - padding-top: $menu-height-mobile; - } - - #ubc7-unit.navigation-is-sticky { - position: fixed; - top: 0; - width: 100%; - z-index: 300; - } - body.unit-area-is-sticky #ubc7-unit-menu { - position: fixed; - top: $menu-height-mobile; - width: 100%; - z-index: 300; - } - - #ubc7-unit.navigation-is-sticky .btn-navbar { - margin-right: $menu-height-desktop; - } -} - -@media screen and (min-width: $mq-desktop-min) { - body.unit-menu-is-sticky { - padding-top: $menu-height-desktop; - } - - #ubc7-unit-menu.navigation-is-sticky { - position: fixed; - top: 0; - width: 100%; - z-index: 300; - } -} - -@media screen and (min-width: $mq-desktop-min) and (min-width: $mq-large-desktop-min) { - body.unit-menu-is-sticky { - padding-top: $menu-height-large-desktop; - } -} From 8ce962ba1d12d0f34e21ccc2f224812ba92f0090 Mon Sep 17 00:00:00 2001 From: James O'Toole Date: Mon, 23 Sep 2024 12:40:11 -0700 Subject: [PATCH 2/2] Clean up formatting and comments in stylesheets --- css/ckeditor5.css | 13 ++- css/clf.7.local.css | 185 +++++++++++++++++++---------------- css/clf.7.reset.css | 128 ++++++++++++------------ css/clf.drupal.css | 36 +------ css/clf.social-icons.css | 8 +- css/local-tasks.css | 2 - css/maintenance-page.css | 5 +- css/navigation.secondary.css | 2 - css/navigation.slidein.css | 42 ++++++-- css/navigation.sticky.css | 8 +- 10 files changed, 220 insertions(+), 209 deletions(-) diff --git a/css/ckeditor5.css b/css/ckeditor5.css index 3312028..0e38d06 100644 --- a/css/ckeditor5.css +++ b/css/ckeditor5.css @@ -3,15 +3,12 @@ * @file * Approximate CLF's style in CKEditor instances on the Drupal back-end. */ -.ck-content { - /* Captions */ - /* Override clf's default blockquote and pre styles when captioned. */ -} .ck-content .caption > * { background: #f3f3f3; padding: 0.5ex; border: 1px solid #ccc; } + .ck-content .caption > figcaption { border: 1px solid #ccc; border-top: none; @@ -19,18 +16,20 @@ font-size: small; text-align: center; } + .ck-content .caption-pre > pre, .ck-content .caption-blockquote > blockquote { margin: 0; } + .ck-content .caption-blockquote > figcaption::before { content: "— "; } + .ck-content .caption-blockquote > figcaption { text-align: left; } -.ck-content [dir=rtl] .caption-blockquote > figcaption { + +.ck-content [dir="rtl"] .caption-blockquote > figcaption { text-align: right; } - -/*# sourceMappingURL=ckeditor5.css.map */ diff --git a/css/clf.7.local.css b/css/clf.7.local.css index 4b22aea..88db249 100644 --- a/css/clf.7.local.css +++ b/css/clf.7.local.css @@ -1,5 +1,7 @@ -/* utilities from bootstrap for visibility */ - +/** + * @file + * Local minimal CLF version to replace CDN + */ .collapse:not(.show):not(.in) { display: none; } @@ -8,7 +10,7 @@ position: relative; height: 0; overflow: hidden; - transition: height .35s ease; + transition: height 0.35s ease; } .collapse.in, @@ -107,8 +109,8 @@ body.layout--full-width-left { font-size: 16px; background-color: #fff; border: 1px solid #ccc; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - transition: border .2s linear, box-shadow .2s linear; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border 0.2s linear, box-shadow 0.2s linear; } #ubc7-search-box input, @@ -140,7 +142,8 @@ body.layout--full-width-left { background-repeat: repeat-x; border: 1px solid #002145; border-radius: 0; - box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2), 0 1px 2px rgba(0, 0, 0, .05); + box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; filter: progid:dximagetransform.microsoft.gradient(startColorstr="#002145", endColorstr="#191938", GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); @@ -160,7 +163,7 @@ body.layout--full-width-left { background-color: #2f5d7c; background-position: 0 -200px; border-color: #2f5d7c; - transition: background-position .1s linear; + transition: background-position 0.1s linear; } #ubc7-global-header .row-fluid { @@ -389,12 +392,12 @@ a#ubc7-global-utility-no-script { } #ubc7-global-utility button span.opened, -#ubc7-global-utility button[aria-expanded=true] span { +#ubc7-global-utility button[aria-expanded="true"] span { background-position: -1163px -291px; } .legacy--wg #ubc7-global-utility button span.opened, -.legacy--wg #ubc7-global-utility button[aria-expanded=true] span { +.legacy--wg #ubc7-global-utility button[aria-expanded="true"] span { background-position: -1163px -324px; } @@ -441,7 +444,7 @@ a#ubc7-global-utility-no-script { height: 2px; background: #002145; border-radius: 1px; - box-shadow: 0 1px 0 rgba(0, 0, 0, .25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } #ubc7-unit .btn-navbar .icon-bar + .icon-bar { @@ -468,20 +471,20 @@ a#ubc7-global-utility-no-script { } .ubc7-single-element a #ubc7-unit-faculty { - display: none !important + display: none !important; } #ubc7-unit-name a .shorten { - font-size: 16px !important + font-size: 16px !important; } #ubc7-unit-name a .shorten-more { font-size: 13px !important; - white-space: normal !important + white-space: normal !important; } #ubc7-unit-name a .multi-rows { - line-height: 15px + line-height: 15px; } #ubc7-unit-identifier { @@ -501,7 +504,7 @@ a#ubc7-global-utility-no-script { background: #fff; } -#ubc7-unit-menu .nav{ +#ubc7-unit-menu .nav { margin: 0; padding-left: 0; list-style: none; @@ -659,7 +662,7 @@ a#ubc7-global-utility-no-script { #ubc7-unit-menu .nav > li.active > .btn-group, #ubc7-unit-menu .nav > li > a.is-active { background: #d7e0e7; - box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } #ubc7-unit-menu .nav > li.active > a:hover, @@ -790,10 +793,10 @@ a#ubc7-global-utility-no-script { @media screen and (min-width: 768px) { #ubc7-global-menu .container, - #ubc7-header .container, - #ubc7-unit .container, - #ubc7-unit-menu .container, - #ubc7-footer .container { + #ubc7-header .container, + #ubc7-unit .container, + #ubc7-unit-menu .container, + #ubc7-footer .container { width: auto; margin: 0 auto; } @@ -821,12 +824,12 @@ a#ubc7-global-utility-no-script { } #ubc7-global-utility-no-script, - #ubc7-global-utility button span { + #ubc7-global-utility button span { background-position: -1233px 7px; } #ubc7-global-utility button span.opened, - #ubc7-global-utility button[aria-expanded=true] span { + #ubc7-global-utility button[aria-expanded="true"] span { background-color: #002145; background-position: -1167px 7px; } @@ -836,13 +839,13 @@ a#ubc7-global-utility-no-script { } .legacy--wg #ubc7-global-utility button span.opened, - .legacy--wg #ubc7-global-utility button[aria-expanded=true] span { + .legacy--wg #ubc7-global-utility button[aria-expanded="true"] span { background-position: -1167px -54px; } #ubc7-global-footer .span5, - #ubc7-global-footer .span6, - #ubc7-global-footer .span7 { + #ubc7-global-footer .span6, + #ubc7-global-footer .span7 { display: block; float: left; box-sizing: border-box; @@ -857,7 +860,7 @@ a#ubc7-global-utility-no-script { } #ubc7-global-footer .ml, - #ubc7-global-footer .span7 { + #ubc7-global-footer .span7 { margin-left: 2.7624309392265194%; } @@ -868,10 +871,10 @@ a#ubc7-global-utility-no-script { @media screen and (min-width: 980px) { #ubc7-global-menu .container, - #ubc7-header .container, - #ubc7-unit .container, - #ubc7-unit-menu .container, - #ubc7-footer .container { + #ubc7-header .container, + #ubc7-unit .container, + #ubc7-unit-menu .container, + #ubc7-footer .container { width: 940px; padding-top: 0; padding-right: 16px; @@ -886,9 +889,9 @@ a#ubc7-global-utility-no-script { } .layout--full-width-left #ubc7-global-menu .container, - .layout--full-width-left #ubc7-unit .container, - .layout--full-width-left #ubc7-unit-menu .container, - .layout--full-width-left #ubc7-footer .container { + .layout--full-width-left #ubc7-unit .container, + .layout--full-width-left #ubc7-unit-menu .container, + .layout--full-width-left #ubc7-footer .container { width: auto; } @@ -921,7 +924,7 @@ a#ubc7-global-utility-no-script { } #ubc7-header .span1, - #ubc7-header .span9 { + #ubc7-header .span9 { display: block; float: left; height: 95px; @@ -979,7 +982,7 @@ a#ubc7-global-utility-no-script { } #ubc7-global-utility button span, - a#ubc7-global-utility-no-script { + a#ubc7-global-utility-no-script { height: 35px; } @@ -988,7 +991,7 @@ a#ubc7-global-utility-no-script { } .legacy--wg #ubc7-global-utility button span.opened, - .legacy--wg #ubc7-global-utility button[aria-expanded=true] span { + .legacy--wg #ubc7-global-utility button[aria-expanded="true"] span { background-position: -1167px -48px; } @@ -997,7 +1000,7 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu, - #ubc7-unit-menu .navbar-inner { + #ubc7-unit-menu .navbar-inner { background: #e6e6e6; } @@ -1063,7 +1066,7 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu .dropdown .btn-group a.btn, - #ubc7-unit-menu .dropdown .btn-group button { + #ubc7-unit-menu .dropdown .btn-group button { position: relative; z-index: 1; display: inline-block; @@ -1079,7 +1082,7 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu .dropdown .btn-group:hover button, - #ubc7-unit-menu .dropdown .btn-group button { + #ubc7-unit-menu .dropdown .btn-group button { position: relative; width: 24px; height: 22px !important; @@ -1130,9 +1133,9 @@ a#ubc7-global-utility-no-script { background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, .2); + border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; - box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } #ubc7-unit-menu .nav-collapse .dropdown-menu li { @@ -1140,7 +1143,7 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu .open > .dropdown-menu, - #ubc7-unit-menu .is-open > .dropdown-menu { + #ubc7-unit-menu .is-open > .dropdown-menu { display: block; } @@ -1149,8 +1152,8 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu .nav-collapse .dropdown-menu a, - #ubc7-unit-menu .nav-collapse .nav > li > a, - #ubc7-unit-menu .nav-collapse .nav > li .dropdown-menu a { + #ubc7-unit-menu .nav-collapse .nav > li > a, + #ubc7-unit-menu .nav-collapse .nav > li .dropdown-menu a { display: block; clear: both; padding: 3px 20px; @@ -1160,8 +1163,8 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu .nav-collapse .dropdown-menu a:hover, - #ubc7-unit-menu .nav-collapse .nav > li > a:hover, - #ubc7-unit-menu .nav-collapse .nav > li .dropdown-menu a:hover { + #ubc7-unit-menu .nav-collapse .nav > li > a:hover, + #ubc7-unit-menu .nav-collapse .nav > li .dropdown-menu a:hover { color: #fff; } @@ -1186,15 +1189,15 @@ a#ubc7-global-utility-no-script { } #ubc7-global-menu .container, - #ubc7-header .container, - #ubc7-unit .container, - #ubc7-unit-menu .container, - #ubc7-footer .container { + #ubc7-header .container, + #ubc7-unit .container, + #ubc7-unit-menu .container, + #ubc7-footer .container { width: 1170px; } #ubc7-header .span1, - #ubc7-header .span9 { + #ubc7-header .span9 { box-sizing: border-box; height: 115px; } @@ -1243,13 +1246,13 @@ a#ubc7-global-utility-no-script { } #ubc7-global-utility button span, - a#ubc7-global-utility-no-script { + a#ubc7-global-utility-no-script { height: 45px; background-position: -1233px 13px; } #ubc7-global-utility button span.opened, - #ubc7-global-utility button[aria-expanded=true] span { + #ubc7-global-utility button[aria-expanded="true"] span { background-position: -1167px 13px; } @@ -1279,7 +1282,7 @@ a#ubc7-global-utility-no-script { } #ubc7-unit-menu .dropdown .btn-group:hover button, - #ubc7-unit-menu .dropdown .btn-group a.btn { + #ubc7-unit-menu .dropdown .btn-group a.btn { height: 45px !important; line-height: 45px; } @@ -1299,60 +1302,69 @@ a#ubc7-global-utility-no-script { } } -@media only screen and (-o-min-device-pixel-ratio: "3/2"), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { +@media only screen and (-o-min-device-pixel-ratio: "3/2"), + only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min--moz-device-pixel-ratio: 1.5), + only screen and (min-device-pixel-ratio: 1.5) { #ubc7-global-utility-no-script, - #ubc7-global-utility button span, - #ubc7-logo, - #ubc7-okanagan-campus, - #ubc7-signature a, - #ubc7-vancouver-campus, - #ubc7-wordmark-block, - .ubc7-arrow { + #ubc7-global-utility button span, + #ubc7-logo, + #ubc7-okanagan-campus, + #ubc7-signature a, + #ubc7-vancouver-campus, + #ubc7-wordmark-block, + .ubc7-arrow { background-image: url(../img/clf/ubc7-clf-sprite-blue-2x.png); background-size: 1500px !important; } .legacy--wg #ubc7-global-utility-no-script, - .legacy--wg #ubc7-global-utility button span, - .legacy--wg #ubc7-logo, - .legacy--wg #ubc7-okanagan-campus, - .legacy--wg #ubc7-signature a, - .legacy--wg #ubc7-vancouver-campus, - .legacy--wg #ubc7-wordmark-block, - .legacy--wg .ubc7-arrow, - .legacy--wb #ubc7-global-utility-no-script, - .legacy--wb #ubc7-global-utility button span, - .legacy--wb #ubc7-logo, - .legacy--wb #ubc7-okanagan-campus, - .legacy--wb #ubc7-signature a, - .legacy--wb #ubc7-vancouver-campus, - .legacy--wb #ubc7-wordmark-block, - .legacy--wb .ubc7-arrow { + .legacy--wg #ubc7-global-utility button span, + .legacy--wg #ubc7-logo, + .legacy--wg #ubc7-okanagan-campus, + .legacy--wg #ubc7-signature a, + .legacy--wg #ubc7-vancouver-campus, + .legacy--wg #ubc7-wordmark-block, + .legacy--wg .ubc7-arrow, + .legacy--wb #ubc7-global-utility-no-script, + .legacy--wb #ubc7-global-utility button span, + .legacy--wb #ubc7-logo, + .legacy--wb #ubc7-okanagan-campus, + .legacy--wb #ubc7-signature a, + .legacy--wb #ubc7-vancouver-campus, + .legacy--wb #ubc7-wordmark-block, + .legacy--wb .ubc7-arrow { background-image: url(../img/clf/ubc7-clf-sprite-white-2x.png); background-size: 1500px !important; } .legacy--gw #ubc7-global-utility-no-script, - .legacy--gw #ubc7-global-utility button span, - .legacy--gw #ubc7-logo, - .legacy--gw #ubc7-okanagan-campus, - .legacy--gw #ubc7-signature a, - .legacy--gw #ubc7-vancouver-campus, - .legacy--gw #ubc7-wordmark-block, - .legacy--gw .ubc7-arrow { + .legacy--gw #ubc7-global-utility button span, + .legacy--gw #ubc7-logo, + .legacy--gw #ubc7-okanagan-campus, + .legacy--gw #ubc7-signature a, + .legacy--gw #ubc7-vancouver-campus, + .legacy--gw #ubc7-wordmark-block, + .legacy--gw .ubc7-arrow { background-image: url(../img/clf/ubc7-clf-sprite-grey-2x.png); background-size: 1500px !important; } } -@media only screen and (-o-min-device-pixel-ratio: "3/2") and (max-width: 979px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 979px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 979px), only screen and (min-device-pixel-ratio: 1.5) and (max-width: 979px) { +@media only screen and (-o-min-device-pixel-ratio: "3/2") and (max-width: 979px), + only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 979px), + only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 979px), + only screen and (min-device-pixel-ratio: 1.5) and (max-width: 979px) { #ubc7-signature a { background-position: -2px -435px !important; background-size: 1400px !important; } } -@media only screen and (-o-min-device-pixel-ratio: "3/2") and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 767px), only screen and (min-device-pixel-ratio: 1.5) and (max-width: 767px) { +@media only screen and (-o-min-device-pixel-ratio: "3/2") and (max-width: 767px), + only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), + only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 767px), + only screen and (min-device-pixel-ratio: 1.5) and (max-width: 767px) { #ubc7-signature a { background-position: -2px -544px !important; background-size: 1500px !important; @@ -1368,7 +1380,6 @@ a#ubc7-global-utility-no-script { } /* Centered layout */ - .layout--centered body { background: #ccc; } diff --git a/css/clf.7.reset.css b/css/clf.7.reset.css index d769855..bf9e4e4 100644 --- a/css/clf.7.reset.css +++ b/css/clf.7.reset.css @@ -1,16 +1,20 @@ -.clearfix { - zoom:1 +/** + * @file + * Reset styles + */ + .clearfix { + zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; - content: "" + content: ""; } .clearfix:after { - clear: both + clear: both; } .hide-text { @@ -18,14 +22,14 @@ color: transparent; text-shadow: none; background-color: transparent; - border: 0 + border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; - box-sizing: border-box + box-sizing: border-box; } article, @@ -38,7 +42,7 @@ header, hgroup, nav, section { - display: block + display: block; } audio, @@ -46,17 +50,17 @@ canvas, video { display: inline-block; display: inline; - zoom:1 + zoom: 1; } audio:not([controls]) { - display: none + display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100% + -ms-text-size-adjust: 100%; } body { @@ -66,12 +70,12 @@ body { a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px + outline-offset: -2px; } a:hover, a:active { - outline: 0 + outline: 0; } sub, @@ -79,15 +83,15 @@ sup { position: relative; font-size: 75%; line-height: 0; - vertical-align: baseline + vertical-align: baseline; } sup { - top: -0.5em + top: -0.5em; } sub { - bottom: -0.25em + bottom: -0.25em; } img { @@ -96,12 +100,12 @@ img { max-width: 100%; vertical-align: middle; border: 0; - -ms-interpolation-mode: bicubic + -ms-interpolation-mode: bicubic; } #map_canvas img, .google-maps img { - max-width: none + max-width: none; } button, @@ -110,26 +114,27 @@ select, textarea { margin: 0; font-size: 100%; - vertical-align: middle + vertical-align: middle; } button, input { overflow: visible; - line-height: normal + line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; - border: 0 + border: 0; } -button,html input[type="button"], +button, +html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; - -webkit-appearance: button + -webkit-appearance: button; } label, @@ -140,115 +145,116 @@ input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { - cursor: pointer + cursor: pointer; } input[type="search"] { box-sizing: content-box; - -webkit-appearance: textfield + -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none + -webkit-appearance: none; } textarea { overflow: auto; - vertical-align: top + vertical-align: top; } @media print { * { - color: #000!important; - text-shadow: none!important; - background: transparent!important; - box-shadow: none!important + color: #000 !important; + text-shadow: none !important; + background: transparent !important; + box-shadow: none !important; } - a,a:visited { - text-decoration: underline + a, + a:visited { + text-decoration: underline; } a[href]:after { - content: " (" attr(href) ")" + content: " (" attr(href) ")"; } abbr[title]:after { - content: " (" attr(title) ")" + content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { - content: "" + content: ""; } pre, blockquote { border: 1px solid #999; - page-break-inside: avoid + page-break-inside: avoid; } thead { - display: table-header-group + display: table-header-group; } tr, img { - page-break-inside: avoid + page-break-inside: avoid; } img { - max-width: 100%!important + max-width: 100% !important; } @page { - margin: .5cm + margin: 0.5cm; } p, h2, h3 { orphans: 3; - widows: 3 + widows: 3; } h2, h3 { - page-break-after: avoid + page-break-after: avoid; } .page-header { border: 0; margin: 0; - padding-bottom:0 + padding-bottom: 0; } #ubc7-unit a:link:after { - content:none + content: none; } #ubc7-unit { border-bottom: 1px solid #000; height: 80px; - overflow:visible + overflow: visible; } #ubc7-unit-name { - box-shadow:none + box-shadow: none; } #ubc7-unit-faculty { color: #000; margin-bottom: 10px; - text-shadow:none + text-shadow: none; } #ubc7-unit-identifier { color: #000; font-size: 20pt; - text-shadow:none + text-shadow: none; } #ubc7-header, @@ -263,19 +269,19 @@ textarea { #ubc7-minimal-footer, .ubc7-back-to-top, .breadcrumb { - display:none + display: none; } #ubc7-footer, #ubc7-unit-footer { color: #000 !important; border-color: #000 !important; - padding-top:10px !important + padding-top: 10px !important; } #ubc7-unit-social-icons { color: #000; - visibility:visible + visibility: visible; } .row-fluid { @@ -285,43 +291,43 @@ textarea { margin: 0 5%; padding-top: 0 !important; padding-bottom: 0 !important; - width:auto + width: auto; } img { max-width: 100%; - border:0 + border: 0; } video, audio, object, embed { - display:none + display: none; } .btn, .btn-group { background: 0; border-color: #000; - color:#000 + color: #000; } .bootstrap-sidenav, .pagination, .pager, .progress { - display:none + display: none; } #ubc7-carousel .carousel-caption h4, #ubc7-carousel .carousel-caption p, #ubc7-carousel .item p > a { - color:#000 + color: #000; } #ubc7-carousel-counter { - display:none + display: none; } .nav .nav-tabs a:link:after, @@ -335,7 +341,7 @@ textarea { .nav a:link:after, .pager a:link:after, .btn-navbar a:link:after { - content:none + content: none; } .nav-tabs > .active > a, @@ -343,11 +349,11 @@ textarea { border: 0; color: #000; font-weight: 700; - border-bottom:2px solid #000 + border-bottom: 2px solid #000; } .nav-tabs > li > a { color: #000; - border:0 + border: 0; } } diff --git a/css/clf.drupal.css b/css/clf.drupal.css index a46a43d..49e2394 100644 --- a/css/clf.drupal.css +++ b/css/clf.drupal.css @@ -2,32 +2,17 @@ * @file * Overrides some default CLF styles */ -/** - * @file - * LESS variables for theme - */ -/** - * @file - * LESS mixins for theme - */ -/** - * @file - * Overrides for system.theme.css file (can't seem to remove it from the stack ?!?) - */ -/** - * Markup generated by menu.html.twig. - */ ul.menu { margin-left: inherit; /* LTR */ } -[dir=rtl] ul.menu { +[dir="rtl"] ul.menu { margin-right: inherit; } .menu-item--expanded, .menu-item--collapsed, -[dir=rtl] .menu-item--collapsed { +[dir="rtl"] .menu-item--collapsed { list-style-image: none; list-style-type: none; } @@ -62,10 +47,6 @@ ul.menu a.is-active { position: relative; } -/** - * @file - * Overrides some default CLF styles - */ /* Change the 'body' background colour when full width and left-aligned layouts are chosen */ body.full-width, body.fluid-width { @@ -126,14 +107,7 @@ footer { background-color: inherit; } -/** - * @file - * Override the CLF's alert styles. - */ -/* UNIT Alert Styles --------------------------------------------------- */ -/* VARIABLES */ -/* GENERAL STYLES */ +/* Unit Alert Styles */ .alert { color: #fff; padding: 15px 35px 15px 15px; @@ -142,6 +116,7 @@ footer { border-width: 2px; border-radius: 0; } + .alert a, .alert h4 { color: #fff; @@ -162,6 +137,7 @@ a.close { font-weight: bold; line-height: 1; } + a.close:hover { opacity: 1; } @@ -191,5 +167,3 @@ a.close:hover { background-color: #324d6a; border-color: #00162f; } - -/*# sourceMappingURL=clf.drupal.css.map */ diff --git a/css/clf.social-icons.css b/css/clf.social-icons.css index a79258f..02843f8 100644 --- a/css/clf.social-icons.css +++ b/css/clf.social-icons.css @@ -1,11 +1,7 @@ /** * @file - * Reproduce the CLF's alert styles when we load the minimal CLF. + * CLF Social Icon Styles */ -/* CLF Social Icon Styles --------------------------------------------------- */ -/* VARIABLES */ -/* GENERAL STYLES */ #ubc7-unit-social-icons a { text-decoration: none; } @@ -43,5 +39,3 @@ .icon-instagram-sign { background-image: url("../img/social-icons/instagram.svg"); } - -/*# sourceMappingURL=clf.social-icons.css.map */ diff --git a/css/local-tasks.css b/css/local-tasks.css index c9e48fe..40ae132 100644 --- a/css/local-tasks.css +++ b/css/local-tasks.css @@ -96,5 +96,3 @@ ul.secondary a .tab { padding: 3px 8px; line-height: 18px; } - -/*# sourceMappingURL=local-tasks.css.map */ diff --git a/css/maintenance-page.css b/css/maintenance-page.css index afc86f3..e898ee1 100644 --- a/css/maintenance-page.css +++ b/css/maintenance-page.css @@ -84,10 +84,9 @@ body.maintenance-page { width: auto; } } -@media all and (min-width: 600px) { /* $TODO find the proper breakpoint */ +@media all and (min-width: 600px) { + /* $TODO find the proper breakpoint */ .maintenance-page #page { margin: 20px 40px 40px; } } - -/*# sourceMappingURL=maintenance-page.css.map */ diff --git a/css/navigation.secondary.css b/css/navigation.secondary.css index 234db59..f899bf6 100644 --- a/css/navigation.secondary.css +++ b/css/navigation.secondary.css @@ -2,5 +2,3 @@ * @file * Placeholder */ - -/*# sourceMappingURL=navigation.secondary.css.map */ diff --git a/css/navigation.slidein.css b/css/navigation.slidein.css index 60e9661..88859b6 100644 --- a/css/navigation.slidein.css +++ b/css/navigation.slidein.css @@ -20,6 +20,7 @@ padding: 10px; } } + #drawer-button:hover, .off-canvas-drawer--is-active #drawer-button { background-color: #002145 !important; @@ -36,11 +37,13 @@ padding: 11px 0 0 13px; width: 32px; } + .drawer-toggle--hamburger:hover { box-shadow: 1px 1px 1px #191938; -moz-box-shadow: 1px 1px 1px #191938; -webkit-box-shadow: inset 1px 1px 1px #191938; } + .drawer-toggle--hamburger span { margin-top: 3px; display: block; @@ -51,6 +54,7 @@ -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } + .drawer-toggle--hamburger span:first-child { margin-top: 0; } @@ -63,6 +67,7 @@ margin-bottom: 3px; } } + @media screen and (min-width: 1200px) { .drawer-toggle--hamburger { margin-top: 5px; @@ -70,11 +75,13 @@ margin-bottom: 5px; } } + body.toolbar-tray-open.toolbar-vertical.toolbar-fixed.off-canvas-drawer--is-active { margin-left: 0 !important; } -body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { +body.off-canvas-drawer--is-animating, +body.off-canvas-drawer--is-active { overflow: hidden !important; } @@ -102,7 +109,7 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { width: 0; position: fixed; top: 0; - background-color: #0055B7; + background-color: #0055b7; display: block; overflow: auto; } @@ -155,6 +162,7 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { display: none; } } + /* Alter CLF Navigation markup to work vertically */ .off-canvas-drawer, .off-canvas-drawer a, @@ -163,7 +171,7 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { } .off-canvas-drawer .drawer__close { - background-color: #0055B7; + background-color: #0055b7; border-top: 1px solid #002145; border-bottom: none; border-left: none; @@ -176,9 +184,11 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { text-align: right; width: 100%; } + .off-canvas-drawer .drawer__close:hover { background-color: #003d84; } + .off-canvas-drawer .drawer__close:focus { background-color: #00316b; } @@ -192,22 +202,27 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { padding-right: 0; text-decoration: none; } + .off-canvas-drawer a:hover { color: #fff; border-color: #002145; } + .off-canvas-drawer .nav { border-bottom: 1px solid #002145; } + .off-canvas-drawer .nav > li > a:focus, .off-canvas-drawer .nav > li > a:hover, .off-canvas-drawer .btn-group:hover > .btn, .off-canvas-drawer .btn-group > a:focus { background-color: #003d84; } + .off-canvas-drawer .btn-group { width: 100%; } + .off-canvas-drawer .btn-group .dropdown-toggle { z-index: 2; float: none; @@ -217,34 +232,43 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { height: 55px; box-shadow: none; } -.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after { + +.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, +.off-canvas-drawer .btn-group .dropdown-toggle:focus:after { color: #fff; } + .off-canvas-drawer .btn-group .dropdown-toggle span { transition: all 0.3s ease; } + .off-canvas-drawer .btn-group .dropdown-toggle:hover span { transform: rotate(90deg); } + .off-canvas-drawer .btn-group .dropdown-menu { border: none; width: 100%; margin-top: 0; } + .off-canvas-drawer .btn-group .dropdown-menu li { border-bottom: none; } + .off-canvas-drawer .btn-group .dropdown-menu a { background-color: #006dea; padding-top: 18px; padding-bottom: 18px; } + .off-canvas-drawer .btn-group > a { width: 100%; z-index: 1; } + .off-canvas-drawer .btn-group > .btn { - background-color: #0055B7; + background-color: #0055b7; border-left: none; border-right: none; border-bottom: none; @@ -254,27 +278,31 @@ body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { background-image: none !important; text-align: left; } + .off-canvas-drawer .btn-group:hover > .dropdown-toggle { background-color: #00316b; } + .off-canvas-drawer .btn-group.open span { transform: rotate(90deg); transition: all 0.3s ease; } + .off-canvas-drawer .btn-group.open .btn.dropdown-toggle { background-color: #003d84; border-color: #002145; } + .off-canvas-drawer .btn-group.open > .dropdown-menu { display: block; position: relative; } + .off-canvas-drawer .ubc7-arrow, .off-canvas-drawer .ubc7-arrow.down-arrow { background-position: -1178px -227px; } + .off-canvas-drawer button:focus { outline: 0; } - -/*# sourceMappingURL=navigation.slidein.css.map */ diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index 50f76f7..7768101 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -6,26 +6,31 @@ body.unit-area-is-sticky { padding-top: 50px; } + #ubc7-unit.navigation-is-sticky { position: fixed; top: 0; width: 100%; z-index: 300; } + body.unit-area-is-sticky #ubc7-unit-menu { position: fixed; top: 50px; width: 100%; z-index: 300; } + #ubc7-unit.navigation-is-sticky .btn-navbar { margin-right: 40px; } } + @media screen and (min-width: 980px) { body.unit-menu-is-sticky { padding-top: 40px; } + #ubc7-unit-menu.navigation-is-sticky { position: fixed; top: 0; @@ -33,10 +38,9 @@ z-index: 300; } } + @media screen and (min-width: 980px) and (min-width: 1200px) { body.unit-menu-is-sticky { padding-top: 45px; } } - -/*# sourceMappingURL=navigation.sticky.css.map */