Skip to content

Commit

Permalink
Merge pull request #513 from CuBoulder/issue/511
Browse files Browse the repository at this point in the history 
Updates tiamat-theme to Font Awesome 6 compatibility
  • Loading branch information
@jcsparks @web-flow
jcsparks authored and web-flow committed Oct 23, 2023
2 parents 36bd1f0 + c2816d2 commit e952757
Show file tree
Hide file tree
Showing 36 changed files with 360 additions and 363 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- ### Updates tiamat-theme to Font Awesome 6 compatibility
Resolves CuBoulder/tiamat-theme#511
---

- ### initial mobile menu commit
Initial Mobile Menu commit before styling is decided
---
Expand Down
221 changes: 108 additions & 113 deletions css/block/expandable-content.css
View file
Original file line number Diff line number Diff line change
@@ -1,198 +1,193 @@
/*
* Styles for expandable content paragraph
*
*/
*/

.ucb-expandable-content .vertical-tab-content {
width: 100%;
width: 100%;
}

.ucb-expandable-content .horizontal-tab-accordion .nav-tabs,
.ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
display: none;
display: none;
}

.ucb-expandable-content .accordion-button, .ucb-expandable-content .accordion-button:not(.collapsed), .ucb-expandable-content .accordion-button:focus {
color: #0277bd;
font-size: 18px;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
box-shadow: none;

color: #0277bd;
font-size: 18px;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
box-shadow: none;
}

.ucb-expandable-content .accordion-button:not(.collapsed)::after, .ucb-expandable-content .accordion-button::after {
background: none;
background: none;
}

