Skip to content

Update css #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 11, 2025
Merged

Update css #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b0f5dc
Update css
occupant Sep 10, 2025
1b0a199
Update css
occupant Sep 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions css/drupal.ckeditor.theme.styles.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/drupal.ckeditor.theme.styles.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions css/styles.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/styles.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions img/svg/icon-check-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/svg/icon-minus.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/svg/icon-plus.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/svg/icon-select-down.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 19 additions & 56 deletions src/css/base/form.base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ textarea {
}

label {
font-weight: 400;
@apply font-normal;
}

[type="number"],
Expand All @@ -32,15 +32,8 @@ label {
[type="color"],
textarea,
select {
@apply bg-white border text-grey-700 border-grey-300;
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding: 0.5em 1em;
@apply bg-white border text-grey-700 border-grey-300 box-border w-full max-w-full px-[1em] py-[.5em] appearance-none;
border-radius: var(--input-border-radius);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

[type="number"]:focus,
Expand All @@ -62,8 +55,7 @@ textarea:focus {
}

::placeholder {
opacity: 1;
color: var(--grey-300);
@apply opacity-100 text-grey-300;
}

.form-disabled [type="number"],
Expand All @@ -81,58 +73,45 @@ textarea:focus {
.form-disabled [type="tel"],
.form-disabled [type="color"],
.form-disabled textarea {
@apply border-2 bg-grey-50 border-grey-300;
cursor: not-allowed;
@apply border-2 cursor-not-allowed bg-grey-50 border-grey-300;
}

/* select element styles */
select {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
@apply bg-[url('../img/svg/icon-select-down.svg')] pr-10 bg-no-repeat bg-[length:1.5em_1.5em];
background-position: right 0.5rem center;
background-size: 1.5em 1.5em;
print-color-adjust: exact;
}

/* fieldset and legend */
fieldset {
@apply pb-8;
@apply pb-8 border-0;
margin-top: calc(1.625 * 1rem);
border-width: 0;
}

legend {
@apply text-ubc-blue-sea;
display: block;
padding-bottom: 0.5rem;
text-transform: uppercase;
border-bottom: 0.25rem solid rgb(var(--ubc-blue-sea));
@apply text-ubc-blue-sea block pb-2 uppercase border-b-[.25rem] border-ubc-blue-sea font-semibold;
font-size: 110%;
font-weight: 600;
}

.form-item-wrapper {
margin-top: 1.5rem;
@apply mt-6;
}

.form-item-wrapper > label {
@apply text-ubc-blue;
display: block;
font-size: 0.875em;
font-weight: 600;
@apply block text-sm font-semibold text-ubc-blue;
}

.form-item-wrapper:not(.form-checkbox):not(.form-radio) > label {
padding-bottom: 0.5rem;
@apply pb-2;
}

.form-item {
margin-top: 1.5rem;
@apply mt-6;
}

fieldset {
border-width: 0;
@apply border-0;
}

/*
Expand All @@ -152,51 +131,35 @@ fieldset fieldset legend {
*/

input[type="search"] {
box-sizing: border-box;
@apply box-border;
}

/* radio and checkbox element styles - expects input before label */
.form-checkbox,
.form-radio {
display: inline-flex;
align-items: center;
@apply inline-flex items-center;
}

.form-checkbox label,
.form-radio label {
margin-right: 1em;
margin-left: 1em;
@apply mx-[1em];
}

[type=checkbox],
[type=radio] {
display: inline-block;
flex-shrink: 0;
@apply inline-block p-0 align-middle bg-white border appearance-none select-none shrink-0 border-ubc-blue text-ubc-blue;
width: 1em;
height: 1em;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
color: rgba(0, 33, 69, 1);
border-width: 1px;
border-color: rgba(0, 33, 69, 1);
background-color: #fff;
background-origin: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
print-color-adjust: exact;
}

[type=checkbox] {
border-radius: 0;
@apply rounded-none;
}

[type=radio] {
border-radius: 100%;
@apply rounded-full;
}

[type=checkbox]:focus,
Expand All @@ -216,7 +179,7 @@ input[type="search"] {
}

[type=checkbox]:checked {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='white'%3E%3C/path%3E%3C/svg%3E");
@apply bg-[url('../img/svg/icon-check-white.svg')];
}

[type=radio]:checked {
Expand Down
15 changes: 3 additions & 12 deletions src/css/components/accordion.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,8 @@
*/

.accordion__trigger {
@apply relative w-full py-4 pr-12 mt-2 overflow-hidden text-left text-ubc-blue;

border-bottom: 1px solid var(--grey-300);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" %3E%3Cpath d="M53 29H35V11a3 3 0 0 0-6 0v18H11a3 3 0 0 0 0 6h18v18a3 3 0 0 0 6 0V35h18a3 3 0 0 0 0-6z" fill="%23002145" stroke-width="0" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" %3E%3C/path%3E%3C/svg%3E');
background-repeat: no-repeat;
@apply relative w-full py-4 pr-12 mt-2 overflow-hidden text-left border-b text-ubc-blue border-grey-300 bg-[url('../img/svg/icon-plus.svg')] bg-no-repeat bg-[length:1rem_1rem];
background-position: right 1rem top 50%;
background-size: 1rem 1rem;
}

/*
Expand Down Expand Up @@ -44,15 +39,11 @@
*/

.accordion__trigger:hover {
cursor: pointer;
border-bottom: 1px solid var(--color-secondary);
@apply border-b cursor-pointer border-unit-secondary;
}

.accordion__trigger.is-open {
@apply font-semibold;

border-bottom: 1px solid var(--color-primary);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" %3E%3Cpath d="M53 34H11a3 3 0 0 1 0-6h42a3 3 0 0 1 0 6z" fill="%230055b7" stroke-width="0" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" %3E%3C/path%3E%3C/svg%3E');
@apply font-semibold bg-[url('../img/svg/icon-minus.svg')] border-b border-unit-primary;
}

.accordion__trigger h3 {
Expand Down
7 changes: 2 additions & 5 deletions src/css/components/carousel.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@
}

.tns-controls button {
@apply self-center block w-16 h-16 overflow-hidden pointer-events-auto;
@apply self-center block w-16 h-16 overflow-hidden pointer-events-auto bg-ubc-blue-cornflower;

text-indent: -300%;
background-color: var(--ubc-blue-cornflower);
/* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 22L12 12L2 2' stroke='%23fff' stroke-opacity='0.7' fill='none' stroke-width='5'/%3E%3C/svg%3E%0A"); */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M85,277.375h259.704L225.002,397.077L256,427l171-171L256,85l-29.922,29.924l118.626,119.701H85V277.375z' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
Expand All @@ -28,7 +27,7 @@
}

.tns-controls button:hover {
background-color: var(--ubc-blue-cobalt);
@apply bg-ubc-blue-cobalt;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M85,277.375h259.704L225.002,397.077L256,427l171-171L256,85l-29.922,29.924l118.626,119.701H85V277.375z' fill='%23fff'/%3E%3C/svg%3E");
}

Expand All @@ -39,13 +38,11 @@
/* page indicators */
.tns-nav {
@apply absolute z-40 flex justify-center w-full;

bottom: -2rem;
}

.tns-nav button {
@apply inline-block w-8 h-2 m-2 cursor-pointer bg-ubc-blue-cornflower;

transition: 0.4s ease-in-out;
}

Expand Down
21 changes: 4 additions & 17 deletions src/css/components/chosen.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,17 @@
}

.chosen-container a {
text-decoration: none;
color: var(--ubc-blue-cobalt) !important;
@apply no-underline !text-ubc-blue-cobalt;
}

.form-select a.chosen-single,
.form-select .chosen-choices {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
padding: 0.5rem 1rem;
color: var(--grey-700);
border: 2px solid var(--grey-300) !important;
@apply box-border block w-full h-auto max-w-full px-4 py-2 m-0 bg-white bg-no-repeat border-2 appearance-none text-grey-700 border-r-grey-300;
border-radius: var(--input-border-radius);
background-color: var(--white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='%230055b7' d='M80,124.6c-2.6,0-5.1-1.2-6.9-3.2l-61-71.1c-3.2-3.8-2.8-9.5,1-12.7c3.8-3.2,9.5-2.8,12.7,1L80,101.7%0Al54.1-63.1c3.2-3.8,9-4.2,12.7-1c3.8,3.2,4.2,9,1,12.7l-60.9,71.1C85.2,123.4,82.7,124.6,80,124.6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem top 50%;
background-size: 1em auto;
line-height: 1.625;
appearance: none;
}

.form-select .chosen-container-active a.chosen-single {
Expand All @@ -58,17 +46,16 @@


.chosen-container .chosen-results {
color: var(--grey-900);
@apply text-grey-900;
}

.chosen-container .chosen-results li {
@apply text-base;

padding: 0.75rem 0.5rem;
}

.chosen-container .chosen-results li.highlighted {
background-color: var(--ubc-blue-cobalt);
@apply bg-ubc-blue-cobalt;
background-image: none;
}

Expand Down
1 change: 0 additions & 1 deletion src/css/components/message.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@

.message__close:hover {
@apply text-black no-underline;

background-color: rgba(255, 255, 255, 0.5);
}

Expand Down
14 changes: 3 additions & 11 deletions src/css/components/navigation.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,18 @@
*/

.piped {
position: relative;
display: inline-block;
padding-right: 1rem;
@apply relative inline-block pr-4;
}

.piped::after {
position: absolute;
top: 0;
right: .25rem;
display: block;
@apply absolute top-0 block right-1;
content: "/";
line-height: 1.5;
}

.crumb::after {
padding-right: .25em;
padding-left: .5em;
@apply pr-[.25em] pl-[.5em] inline-block text-unit-secondary;
content: "/";
display: inline-block;
color: var(--unit-secondary);
}

/*
Expand Down
22 changes: 6 additions & 16 deletions src/css/components/tabcordion.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,45 +19,35 @@
}

.tabcordion__tab button {
@apply relative block w-full h-full py-4 overflow-hidden text-center text-ubc-blue;

border-bottom: 1px solid var(--grey-300);
@apply relative block w-full h-full py-4 overflow-hidden text-center border-b text-ubc-blue border-grey-300;
line-height: 1.5rem;
}

.tabcordion__tab button:hover {
border-bottom: 1px solid var(--color-secondary);
@apply border-b border-unit-secondary;
}

.tabcordion__tab.is-active button,
.tabcordion__tab button.active {
@apply font-semibold text-ubc-blue-sea;

border-bottom: 1px solid var(--color-primary);
@apply font-semibold border-b text-ubc-blue-sea border-unit-primary;
}

/* mobile triggers */
.tabcordion__heading {
@apply relative block w-full py-4 pr-12 mt-2 overflow-hidden uppercase text-ubc-blue;

cursor: pointer;
border-bottom: 1px solid var(--grey-300);
@apply relative block w-full py-4 pr-12 mt-2 overflow-hidden uppercase bg-no-repeat border-b cursor-pointer text-ubc-blue border-grey-300;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" %3E%3Cpath d="M53 29H35V11a3 3 0 0 0-6 0v18H11a3 3 0 0 0 0 6h18v18a3 3 0 0 0 6 0V35h18a3 3 0 0 0 0-6z" fill="%23002145" stroke-width="0" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" %3E%3C/path%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 1rem top 50%;
background-size: 1rem 1rem;
}

.tabcordion__heading:hover {
border-bottom: 1px solid var(--color-secondary);
@apply border-b border-unit-secondary;
}

.tabcordion__heading.active,
.tabcordion__heading.is-active,
.tabcordion__heading[aria-expanded="true"] {
@apply font-semibold;

border-bottom: 1px solid var(--color-primary);
@apply font-semibold border-b border-unit-primary;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" %3E%3Cpath d="M53 34H11a3 3 0 0 1 0-6h42a3 3 0 0 1 0 6z" fill="%230055b7" stroke-width="0" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" %3E%3C/path%3E%3C/svg%3E');
}

Expand Down
Loading