.ucb-expandable-content .accordion-button::before {
flex-shrink: 0;
margin-right: 0.25em;
content: "\f0fe";
transition: transform 0.2s ease-in-out;
font-family: 'Font Awesome 5 Free', sans-serif;
font-weight: 900;
color: #0277bd;
.ucb-expandable-content .accordion-button .ucb-accordion-button-content-icon-expand,
.ucb-expandable-content .accordion-button .ucb-accordion-button-content-icon-collapse {
flex-shrink: 0;
margin-right: 0.25em;
}

.ucb-expandable-content .accordion-button:not(.collapsed)::before {
content: "\f146";
.ucb-expandable-content .accordion-button.collapsed .ucb-accordion-button-content-icon-collapse,
.ucb-expandable-content .accordion-button:not(.collapsed) .ucb-accordion-button-content-icon-expand {
display: none;
}

.ucb-expandable-content .accordion-button:hover {
color: #b71c1c;
color: #b71c1c;
}

.ucb-expandable-content .accordion-button:hover::before {
color: #b71c1c;
color: #b71c1c;
}

.ucb-expandable-content .accordion-button, .ucb-expandable-content .accordion-body {
padding-left: 0;
padding-right: 0;
padding-left: 0;
padding-right: 0;
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .accordion-button {
color: var(--ucb-gold);
color: var(--ucb-gold);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .accordion-button::before {
color: var(--ucb-gold);
color: var(--ucb-gold);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .accordion-button:hover {
color: var(--ucb-white);
color: var(--ucb-white);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .accordion-button:hover::before {
color: var(--ucb-white);
color: var(--ucb-white);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .horizontal-tab-link.nav-link{
color: var(--ucb-white);
color: var(--ucb-white);
}

.ucb-bootstrap-layout-section-light .ucb-expandable-content .horizontal-tab-link.nav-link{
color: var(--ucb-black);
color: var(--ucb-black);
}

.ucb-expandable-content .horizontal-tab-link.nav-link.active {
color: var(--ucb-white);
background-color: var(--ucb-black);
border-radius: 0;
color: var(--ucb-white);
background-color: var(--ucb-black);
border-radius: 0;
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .horizontal-tab-link.nav-link.active {
color: var(--ucb-black);
background-color: var(--ucb-white);
color: var(--ucb-black);
background-color: var(--ucb-white);
}

.ucb-expandable-content .horizontal-tab-link.nav-link {
font-weight: bold;
line-height: 1.2em;
padding: 8px 15px;
font-weight: bold;
line-height: 1.2em;
padding: 8px 15px;
}

.ucb-expandable-content .horizontal-tab-link.nav-link,
.ucb-expandable-content .horizontal-tab-link.nav-link:hover,
.ucb-expandable-content .horizontal-tab-link.nav-link:focus {
border: none;
border-radius: 0;
border: none;
border-radius: 0;
}

.ucb-expandable-content .vertical-tab-link.nav-link {
color: #6a6a6a;
background-color: #e7e7e7;
font-weight: bold;
text-align: left;
border-radius: 0;
color: #6a6a6a;
background-color: #e7e7e7;
font-weight: bold;
text-align: left;
border-radius: 0;
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .vertical-tab-link.nav-link {
color: #cccccc;
background-color: rgba(128, 128, 128, 0.333);
color: #cccccc;
background-color: rgba(128, 128, 128, 0.333);
}

.ucb-expandable-content .vertical-tab-link.nav-link.active {
color: var(--ucb-black);
background-color: var(--ucb-white);
color: var(--ucb-black);
background-color: var(--ucb-white);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .vertical-tab-link.nav-link.active {
color: var(--ucb-white);
background-color: var(--ucb-black);
color: var(--ucb-white);
background-color: var(--ucb-black);
}

.ucb-expandable-content .accordian-content .collapse:not(.show), .ucb-expandable-content .horizontal-tab-content .collapse:not(.show), .ucb-expandable-content .vertical-tab-content .collapse:not(.show) {
display: none;
display: none;
}

.ucb-expandable-content .accordian-content .collapse.show, .ucb-expandable-content .horizontal-tab-content .collapse.show, .ucb-expandable-content .vertical-tab-content .collapse.show,
.ucb-expandable-content .accordian-content .collapsing, .ucb-expandable-content .horizontal-tab-content .collapsing, .ucb-expandable-content .vertical-tab-content .collapsing {
display: block;
display: block;
}

.ucb-expandable-content .accordion-item {
color: inherit;
background-color: inherit;
border-bottom: 1px solid rgba(128, 128, 128, 0.333);
color: inherit;
background-color: inherit;
border-bottom: 1px solid rgba(128, 128, 128, 0.333);
}

@media (min-width: 768px) {
.ucb-expandable-content .horizontal-tab-accordion .nav-tabs,
.ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
display: flex;
}

.ucb-expandable-content .horizontal-tab-accordion .nav-tabs {
border-bottom: 2px solid var(--ucb-black);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .horizontal-tab-accordion .nav-tabs {
border-bottom: 2px solid var(--ucb-white);
}

.ucb-expandable-content .horizontal-tab-content .accordion-header, .ucb-expandable-content .vertical-tab-content .accordion-header,
.ucb-expandable-content .horizontal-tab-content .collapse.show, .ucb-expandable-content .vertical-tab-content .collapse.show {
display: none;
}

.ucb-expandable-content .horizontal-tab-content .collapse.active, .ucb-expandable-content .vertical-tab-content .collapse.active {
display: block;
}

.ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
width: 100%;
max-width: 25%;
background-color: #f2f2f2;
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
background-color: rgba(128, 128, 128, 0.333);
}

.ucb-expandable-content .vertical-tab-accordion .vertical-tab-content {
display: flex;
max-width: 75%;
padding: 0 1em;
}

.ucb-expandable-content .horizontal-tab-accordion .horizontal-accordion-tab,
.ucb-expandable-content .vertical-tab-accordion .vertical-accordion-tab {
display: none;
}

.ucb-expandable-content .horizontal-tab-content .accordion-item, .ucb-expandable-content .vertical-tab-content .accordion-item {
border-bottom: none;
}

.ucb-expandable-content .horizontal-tab-content .accordion-body, .ucb-expandable-content .vertical-tab-content .accordion-body {
padding-top: 20px;
padding-bottom: 0;
}

.ucb-expandable-content .vertical-tab-accordion {
background: none;
border: 1px solid rgba(128, 128, 128, 0.333);
}
.ucb-expandable-content .horizontal-tab-accordion .nav-tabs,
.ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
display: flex;
}

.ucb-expandable-content .horizontal-tab-accordion .nav-tabs {
border-bottom: 2px solid var(--ucb-black);
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .horizontal-tab-accordion .nav-tabs {
border-bottom: 2px solid var(--ucb-white);
}

.ucb-expandable-content .horizontal-tab-content .accordion-header, .ucb-expandable-content .vertical-tab-content .accordion-header,
.ucb-expandable-content .horizontal-tab-content .collapse.show, .ucb-expandable-content .vertical-tab-content .collapse.show {
display: none;
}

.ucb-expandable-content .horizontal-tab-content .collapse.active, .ucb-expandable-content .vertical-tab-content .collapse.active {
display: block;
}

.ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
width: 100%;
max-width: 25%;
background-color: #f2f2f2;
}

.ucb-bootstrap-layout-section-dark .ucb-expandable-content .vertical-tab-accordion .vertical-tabs {
background-color: rgba(128, 128, 128, 0.333);
}

.ucb-expandable-content .vertical-tab-accordion .vertical-tab-content {
display: flex;
max-width: 75%;
padding: 0 1em;
}

.ucb-expandable-content .horizontal-tab-accordion .horizontal-accordion-tab,
.ucb-expandable-content .vertical-tab-accordion .vertical-accordion-tab {
display: none;
}

.ucb-expandable-content .horizontal-tab-content .accordion-item, .ucb-expandable-content .vertical-tab-content .accordion-item {
border-bottom: none;
}

.ucb-expandable-content .horizontal-tab-content .accordion-body, .ucb-expandable-content .vertical-tab-content .accordion-body {
padding-top: 20px;
padding-bottom: 0;
}

.ucb-expandable-content .vertical-tab-accordion {
background: none;
border: 1px solid rgba(128, 128, 128, 0.333);
}
}
2 changes: 1 addition & 1 deletion css/styleguide/type.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ ul.list-style-border > li { list-style: none; border: 1px solid rgba(128, 128, 1

ul.list-style-icon-1, ul.list-style-icon-2, ul.list-style-icon-3, ul.list-style-icon-4, ul.list-style-icon-5, ul.list-style-icon-6, ul.list-style-icon-check, ul.list-style-icon-checkbox, ul.list-style-icon-angle-double, ul.list-style-icon-circle-arrow, ul.list-style-icon-star, ul.list-style-icon-finger { list-style: none; list-style-image: none; overflow: hidden; }
ul.list-style-icon-1 > li, ul.list-style-icon-2 > li, ul.list-style-icon-3 > li, ul.list-style-icon-4 > li, ul.list-style-icon-5 > li, ul.list-style-icon-6 > li, ul.list-style-icon-check > li, ul.list-style-icon-checkbox > li, ul.list-style-icon-angle-double > li, ul.list-style-icon-circle-arrow > li, ul.list-style-icon-star > li, ul.list-style-icon-finger > li { list-style: none !important; list-style-image: none !important; position: relative; }
ul.list-style-icon-1 li:before, ul.list-style-icon-2 li:before, ul.list-style-icon-3 li:before, ul.list-style-icon-4 li:before, ul.list-style-icon-5 li:before, ul.list-style-icon-6 li:before, ul.list-style-icon-check li:before, ul.list-style-icon-checkbox li:before, ul.list-style-icon-angle-double li:before, ul.list-style-icon-circle-arrow li:before, ul.list-style-icon-star li:before, ul.list-style-icon-finger li:before { font-family: "Font Awesome 5 Free", "FontAwesome"; position: absolute; top: 0; left: -20px; color: #cfb87c; }
ul.list-style-icon-1 li:before, ul.list-style-icon-2 li:before, ul.list-style-icon-3 li:before, ul.list-style-icon-4 li:before, ul.list-style-icon-5 li:before, ul.list-style-icon-6 li:before, ul.list-style-icon-check li:before, ul.list-style-icon-checkbox li:before, ul.list-style-icon-angle-double li:before, ul.list-style-icon-circle-arrow li:before, ul.list-style-icon-star li:before, ul.list-style-icon-finger li:before { font-family: "Font Awesome 6 Free"; position: absolute; top: 0; left: -20px; color: #cfb87c; }

ul.list-style-icon-1 > li:before, ul.list-style-icon-check > li:before { content: '\f00c'; font-weight: 900; }

Expand Down
10 changes: 5 additions & 5 deletions css/ucb-article.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
font-weight: 700;
}

i.far.fa-calendar {
i.fa-regular.fa-calendar {
color: #999;
}

Expand All @@ -32,7 +32,7 @@ i.far.fa-calendar {
line-height: 1em;
}

.ucb-article-category-icon, .ucb-article-tag-icon{
.ucb-article-category-icon, .ucb-article-tag-icon {
background-color: #555555;
color: #e7e7e7;
height: 16px;
Expand Down Expand Up @@ -71,9 +71,9 @@ i.far.fa-calendar {
color: #fff;
}

.ucb-article-tags i.fas,
.ucb-article-categories i.fas
.ucb-article-issue i.fas {
.ucb-article-tags i.fa-solid,
.ucb-article-categories i.fa-solid,
.ucb-article-issue i.fa-solid {
padding: 0.5em;
background: #555;
color: #fff;
Expand Down
Loading

0 comments on commit e952757

Please sign in to comment.