🚚 Remove 'pt' prefix for clarity and decoupling
This commit is contained in:
parent
e7744cbb93
commit
1dfc789172
24 changed files with 729 additions and 734 deletions
|
|
@ -1,3 +1,3 @@
|
|||
.pt-body__skip {
|
||||
.skip__to_content {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,115 +1,115 @@
|
|||
[class^="pt-button"] {
|
||||
[class^="button__"] {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: var(--pt-color--white);
|
||||
color: var(--val-color--white);
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--pt-border-radius);
|
||||
padding: var(--pt-gap-0-35) var(--pt-gap-0-75);
|
||||
border-radius: var(--val-border-radius);
|
||||
padding: var(--val-gap-0-35) var(--val-gap-0-75);
|
||||
transition: background-color .15s ease-in-out;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
[class^="pt-button"] > span {
|
||||
margin: 0 var(--pt-gap-0-15);
|
||||
[class^="button__"] > span {
|
||||
margin: 0 var(--val-gap-0-15);
|
||||
}
|
||||
|
||||
.pt-button__default {
|
||||
background-color: var(--pt-color--default);
|
||||
.button__default {
|
||||
background-color: var(--val-color--default);
|
||||
}
|
||||
.pt-button__default:hover {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--default-dark);
|
||||
.button__default:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--default-dark);
|
||||
}
|
||||
.pt-button__default:active,
|
||||
.pt-button__default:disabled {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--default-light);
|
||||
.button__default:active,
|
||||
.button__default:disabled {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--default-light);
|
||||
}
|
||||
|
||||
.pt-button__info {
|
||||
background-color: var(--pt-color--info);
|
||||
.button__info {
|
||||
background-color: var(--val-color--info);
|
||||
}
|
||||
.pt-button__info:hover {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--info-dark);
|
||||
.button__info:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--info-dark);
|
||||
}
|
||||
.pt-button__info:active,
|
||||
.pt-button__info:disabled {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--info-light);
|
||||
.button__info:active,
|
||||
.button__info:disabled {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--info-light);
|
||||
}
|
||||
|
||||
.pt-button__success {
|
||||
background-color: var(--pt-color--success);
|
||||
.button__success {
|
||||
background-color: var(--val-color--success);
|
||||
}
|
||||
.pt-button__success:hover {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--success-dark);
|
||||
.button__success:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--success-dark);
|
||||
}
|
||||
.pt-button__success:active,
|
||||
.pt-button__success:disabled {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--success-light);
|
||||
.button__success:active,
|
||||
.button__success:disabled {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--success-light);
|
||||
}
|
||||
|
||||
.pt-button__warning {
|
||||
background-color: var(--pt-color--warning);
|
||||
.button__warning {
|
||||
background-color: var(--val-color--warning);
|
||||
}
|
||||
.pt-button__warning:hover {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--warning-dark);
|
||||
.button__warning:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--warning-dark);
|
||||
}
|
||||
.pt-button__warning:active,
|
||||
.pt-button__warning:disabled {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--warning-light);
|
||||
.button__warning:active,
|
||||
.button__warning:disabled {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--warning-light);
|
||||
}
|
||||
|
||||
.pt-button__danger {
|
||||
background-color: var(--pt-color--danger);
|
||||
.button__danger {
|
||||
background-color: var(--val-color--danger);
|
||||
}
|
||||
.pt-button__danger:hover {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--danger-dark);
|
||||
.button__danger:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--danger-dark);
|
||||
}
|
||||
.pt-button__danger:active,
|
||||
.pt-button__danger:disabled {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--danger-light);
|
||||
.button__danger:active,
|
||||
.button__danger:disabled {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--danger-light);
|
||||
}
|
||||
|
||||
.pt-button__light {
|
||||
color: var(--pt-color--text);
|
||||
background-color: var(--pt-color--light);
|
||||
.button__light {
|
||||
color: var(--val-color--text);
|
||||
background-color: var(--val-color--light);
|
||||
}
|
||||
.pt-button__light:hover {
|
||||
color: var(--pt-color--text);
|
||||
background-color: var(--pt-color--light-dark);
|
||||
.button__light:hover {
|
||||
color: var(--val-color--text);
|
||||
background-color: var(--val-color--light-dark);
|
||||
}
|
||||
.pt-button__light:active,
|
||||
.pt-button__light:disabled {
|
||||
color: var(--pt-color--text);
|
||||
background-color: var(--pt-color--light-light);
|
||||
.button__light:active,
|
||||
.button__light:disabled {
|
||||
color: var(--val-color--text);
|
||||
background-color: var(--val-color--light-light);
|
||||
}
|
||||
|
||||
.pt-button__dark {
|
||||
background-color: var(--pt-color--dark);
|
||||
.button__dark {
|
||||
background-color: var(--val-color--dark);
|
||||
}
|
||||
.pt-button__dark:hover {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--dark-dark);
|
||||
.button__dark:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--dark-dark);
|
||||
}
|
||||
.pt-button__dark:active,
|
||||
.pt-button__dark:disabled {
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--dark-light);
|
||||
.button__dark:active,
|
||||
.button__dark:disabled {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--dark-light);
|
||||
}
|
||||
|
||||
.pt-button__link {
|
||||
color: var(--pt-color--default);
|
||||
.button__link {
|
||||
color: var(--val-color--default);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -600,93 +600,93 @@
|
|||
}
|
||||
*/
|
||||
/*
|
||||
.pt-button__default[disabled],fieldset[disabled] .pt-button__default {
|
||||
.button__default[disabled],fieldset[disabled] .button__default {
|
||||
background-color: #00d1b2;
|
||||
border-color: #00d1b2;
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted {
|
||||
.button__default.is-inverted {
|
||||
background-color: #fff;
|
||||
color: #00d1b2
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted.is-hovered,.pt-button__default.is-inverted:hover {
|
||||
.button__default.is-inverted.is-hovered,.button__default.is-inverted:hover {
|
||||
background-color: #f2f2f2
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted[disabled],fieldset[disabled] .pt-button__default.is-inverted {
|
||||
.button__default.is-inverted[disabled],fieldset[disabled] .button__default.is-inverted {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: #00d1b2
|
||||
}
|
||||
|
||||
.pt-button__default.is-loading::after {
|
||||
.button__default.is-loading::after {
|
||||
border-color: transparent transparent #fff #fff!important
|
||||
}
|
||||
|
||||
.pt-button__default.is-outlined {
|
||||
.button__default.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #00d1b2;
|
||||
color: #00d1b2
|
||||
}
|
||||
|
||||
.pt-button__default.is-outlined.is-focused,.pt-button__default.is-outlined.is-hovered,.pt-button__default.is-outlined:focus,.pt-button__default.is-outlined:hover {
|
||||
.button__default.is-outlined.is-focused,.button__default.is-outlined.is-hovered,.button__default.is-outlined:focus,.button__default.is-outlined:hover {
|
||||
background-color: #00d1b2;
|
||||
border-color: #00d1b2;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.pt-button__default.is-outlined.is-loading::after {
|
||||
.button__default.is-outlined.is-loading::after {
|
||||
border-color: transparent transparent #00d1b2 #00d1b2!important
|
||||
}
|
||||
|
||||
.pt-button__default.is-outlined.is-loading.is-focused::after,.pt-button__default.is-outlined.is-loading.is-hovered::after,.pt-button__default.is-outlined.is-loading:focus::after,.pt-button__default.is-outlined.is-loading:hover::after {
|
||||
.button__default.is-outlined.is-loading.is-focused::after,.button__default.is-outlined.is-loading.is-hovered::after,.button__default.is-outlined.is-loading:focus::after,.button__default.is-outlined.is-loading:hover::after {
|
||||
border-color: transparent transparent #fff #fff!important
|
||||
}
|
||||
|
||||
.pt-button__default.is-outlined[disabled],fieldset[disabled] .pt-button__default.is-outlined {
|
||||
.button__default.is-outlined[disabled],fieldset[disabled] .button__default.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #00d1b2;
|
||||
box-shadow: none;
|
||||
color: #00d1b2
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted.is-outlined {
|
||||
.button__default.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted.is-outlined.is-focused,.pt-button__default.is-inverted.is-outlined.is-hovered,.pt-button__default.is-inverted.is-outlined:focus,.pt-button__default.is-inverted.is-outlined:hover {
|
||||
.button__default.is-inverted.is-outlined.is-focused,.button__default.is-inverted.is-outlined.is-hovered,.button__default.is-inverted.is-outlined:focus,.button__default.is-inverted.is-outlined:hover {
|
||||
background-color: #fff;
|
||||
color: #00d1b2
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted.is-outlined.is-loading.is-focused::after,.pt-button__default.is-inverted.is-outlined.is-loading.is-hovered::after,.pt-button__default.is-inverted.is-outlined.is-loading:focus::after,.pt-button__default.is-inverted.is-outlined.is-loading:hover::after {
|
||||
.button__default.is-inverted.is-outlined.is-loading.is-focused::after,.button__default.is-inverted.is-outlined.is-loading.is-hovered::after,.button__default.is-inverted.is-outlined.is-loading:focus::after,.button__default.is-inverted.is-outlined.is-loading:hover::after {
|
||||
border-color: transparent transparent #00d1b2 #00d1b2!important
|
||||
}
|
||||
|
||||
.pt-button__default.is-inverted.is-outlined[disabled],fieldset[disabled] .pt-button__default.is-inverted.is-outlined {
|
||||
.button__default.is-inverted.is-outlined[disabled],fieldset[disabled] .button__default.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
box-shadow: none;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.pt-button__default.is-light {
|
||||
.button__default.is-light {
|
||||
background-color: #ebfffc;
|
||||
color: #00947e
|
||||
}
|
||||
|
||||
.pt-button__default.is-light.is-hovered,.pt-button__default.is-light:hover {
|
||||
.button__default.is-light.is-hovered,.button__default.is-light:hover {
|
||||
background-color: #defffa;
|
||||
border-color: transparent;
|
||||
color: #00947e
|
||||
}
|
||||
|
||||
.pt-button__default.is-light.is-active,.pt-button__default.is-light:active {
|
||||
.button__default.is-light.is-active,.button__default.is-light:active {
|
||||
background-color: #d1fff8;
|
||||
border-color: transparent;
|
||||
color: #00947e
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* CONTAINERS */
|
||||
|
||||
.pt-flex__container {
|
||||
.flex__container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -9,371 +9,371 @@
|
|||
width: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.pt-flex__row,
|
||||
.pt-flex__col.pt-bp__none {
|
||||
.flex__row,
|
||||
.flex__col.bp__none {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse,
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__none {
|
||||
.flex__row.flex__reverse,
|
||||
.flex__col.flex__reverse.bp__none {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col,
|
||||
.pt-flex__row.pt-bp__none {
|
||||
.flex__col,
|
||||
.flex__row.bp__none {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse,
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__none {
|
||||
.flex__col.flex__reverse,
|
||||
.flex__row.flex__reverse.bp__none {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.pt-flex__wrap {
|
||||
.flex__wrap {
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.pt-flex__wrap-reverse {
|
||||
.flex__wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.pt-flex__align-end {
|
||||
.flex__align-end {
|
||||
align-content: flex-end;
|
||||
}
|
||||
.pt-flex__align-center {
|
||||
.flex__align-center {
|
||||
align-content: center;
|
||||
}
|
||||
.pt-flex__align-stretch {
|
||||
.flex__align-stretch {
|
||||
align-content: stretch;
|
||||
}
|
||||
.pt-flex__align-space-between {
|
||||
.flex__align-space-between {
|
||||
align-content: space-between;
|
||||
}
|
||||
.pt-flex__align-space-around {
|
||||
.flex__align-space-around {
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.pt-flex__justify-end {
|
||||
.flex__justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.pt-flex__justify-center {
|
||||
.flex__justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-flex__justify-space-between {
|
||||
.flex__justify-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pt-flex__justify-space-around {
|
||||
.flex__justify-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.pt-flex__justify-space-evenly {
|
||||
.flex__justify-space-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.pt-flex__container.pt-flex__item-bottom {
|
||||
.flex__container.flex-item__bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.pt-flex__container.pt-flex__item-middle {
|
||||
.flex__container.flex-item__middle {
|
||||
align-items: center;
|
||||
}
|
||||
.pt-flex__container.pt-flex__item-stretch {
|
||||
.flex__container.flex-item__stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.pt-flex__container.pt-flex__item-baseline {
|
||||
.flex__container.flex-item__baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/* ITEMS */
|
||||
|
||||
.pt-flex__item {
|
||||
.flex-item__container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.pt-flex__grow-1 {
|
||||
.flex-item__grow-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pt-flex__grow-2 {
|
||||
.flex-item__grow-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
.pt-flex__grow-3 {
|
||||
.flex-item__grow-3 {
|
||||
flex-grow: 3;
|
||||
}
|
||||
.pt-flex__grow-4 {
|
||||
.flex-item__grow-4 {
|
||||
flex-grow: 4;
|
||||
}
|
||||
.pt-flex__grow-5 {
|
||||
.flex-item__grow-5 {
|
||||
flex-grow: 5;
|
||||
}
|
||||
.pt-flex__grow-6 {
|
||||
.flex-item__grow-6 {
|
||||
flex-grow: 6;
|
||||
}
|
||||
.pt-flex__grow-7 {
|
||||
.flex-item__grow-7 {
|
||||
flex-grow: 7;
|
||||
}
|
||||
.pt-flex__grow-8 {
|
||||
.flex-item__grow-8 {
|
||||
flex-grow: 8;
|
||||
}
|
||||
.pt-flex__grow-9 {
|
||||
.flex-item__grow-9 {
|
||||
flex-grow: 9;
|
||||
}
|
||||
|
||||
.pt-flex__shrink-1 {
|
||||
.flex-item__shrink-1 {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.pt-flex__shrink-2 {
|
||||
.flex-item__shrink-2 {
|
||||
flex-shrink: 2;
|
||||
}
|
||||
.pt-flex__shrink-3 {
|
||||
.flex-item__shrink-3 {
|
||||
flex-shrink: 3;
|
||||
}
|
||||
.pt-flex__shrink-4 {
|
||||
.flex-item__shrink-4 {
|
||||
flex-shrink: 4;
|
||||
}
|
||||
.pt-flex__shrink-5 {
|
||||
.flex-item__shrink-5 {
|
||||
flex-shrink: 5;
|
||||
}
|
||||
.pt-flex__shrink-6 {
|
||||
.flex-item__shrink-6 {
|
||||
flex-shrink: 6;
|
||||
}
|
||||
.pt-flex__shrink-7 {
|
||||
.flex-item__shrink-7 {
|
||||
flex-shrink: 7;
|
||||
}
|
||||
.pt-flex__shrink-8 {
|
||||
.flex-item__shrink-8 {
|
||||
flex-shrink: 8;
|
||||
}
|
||||
.pt-flex__shrink-9 {
|
||||
.flex-item__shrink-9 {
|
||||
flex-shrink: 9;
|
||||
}
|
||||
|
||||
.pt-flex__width-10 {
|
||||
.flex-item__width-10 {
|
||||
flex: 0 0 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
.pt-flex__width-20 {
|
||||
.flex-item__width-20 {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
.pt-flex__width-25 {
|
||||
.flex-item__width-25 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.pt-flex__width-33 {
|
||||
.flex-item__width-33 {
|
||||
flex: 0 0 33.3333%;
|
||||
max-width: 33.3333%;
|
||||
}
|
||||
.pt-flex__width-40 {
|
||||
.flex-item__width-40 {
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
.pt-flex__width-50 {
|
||||
.flex-item__width-50 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.pt-flex__width-60 {
|
||||
.flex-item__width-60 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
.pt-flex__width-66 {
|
||||
.flex-item__width-66 {
|
||||
flex: 0 0 66.6666%;
|
||||
max-width: 66.6666%;
|
||||
}
|
||||
.pt-flex__width-75 {
|
||||
.flex-item__width-75 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.pt-flex__width-80 {
|
||||
.flex-item__width-80 {
|
||||
flex: 0 0 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.pt-flex__width-90 {
|
||||
.flex-item__width-90 {
|
||||
flex: 0 0 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.pt-flex__offset-10 {
|
||||
.flex-item__offset-10 {
|
||||
margin-left: 10%;
|
||||
}
|
||||
.pt-flex__offset-20 {
|
||||
.flex-item__offset-20 {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.pt-flex__offset-25 {
|
||||
.flex-item__offset-25 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.pt-flex__offset-33 {
|
||||
.flex-item__offset-33 {
|
||||
margin-left: 33.3333%;
|
||||
}
|
||||
.pt-flex__offset-40 {
|
||||
.flex-item__offset-40 {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.pt-flex__offset-50 {
|
||||
.flex-item__offset-50 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.pt-flex__offset-60 {
|
||||
.flex-item__offset-60 {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.pt-flex__offset-66 {
|
||||
.flex-item__offset-66 {
|
||||
margin-left: 66.6666%;
|
||||
}
|
||||
.pt-flex__offset-75 {
|
||||
.flex-item__offset-75 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.pt-flex__offset-80 {
|
||||
.flex-item__offset-80 {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.pt-flex__offset-90 {
|
||||
.flex-item__offset-90 {
|
||||
margin-left: 90%;
|
||||
}
|
||||
|
||||
.pt-flex__item.pt-flex__item-top {
|
||||
.flex-item__container.flex-item__top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-bottom {
|
||||
.flex-item__container.flex-item__bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-middle {
|
||||
.flex-item__container.flex-item__middle {
|
||||
align-self: center;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-stretch {
|
||||
.flex-item__container.flex-item__stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-baseline {
|
||||
.flex-item__container.flex-item__baseline {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
/* BREAKPOINTS */
|
||||
|
||||
/* SM - Applies <= 568px */
|
||||
@media screen and (max-width: 35.5em) {
|
||||
.pt-flex__row.pt-bp__sm {
|
||||
@media screen and (max-width: 35.5rem) {
|
||||
.flex__row.bp__sm {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__sm {
|
||||
.flex__row.flex__reverse.bp__sm {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__sm {
|
||||
.flex__col.bp__sm {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__sm {
|
||||
.flex__col.flex__reverse.bp__sm {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__sm .pt-flex__item {
|
||||
.flex__col.bp__sm .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* MD - Applies <= 768px */
|
||||
@media screen and (max-width: 48em) {
|
||||
.pt-flex__row.pt-bp__md {
|
||||
@media screen and (max-width: 48rem) {
|
||||
.flex__row.bp__md {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__md {
|
||||
.flex__row.flex__reverse.bp__md {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__md {
|
||||
.flex__col.bp__md {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__md {
|
||||
.flex__col.flex__reverse.bp__md {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__md .pt-flex__item {
|
||||
.flex__col.bp__md .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
.pt-flex__row.pt-bp__lg {
|
||||
@media screen and (max-width: 62rem) {
|
||||
.flex__row.bp__lg {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__lg {
|
||||
.flex__row.flex__reverse.bp__lg {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__lg {
|
||||
.flex__col.bp__lg {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__lg {
|
||||
.flex__col.flex__reverse.bp__lg {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__lg .pt-flex__item {
|
||||
.flex__col.bp__lg .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* XL - Applies <= 1280px */
|
||||
@media screen and (max-width: 80em) {
|
||||
.pt-flex__row.pt-bp__xl {
|
||||
@media screen and (max-width: 80rem) {
|
||||
.flex__row.bp__xl {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__xl {
|
||||
.flex__row.flex__reverse.bp__xl {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__xl {
|
||||
.flex__col.bp__xl {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__xl {
|
||||
.flex__col.flex__reverse.bp__xl {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__xl .pt-flex__item {
|
||||
.flex__col.bp__xl .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* X2L - Applies <= 1440px */
|
||||
@media screen and (max-width: 90em) {
|
||||
.pt-flex__row.pt-bp__x2l {
|
||||
@media screen and (max-width: 90rem) {
|
||||
.flex__row.bp__x2l {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__x2l {
|
||||
.flex__row.flex__reverse.bp__x2l {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2l {
|
||||
.flex__col.bp__x2l {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__x2l {
|
||||
.flex__col.flex__reverse.bp__x2l {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2l .pt-flex__item {
|
||||
.flex__col.bp__x2l .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* X3L - Applies <= 1920px */
|
||||
@media screen and (max-width: 120em) {
|
||||
.pt-flex__row.pt-bp__x3l {
|
||||
@media screen and (max-width: 120rem) {
|
||||
.flex__row.bp__x3l {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__x3l {
|
||||
.flex__row.flex__reverse.bp__x3l {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x3l {
|
||||
.flex__col.bp__x3l {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__x3l {
|
||||
.flex__col.flex__reverse.bp__x3l {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x3l .pt-flex__item {
|
||||
.flex__col.bp__x3l .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* X2K - Applies <= 2560px */
|
||||
@media screen and (max-width: 120em) {
|
||||
.pt-flex__row.pt-bp__x2k {
|
||||
@media screen and (max-width: 120rem) {
|
||||
.flex__row.bp__x2k {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__x2k {
|
||||
.flex__row.flex__reverse.bp__x2k {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2k {
|
||||
.flex__col.bp__x2k {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__x2k {
|
||||
.flex__col.flex__reverse.bp__x2k {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2k .pt-flex__item {
|
||||
.flex__col.bp__x2k .flex-item__container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ html {
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--pt-font-family);
|
||||
font-size: var(--pt-fs--base);
|
||||
font-weight: var(--pt-fw--base);
|
||||
line-height: var(--pt-lh--base);
|
||||
color: var(--pt-color--text);
|
||||
background-color: var(--pt-color--bg);
|
||||
font-family: var(--val-font-family);
|
||||
font-size: var(--val-fs--base);
|
||||
font-weight: var(--val-fw--base);
|
||||
line-height: var(--val-lh--base);
|
||||
color: var(--val-color--text);
|
||||
background-color: var(--val-color--bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
|
@ -18,84 +18,84 @@ body {
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--pt-gap-0-35);
|
||||
font-weight: var(--pt-fw--bold);
|
||||
line-height: var(--pt-lh--header);
|
||||
margin-bottom: var(--val-gap-0-35);
|
||||
font-weight: var(--val-fw--bold);
|
||||
line-height: var(--val-lh--header);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--pt-fs--x3l);
|
||||
font-size: var(--val-fs--x3l);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--pt-fs--x2l);
|
||||
font-size: var(--val-fs--x2l);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--pt-fs--xl);
|
||||
font-size: var(--val-fs--xl);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--pt-fs--l);
|
||||
font-size: var(--val-fs--l);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--pt-fs--m);
|
||||
font-size: var(--val-fs--m);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--pt-fs--base);
|
||||
font-size: var(--val-fs--base);
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
@media screen and (max-width: 62rem) {
|
||||
h1 {
|
||||
font-size: calc(var(--pt-fs--l) + 1.25vw);
|
||||
font-size: calc(var(--val-fs--l) + 1.25vw);
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(var(--pt-fs--l) + 0.6vw);
|
||||
font-size: calc(var(--val-fs--l) + 0.6vw);
|
||||
}
|
||||
h3 {
|
||||
font-size: calc(var(--pt-fs--m) + 0.6vw);
|
||||
font-size: calc(var(--val-fs--m) + 0.6vw);
|
||||
}
|
||||
h4 {
|
||||
font-size: calc(var(--pt-fs--m) + 0.3vw);
|
||||
font-size: calc(var(--val-fs--m) + 0.3vw);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--pt-gap-0-75);
|
||||
margin-bottom: var(--val-gap-0-75);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--pt-color--default);
|
||||
color: var(--val-color--default);
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--pt-color--default-dark);
|
||||
color: var(--val-color--default-dark);
|
||||
}
|
||||
a:active {
|
||||
color: var(--pt-color--default-light);
|
||||
color: var(--val-color--default-light);
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
|
||||
#header > .pt-region__inner,
|
||||
.pt-content__inner,
|
||||
#footer > .pt-region__inner {
|
||||
#header > .region__inner,
|
||||
.content__inner,
|
||||
#footer > .region__inner {
|
||||
width: 100%;
|
||||
max-width: var(--pt-max-width);
|
||||
max-width: var(--val-max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: var(--pt-color--white);
|
||||
background: var(--val-color--white);
|
||||
}
|
||||
.pt-content__inner {
|
||||
background: var(--pt-color--white);
|
||||
.content__inner {
|
||||
background: var(--val-color--white);
|
||||
}
|
||||
#footer {
|
||||
background: linear-gradient(180deg, var(--pt-color--gray-5) 0%, var(--pt-color--gray-10) 100%);
|
||||
background: linear-gradient(180deg, var(--val-color--gray-5) 0%, var(--val-color--gray-10) 100%);
|
||||
}
|
||||
#footer > .pt-region__inner {
|
||||
color: var(--pt-color--gray-65);
|
||||
background: var(--pt-color--gray-20);
|
||||
padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
|
||||
#footer > .region__inner {
|
||||
color: var(--val-color--gray-65);
|
||||
background: var(--val-color--gray-20);
|
||||
padding: calc(3 * var(--val-gap)) 0 calc(12 * var(--val-gap));
|
||||
}
|
||||
#footer > .pt-region__inner a {
|
||||
color: var(--pt-color--white);
|
||||
#footer > .region__inner a {
|
||||
color: var(--val-color--white);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
/* SKIP TO MAIN CONTENT */
|
||||
|
||||
.pt-body__skip {
|
||||
.skip__to_content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-body__skip a {
|
||||
.skip__to_content a {
|
||||
display: block;
|
||||
padding: var(--pt-gap-0-5) var(--pt-gap-1-5);
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--gray-5);
|
||||
padding: var(--val-gap-0-5) var(--val-gap-1-5);
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--gray-5);
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
|
|
@ -16,55 +16,55 @@
|
|||
transition: all 0.3s ease-in-out;
|
||||
z-index: 9999;
|
||||
}
|
||||
.pt-body__skip a:after {
|
||||
.skip__to_content a:after {
|
||||
content: "\0020 ➔";
|
||||
}
|
||||
.pt-body__skip a:focus {
|
||||
.skip__to_content a:focus {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
|
||||
.pt-fs__x3l {
|
||||
font-size: var(--pt-fs--x3l) !important;
|
||||
.fs__x3l {
|
||||
font-size: var(--val-fs--x3l) !important;
|
||||
}
|
||||
.pt-fs__x2l {
|
||||
font-size: var(--pt-fs--x2l) !important;
|
||||
.fs__x2l {
|
||||
font-size: var(--val-fs--x2l) !important;
|
||||
}
|
||||
.pt-fs__xl {
|
||||
font-size: var(--pt-fs--xl) !important;
|
||||
.fs__xl {
|
||||
font-size: var(--val-fs--xl) !important;
|
||||
}
|
||||
.pt-fs__l {
|
||||
font-size: var(--pt-fs--l) !important;
|
||||
.fs__l {
|
||||
font-size: var(--val-fs--l) !important;
|
||||
}
|
||||
.pt-fs__m {
|
||||
font-size: var(--pt-fs--m) !important;
|
||||
.fs__m {
|
||||
font-size: var(--val-fs--m) !important;
|
||||
}
|
||||
.pt-fs__s {
|
||||
font-size: var(--pt-fs--s) !important;
|
||||
.fs__s {
|
||||
font-size: var(--val-fs--s) !important;
|
||||
}
|
||||
.pt-fs__xs {
|
||||
font-size: var(--pt-fs--xs) !important;
|
||||
.fs__xs {
|
||||
font-size: var(--val-fs--xs) !important;
|
||||
}
|
||||
.pt-fs__x2s {
|
||||
font-size: var(--pt-fs--x2s) !important;
|
||||
.fs__x2s {
|
||||
font-size: var(--val-fs--x2s) !important;
|
||||
}
|
||||
.pt-fs__x3s {
|
||||
font-size: var(--pt-fs--x3s) !important;
|
||||
.fs__x3s {
|
||||
font-size: var(--val-fs--x3s) !important;
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
.pt-fs__x3l {
|
||||
font-size: calc(var(--pt-fs--l) + 1.25vw) !important;
|
||||
@media screen and (max-width: 62rem) {
|
||||
.fs__x3l {
|
||||
font-size: calc(var(--val-fs--l) + 1.25vw) !important;
|
||||
}
|
||||
.pt-fs__x2l {
|
||||
font-size: calc(var(--pt-fs--l) + 0.6vw) !important;
|
||||
.fs__x2l {
|
||||
font-size: calc(var(--val-fs--l) + 0.6vw) !important;
|
||||
}
|
||||
.pt-fs__xl {
|
||||
font-size: calc(var(--pt-fs--m) + 0.6vw) !important;
|
||||
.fs__xl {
|
||||
font-size: calc(var(--val-fs--m) + 0.6vw) !important;
|
||||
}
|
||||
.pt-fs__l {
|
||||
font-size: calc(var(--pt-fs--m) + 0.3vw) !important;
|
||||
.fs__l {
|
||||
font-size: calc(var(--val-fs--m) + 0.3vw) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,93 +72,93 @@
|
|||
|
||||
/* Heading component */
|
||||
|
||||
.pt-heading__title-x3l,
|
||||
.pt-heading__title-x2l,
|
||||
.pt-heading__title-xl,
|
||||
.pt-heading__title-l,
|
||||
.pt-heading__title-m,
|
||||
.pt-heading__subtitle {
|
||||
font-weight: var(--pt-fw--light);
|
||||
.heading__title-x3l,
|
||||
.heading__title-x2l,
|
||||
.heading__title-xl,
|
||||
.heading__title-l,
|
||||
.heading__title-m,
|
||||
.heading__subtitle {
|
||||
font-weight: var(--val-fw--light);
|
||||
}
|
||||
.pt-heading__title-x3l {
|
||||
font-size: calc(var(--pt-fs--x3l) * 2);
|
||||
.heading__title-x3l {
|
||||
font-size: calc(var(--val-fs--x3l) * 2);
|
||||
}
|
||||
.pt-heading__title-x2l {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.8);
|
||||
.heading__title-x2l {
|
||||
font-size: calc(var(--val-fs--x3l) * 1.8);
|
||||
}
|
||||
.pt-heading__title-xl {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.6);
|
||||
.heading__title-xl {
|
||||
font-size: calc(var(--val-fs--x3l) * 1.6);
|
||||
}
|
||||
.pt-heading__title-l {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.4);
|
||||
.heading__title-l {
|
||||
font-size: calc(var(--val-fs--x3l) * 1.4);
|
||||
}
|
||||
.pt-heading__title-m {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.2);
|
||||
.heading__title-m {
|
||||
font-size: calc(var(--val-fs--x3l) * 1.2);
|
||||
}
|
||||
.pt-heading__subtitle {
|
||||
margin-top: calc(-1 * var(--pt-gap-0-5));
|
||||
.heading__subtitle {
|
||||
margin-top: calc(-1 * var(--val-gap-0-5));
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
.pt-heading__title-x3l {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.5) + 4.5vw);
|
||||
@media screen and (max-width: 62rem) {
|
||||
.heading__title-x3l {
|
||||
font-size: calc((var(--val-fs--x3l) / 1.5) + 4.5vw);
|
||||
}
|
||||
.pt-heading__title-x2l {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.9vw);
|
||||
.heading__title-x2l {
|
||||
font-size: calc((var(--val-fs--x3l) / 1.6) + 3.9vw);
|
||||
}
|
||||
.pt-heading__title-xl {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.3vw);
|
||||
.heading__title-xl {
|
||||
font-size: calc((var(--val-fs--x3l) / 1.6) + 3.3vw);
|
||||
}
|
||||
.pt-heading__title-l {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.7vw);
|
||||
.heading__title-l {
|
||||
font-size: calc((var(--val-fs--x3l) / 1.7) + 2.7vw);
|
||||
}
|
||||
.pt-heading__title-m {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.1vw);
|
||||
.heading__title-m {
|
||||
font-size: calc((var(--val-fs--x3l) / 1.7) + 2.1vw);
|
||||
}
|
||||
}
|
||||
|
||||
/* Image component */
|
||||
|
||||
.pt-img__fluid {
|
||||
.img__fluid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Branding component */
|
||||
|
||||
.pt-branding__wrapper {
|
||||
.branding__inner {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
column-gap: var(--pt-gap-0-75);
|
||||
column-gap: var(--val-gap-0-75);
|
||||
}
|
||||
.pt-branding__name {
|
||||
.branding__name {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: var(--pt-fs--l);
|
||||
font-size: var(--val-fs--l);
|
||||
}
|
||||
.pt-branding__slogan {
|
||||
font-size: var(--pt-fs--m);
|
||||
.branding__slogan {
|
||||
font-size: var(--val-fs--m);
|
||||
}
|
||||
|
||||
/* SM - Applies <= 568px */
|
||||
@media (max-width: 35.5em) {
|
||||
.pt-branding__logo {
|
||||
@media (max-width: 35.5rem) {
|
||||
.branding__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media (max-width: 62em) {
|
||||
.pt-branding__slogan {
|
||||
font-size: var(--pt-fs--base);
|
||||
@media (max-width: 62rem) {
|
||||
.branding__slogan {
|
||||
font-size: var(--val-fs--base);
|
||||
}
|
||||
}
|
||||
|
||||
/* PoweredBy component */
|
||||
|
||||
#pt-poweredby {
|
||||
.poweredby__container {
|
||||
text-align: center;
|
||||
}
|
||||
.pt-poweredby__logo img,
|
||||
.pt-poweredby__logo svg {
|
||||
.poweredby__logo img,
|
||||
.poweredby__logo svg {
|
||||
margin-left: .275em;
|
||||
height: 1.275em;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.pt-menu__container {
|
||||
.menu__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
|
|
@ -6,123 +6,123 @@
|
|||
z-index: 999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--pt-menu--color-bg);
|
||||
background: var(--val-menu--color-bg);
|
||||
}
|
||||
|
||||
.pt-menu__wrapper {
|
||||
margin-right: var(--pt-menu--item-gap);
|
||||
.menu__inner {
|
||||
margin-right: var(--val-menu--item-gap);
|
||||
}
|
||||
.pt-menu__wrapper a,
|
||||
.pt-menu__wrapper button {
|
||||
.menu__inner a,
|
||||
.menu__inner button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pt-menu__nav ul {
|
||||
.menu__nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pt-menu__nav li {
|
||||
.menu__nav li {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5rem;
|
||||
padding: var(--pt-menu--line-padding) 0;
|
||||
line-height: var(--pt-menu--line-height);
|
||||
padding: var(--val-menu--line-padding) 0;
|
||||
line-height: var(--val-menu--line-height);
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.pt-menu__nav li.pt-menu__label,
|
||||
.pt-menu__nav li > a {
|
||||
.menu__nav li.menu__label,
|
||||
.menu__nav li > a {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
color: var(--pt-color--text);
|
||||
color: var(--val-color--text);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.pt-menu__nav li > a {
|
||||
.menu__nav li > a {
|
||||
border: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
.pt-menu__nav li:hover > a,
|
||||
.pt-menu__nav li > a:focus {
|
||||
color: var(--pt-menu--color-highlight);
|
||||
.menu__nav li:hover > a,
|
||||
.menu__nav li > a:focus {
|
||||
color: var(--val-menu--color-highlight);
|
||||
}
|
||||
.pt-menu__nav li > a > i.pt-menu__icon {
|
||||
.menu__nav li > a > i.menu__icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__subs {
|
||||
.menu__nav li .menu__subs {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--pt-menu--color-bg);
|
||||
border-radius: var(--pt-menu--border-radius);
|
||||
border-top: 3px solid var(--pt-menu--color-highlight);
|
||||
background: var(--val-menu--color-bg);
|
||||
border-radius: var(--val-menu--border-radius);
|
||||
border-top: 3px solid var(--val-menu--color-highlight);
|
||||
z-index: 500;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow);
|
||||
box-shadow: 0 4px 6px -1px var(--val-menu--color-border), 0 2px 4px -1px var(--val-menu--color-shadow);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs,
|
||||
.pt-menu__nav li.pt-menu__children > a:focus + .pt-menu__subs,
|
||||
.pt-menu__nav li.pt-menu__children .pt-menu__subs:focus-within {
|
||||
.menu__nav li.menu__children:hover > .menu__subs,
|
||||
.menu__nav li.menu__children > a:focus + .menu__subs,
|
||||
.menu__nav li.menu__children .menu__subs:focus-within {
|
||||
margin-top: 0.4rem;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__items {
|
||||
min-width: var(--pt-menu--item-width-min);
|
||||
max-width: var(--pt-menu--item-width-max);
|
||||
.menu__nav li .menu__items {
|
||||
min-width: var(--val-menu--item-width-min);
|
||||
max-width: var(--val-menu--item-width-max);
|
||||
}
|
||||
.pt-menu__nav li .pt-menu__items .pt-menu__title {
|
||||
.menu__nav li .menu__items .menu__title {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: var(--pt-menu--line-padding) 0;
|
||||
line-height: var(--pt-menu--line-height);
|
||||
padding: var(--val-menu--line-padding) 0;
|
||||
line-height: var(--val-menu--line-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--pt-menu--color-highlight);
|
||||
color: var(--val-menu--color-highlight);
|
||||
text-transform: uppercase;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.pt-menu__nav li .pt-menu__items li {
|
||||
.menu__nav li .menu__items li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__mega {
|
||||
.menu__nav li .menu__mega {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__groups {
|
||||
.menu__nav li .menu__groups {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.pt-menu__header,
|
||||
.pt-menu__trigger {
|
||||
.menu__header,
|
||||
.menu__trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Applies <= 992px */
|
||||
@media only screen and (max-width: 62em) {
|
||||
.pt-menu__wrapper {
|
||||
margin-left: var(--pt-menu--item-gap);
|
||||
@media only screen and (max-width: 62rem) {
|
||||
.menu__container {
|
||||
margin-left: var(--val-menu--item-gap);
|
||||
}
|
||||
.pt-menu__trigger {
|
||||
.menu__trigger {
|
||||
cursor: pointer;
|
||||
width: var(--pt-menu--trigger-width);
|
||||
height: var(--pt-menu--item-height);
|
||||
width: var(--val-menu--trigger-width);
|
||||
height: var(--val-menu--item-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
|
@ -130,54 +130,54 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-menu__trigger span {
|
||||
.menu__trigger span {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 12.675% 0;
|
||||
border-radius: var(--pt-border-radius);
|
||||
background: var(--pt-color--text);
|
||||
border-radius: var(--val-border-radius);
|
||||
background: var(--val-color--text);
|
||||
}
|
||||
|
||||
.pt-menu__nav {
|
||||
.menu__nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--pt-menu--side-width);
|
||||
width: var(--val-menu--side-width);
|
||||
height: 100%;
|
||||
z-index: 1099;
|
||||
overflow: hidden;
|
||||
background: var(--pt-menu--color-bg);
|
||||
background: var(--val-menu--color-bg);
|
||||
transform: translate(-100%);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.pt-menu__main .pt-menu__nav.active {
|
||||
.menu__main .menu__nav.active {
|
||||
transform: translate(0%);
|
||||
}
|
||||
|
||||
.pt-menu__nav li {
|
||||
.menu__nav li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pt-menu__nav li.pt-menu__label,
|
||||
.pt-menu__nav li > a {
|
||||
.menu__nav li.menu__label,
|
||||
.menu__nav li > a {
|
||||
display: block;
|
||||
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap);
|
||||
border-bottom: 1px solid var(--pt-menu--color-border);
|
||||
padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap);
|
||||
border-bottom: 1px solid var(--val-menu--color-border);
|
||||
}
|
||||
.pt-menu__nav li ul li.pt-menu__label,
|
||||
.pt-menu__nav li ul li > a {
|
||||
.menu__nav li ul li.menu__label,
|
||||
.menu__nav li ul li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.pt-menu__nav li > a > i.pt-menu__icon {
|
||||
.menu__nav li > a > i.menu__icon {
|
||||
position: absolute;
|
||||
top: var(--pt-menu--line-padding);
|
||||
right: var(--pt-menu--line-padding);
|
||||
top: var(--val-menu--line-padding);
|
||||
right: var(--val-menu--line-padding);
|
||||
font-size: 1.25rem;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__subs {
|
||||
.menu__nav li .menu__subs {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
|
|
@ -195,65 +195,65 @@
|
|||
transform: translateX(0%);
|
||||
box-shadow: none;
|
||||
}
|
||||
.pt-menu__nav li .pt-menu__subs.active {
|
||||
.menu__nav li .menu__subs.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs {
|
||||
.menu__nav li.menu__children:hover > .menu__subs {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__items .pt-menu__title {
|
||||
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap);
|
||||
.menu__nav li .menu__items .menu__title {
|
||||
padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap);
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__groups {
|
||||
.menu__nav li .menu__groups {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pt-menu__nav .pt-menu__header {
|
||||
.menu__nav .menu__header {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
height: var(--pt-menu--item-height);
|
||||
border-bottom: 1px solid var(--pt-menu--color-border);
|
||||
background: var(--pt-menu--color-bg);
|
||||
height: var(--val-menu--item-height);
|
||||
border-bottom: 1px solid var(--val-menu--color-border);
|
||||
background: var(--val-menu--color-bg);
|
||||
z-index: 501;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__title {
|
||||
padding: var(--pt-menu--line-padding);
|
||||
.menu__nav .menu__header .menu__title {
|
||||
padding: var(--val-menu--line-padding);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__close,
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__arrow {
|
||||
width: var(--pt-menu--item-height);
|
||||
min-width: var(--pt-menu--item-height);
|
||||
height: var(--pt-menu--item-height);
|
||||
line-height: var(--pt-menu--item-height);
|
||||
color: var(--pt-color--text);
|
||||
.menu__nav .menu__header .menu__close,
|
||||
.menu__nav .menu__header .menu__arrow {
|
||||
width: var(--val-menu--item-height);
|
||||
min-width: var(--val-menu--item-height);
|
||||
height: var(--val-menu--item-height);
|
||||
line-height: var(--val-menu--item-height);
|
||||
color: var(--val-color--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__close {
|
||||
.menu__nav .menu__header .menu__close {
|
||||
font-size: 2.25rem;
|
||||
border-left: 1px solid var(--pt-menu--color-border);
|
||||
border-left: 1px solid var(--val-menu--color-border);
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__arrow {
|
||||
.menu__nav .menu__header .menu__arrow {
|
||||
font-size: 1.25rem;
|
||||
border-right: 1px solid var(--pt-menu--color-border);
|
||||
border-right: 1px solid var(--val-menu--color-border);
|
||||
display: none;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header.active .pt-menu__arrow {
|
||||
.menu__nav .menu__header.active .menu__arrow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pt-menu__nav .pt-menu__section {
|
||||
.menu__nav .menu__section {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -261,7 +261,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.pt-menu__overlay {
|
||||
.menu__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
background: rgba(0, 0, 0, 0.55);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.pt-menu__overlay.active {
|
||||
.menu__overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,67 +1,67 @@
|
|||
:root {
|
||||
--pt-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
--pt-font-serif: "Lora","georgia",serif;
|
||||
--pt-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
--pt-font-family: var(--pt-font-sans);
|
||||
--val-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
--val-font-serif: "Lora","georgia",serif;
|
||||
--val-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
--val-font-family: var(--val-font-sans);
|
||||
|
||||
/* Font size */
|
||||
--pt-fs--x3l: 2.5rem;
|
||||
--pt-fs--x2l: 2rem;
|
||||
--pt-fs--xl: 1.75rem;
|
||||
--pt-fs--l: 1.5rem;
|
||||
--pt-fs--m: 1.25rem;
|
||||
--pt-fs--base: 1rem;
|
||||
--pt-fs--s: 0.875rem;
|
||||
--pt-fs--xs: 0.75rem;
|
||||
--pt-fs--x2s: 0.5625rem;
|
||||
--pt-fs--x3s: 0.375rem;
|
||||
--val-fs--x3l: 2.5rem;
|
||||
--val-fs--x2l: 2rem;
|
||||
--val-fs--xl: 1.75rem;
|
||||
--val-fs--l: 1.5rem;
|
||||
--val-fs--m: 1.25rem;
|
||||
--val-fs--base: 1rem;
|
||||
--val-fs--s: 0.875rem;
|
||||
--val-fs--xs: 0.75rem;
|
||||
--val-fs--x2s: 0.5625rem;
|
||||
--val-fs--x3s: 0.375rem;
|
||||
|
||||
/* Font weight */
|
||||
--pt-fw--light: 300;
|
||||
--pt-fw--base: 400;
|
||||
--pt-fw--bold: 500;
|
||||
--val-fw--light: 300;
|
||||
--val-fw--base: 400;
|
||||
--val-fw--bold: 500;
|
||||
|
||||
/* Line height */
|
||||
--pt-lh--base: 1.5;
|
||||
--pt-lh--header: 1.2;
|
||||
--val-lh--base: 1.5;
|
||||
--val-lh--header: 1.2;
|
||||
|
||||
--pt-max-width: 90rem;
|
||||
--val-max-width: 90rem;
|
||||
/*
|
||||
--pt-color-rgb: 33,37,41;
|
||||
--pt-main--bg-rgb: 255,255,255;
|
||||
--pt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--val-color-rgb: 33,37,41;
|
||||
--val-main--bg-rgb: 255,255,255;
|
||||
--val-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
|
||||
--line-height-base: 1.6875rem;
|
||||
--line-height-s: 1.125rem;
|
||||
--max-bg-color: 98.125rem;
|
||||
*/
|
||||
--pt-gap: 1.125em;
|
||||
--val-gap: 1.125rem;
|
||||
/*
|
||||
--content-left: 5.625rem;
|
||||
--site-header-height-wide: var(--pt-gap10);
|
||||
--container-padding: var(--pt-gap);
|
||||
--site-header-height-wide: var(--val-gap10);
|
||||
--container-padding: var(--val-gap);
|
||||
*/
|
||||
}
|
||||
/*
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--container-padding:var(--pt-gap2);
|
||||
--container-padding:var(--val-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--scrollbar-width: 0px;
|
||||
--grid-col-count: 6;
|
||||
--grid-gap: var(--pt-gap);
|
||||
--grid-gap: var(--val-gap);
|
||||
--grid-gap-count: calc(var(--grid-col-count) - 1);
|
||||
--grid-full-width: calc(100vw - var(--pt-gap2) - var(--scrollbar-width));
|
||||
--grid-full-width: calc(100vw - var(--val-gap2) - var(--scrollbar-width));
|
||||
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
:root {
|
||||
--grid-col-count:14;
|
||||
--grid-gap: var(--pt-gap2);
|
||||
--grid-gap: var(--val-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,89 +73,89 @@
|
|||
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--pt-gap4));
|
||||
--grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--val-gap4));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(var(--max-width) - var(--pt-gap4));
|
||||
--grid-full-width:calc(var(--max-width) - var(--val-gap4));
|
||||
}
|
||||
}
|
||||
*/
|
||||
:root {
|
||||
--pt-gap-0-15: calc(0.15 * var(--pt-gap));
|
||||
--pt-gap-0-25: calc(0.25 * var(--pt-gap));
|
||||
--pt-gap-0-35: calc(0.35 * var(--pt-gap));
|
||||
--pt-gap-0-5: calc(0.5 * var(--pt-gap));
|
||||
--pt-gap-0-75: calc(0.75 * var(--pt-gap));
|
||||
--pt-gap-1-5: calc(1.5 * var(--pt-gap));
|
||||
--pt-gap-2: calc(2 * var(--pt-gap));
|
||||
--val-gap-0-15: calc(0.15 * var(--val-gap));
|
||||
--val-gap-0-25: calc(0.25 * var(--val-gap));
|
||||
--val-gap-0-35: calc(0.35 * var(--val-gap));
|
||||
--val-gap-0-5: calc(0.5 * var(--val-gap));
|
||||
--val-gap-0-75: calc(0.75 * var(--val-gap));
|
||||
--val-gap-1-5: calc(1.5 * var(--val-gap));
|
||||
--val-gap-2: calc(2 * var(--val-gap));
|
||||
|
||||
--pt-color--default-hue: 216;
|
||||
--pt-color--default-sat: 60%;
|
||||
--pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%);
|
||||
--pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%);
|
||||
--pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%);
|
||||
--val-color--default-hue: 216;
|
||||
--val-color--default-sat: 60%;
|
||||
--val-color--default-light: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 60%);
|
||||
--val-color--default-dark: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 40%);
|
||||
--val-color--default: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 50%);
|
||||
|
||||
--pt-color--info-hue: 190;
|
||||
--pt-color--info-sat: 90%;
|
||||
--pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%);
|
||||
--pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%);
|
||||
--pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%);
|
||||
--val-color--info-hue: 190;
|
||||
--val-color--info-sat: 90%;
|
||||
--val-color--info-light: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 60%);
|
||||
--val-color--info-dark: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 40%);
|
||||
--val-color--info: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 50%);
|
||||
|
||||
--pt-color--success-hue: 150;
|
||||
--pt-color--success-sat: 50%;
|
||||
--pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%);
|
||||
--pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%);
|
||||
--pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%);
|
||||
--val-color--success-hue: 150;
|
||||
--val-color--success-sat: 50%;
|
||||
--val-color--success-light: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 60%);
|
||||
--val-color--success-dark: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 40%);
|
||||
--val-color--success: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 50%);
|
||||
|
||||
--pt-color--warning-hue: 44;
|
||||
--pt-color--warning-sat: 100%;
|
||||
--pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%);
|
||||
--pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%);
|
||||
--pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%);
|
||||
--val-color--warning-hue: 44;
|
||||
--val-color--warning-sat: 100%;
|
||||
--val-color--warning-light: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 60%);
|
||||
--val-color--warning-dark: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 48%);
|
||||
--val-color--warning: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 50%);
|
||||
|
||||
--pt-color--danger-hue: 348;
|
||||
--pt-color--danger-sat: 86%;
|
||||
--pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%);
|
||||
--pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%);
|
||||
--pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%);
|
||||
--val-color--danger-hue: 348;
|
||||
--val-color--danger-sat: 86%;
|
||||
--val-color--danger-light: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 60%);
|
||||
--val-color--danger-dark: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 40%);
|
||||
--val-color--danger: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 50%);
|
||||
|
||||
--pt-color--light-hue: 0;
|
||||
--pt-color--light-sat: 0%;
|
||||
--pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%);
|
||||
--pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%);
|
||||
--pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%);
|
||||
--val-color--light-hue: 0;
|
||||
--val-color--light-sat: 0%;
|
||||
--val-color--light-light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 98%);
|
||||
--val-color--light-dark: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 92%);
|
||||
--val-color--light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 96%);
|
||||
|
||||
--pt-color--dark-hue: 0;
|
||||
--pt-color--dark-sat: 0%;
|
||||
--pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%);
|
||||
--pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%);
|
||||
--pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%);
|
||||
--val-color--dark-hue: 0;
|
||||
--val-color--dark-sat: 0%;
|
||||
--val-color--dark-light: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 40%);
|
||||
--val-color--dark-dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 8%);
|
||||
--val-color--dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 25%);
|
||||
|
||||
|
||||
|
||||
|
||||
--pt-color--gray-hue: 201;
|
||||
--pt-color--gray-sat: 15%;
|
||||
--pt-color--gray-5: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 5%);
|
||||
--pt-color--gray-10: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat) ,11%);
|
||||
--pt-color--gray-20: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat),20%);
|
||||
--pt-color--gray-45: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 44%);
|
||||
--pt-color--gray-60: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 57%);
|
||||
--pt-color--gray-65: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 63%);
|
||||
--pt-color--gray-70: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 72%);
|
||||
--pt-color--gray-90: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 88%);
|
||||
--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%);
|
||||
--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%);
|
||||
--val-color--gray-hue: 201;
|
||||
--val-color--gray-sat: 15%;
|
||||
--val-color--gray-5: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 5%);
|
||||
--val-color--gray-10: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat) ,11%);
|
||||
--val-color--gray-20: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat),20%);
|
||||
--val-color--gray-45: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 44%);
|
||||
--val-color--gray-60: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 57%);
|
||||
--val-color--gray-65: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 63%);
|
||||
--val-color--gray-70: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 72%);
|
||||
--val-color--gray-90: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 88%);
|
||||
--val-color--gray-95: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 93%);
|
||||
--val-color--gray-100: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 97%);
|
||||
|
||||
|
||||
|
||||
|
||||
--pt-color--bg: #fafafa;
|
||||
--pt-color--text: #212529;
|
||||
--pt-color--white: #fff;
|
||||
--val-color--bg: #fafafa;
|
||||
--val-color--text: #212529;
|
||||
--val-color--white: #fff;
|
||||
|
||||
/*
|
||||
|
||||
|
|
@ -163,31 +163,31 @@
|
|||
--color-text-neutral-soft: var(--color--gray-45);
|
||||
--color-text-neutral-medium: var(--color--gray-20);
|
||||
--color-text-neutral-loud: var(--color--gray-5);
|
||||
--color-text-primary-medium: var(--pt-color--default-40);
|
||||
--color-text-primary-loud: var(--pt-color--default-30);
|
||||
--color-text-primary-medium: var(--val-color--default-40);
|
||||
--color-text-primary-loud: var(--val-color--default-30);
|
||||
--color--black: #000;
|
||||
*/
|
||||
/*
|
||||
--color--red: #e33f1e;
|
||||
--color--gold: #fdca40;
|
||||
--color--green: #3fa21c;
|
||||
--header-height-wide-when-fixed: calc(6 * var(--pt-gap));
|
||||
--header-height-wide-when-fixed: calc(6 * var(--val-gap));
|
||||
--mobile-nav-width: 31.25rem;
|
||||
*/
|
||||
--pt-border-radius: 0.375rem;
|
||||
--val-border-radius: 0.375rem;
|
||||
|
||||
/* Menu component */
|
||||
--pt-menu--color-bg: var(--pt-color--bg);
|
||||
--pt-menu--color-highlight: #e91e63;
|
||||
--pt-menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--pt-menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--pt-menu--line-padding: 0.625rem;
|
||||
--pt-menu--line-height: 1.875rem;
|
||||
--pt-menu--item-height: calc(var(--pt-menu--line-padding) + var(--pt-menu--line-height));
|
||||
--pt-menu--item-width-min: 14rem;
|
||||
--pt-menu--item-width-max: 20rem;
|
||||
--pt-menu--item-gap: 1rem;
|
||||
--pt-menu--border-radius: 0.625rem;
|
||||
--pt-menu--trigger-width: var(--pt-menu--item-height);
|
||||
--pt-menu--side-width: 20rem;
|
||||
--val-menu--color-bg: var(--val-color--bg);
|
||||
--val-menu--color-highlight: #e91e63;
|
||||
--val-menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--val-menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--val-menu--line-padding: 0.625rem;
|
||||
--val-menu--line-height: 1.875rem;
|
||||
--val-menu--item-height: calc(var(--val-menu--line-padding) + var(--val-menu--line-height));
|
||||
--val-menu--item-width-min: 14rem;
|
||||
--val-menu--item-width-max: 20rem;
|
||||
--val-menu--item-gap: 1rem;
|
||||
--val-menu--border-radius: 0.625rem;
|
||||
--val-menu--trigger-width: var(--val-menu--item-height);
|
||||
--val-menu--side-width: 20rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
#welcome [class$="-col-text"] > .inner {
|
||||
#welcome [class$="-col-text"] > .flex-item__inner {
|
||||
margin: 5% 5% 0;
|
||||
text-align: center;
|
||||
}
|
||||
#welcome [class$="-col-image"] > .inner {
|
||||
#welcome [class$="-col-image"] > .flex-item__inner {
|
||||
margin: 1rem 5%;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
text-align: center;
|
||||
margin: 0 5%;
|
||||
}
|
||||
#welcome .welcome > .inner {
|
||||
#welcome .welcome > .wrapper__inner {
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 28px;
|
||||
background: url("/base/images/welcome.jpg") center center no-repeat;
|
||||
|
|
@ -36,39 +36,39 @@
|
|||
background-size: cover;
|
||||
color: #fff;
|
||||
}
|
||||
#welcome .welcome > .inner > h2 {
|
||||
#welcome .welcome > .wrapper__inner > h2 {
|
||||
color: #fff;
|
||||
}
|
||||
#welcome .welcome > .inner > h3 {
|
||||
#welcome .welcome > .wrapper__inner > h3 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#welcome .promo-col-image > .inner {
|
||||
#welcome .promo-col-image > .flex-item__inner {
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
#welcome .issues-col-image > .inner img {
|
||||
#welcome .issues-col-image > .flex-item__inner img {
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
/* BREAKPOINTS */
|
||||
|
||||
/* MD - Applies >= 768px */
|
||||
@media screen and (min-width: 48em) {
|
||||
#welcome .promo-col-image > .inner {
|
||||
@media screen and (min-width: 48rem) {
|
||||
#welcome .promo-col-image > .flex-item__inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#welcome .issues {
|
||||
padding-top: 1.6rem;
|
||||
}
|
||||
#welcome .issues-col-text > .inner {
|
||||
#welcome .issues-col-text > .flex-item__inner {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
/* LG - Applies >= 992px */
|
||||
@media screen and (min-width: 62em) {
|
||||
#welcome .hello-col-text > .inner {
|
||||
@media screen and (min-width: 62rem) {
|
||||
#welcome .hello-col-text > .flex-item__inner {
|
||||
margin-top: 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -77,19 +77,19 @@
|
|||
padding: 0 15% 2rem;
|
||||
}
|
||||
|
||||
#welcome .promo-col-text > .inner {
|
||||
#welcome .promo-col-text > .flex-item__inner {
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
/* XL - Applies >= 1280px */
|
||||
@media screen and (min-width: 80em) {
|
||||
#welcome .hello-col-text > .inner {
|
||||
@media screen and (min-width: 80rem) {
|
||||
#welcome .hello-col-text > .flex-item__inner {
|
||||
margin-top: 4rem;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
#welcome .pagetop-col-text > .inner {
|
||||
#welcome .pagetop-col-text > .flex-item__inner {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
function pt_menu__showChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.pt-menu__subs');
|
||||
function menu__showChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.menu__subs');
|
||||
submenu.classList.add('active');
|
||||
submenu.style.animation = 'slideLeft 0.5s ease forwards';
|
||||
|
||||
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
||||
nav.querySelector('.pt-menu__title').innerHTML = title;
|
||||
nav.querySelector('.pt-menu__header').classList.add('active');
|
||||
nav.querySelector('.menu__title').innerHTML = title;
|
||||
nav.querySelector('.menu__header').classList.add('active');
|
||||
}
|
||||
|
||||
function pt_menu__hideChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.pt-menu__subs');
|
||||
function menu__hideChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.menu__subs');
|
||||
submenu.style.animation = 'slideRight 0.5s ease forwards';
|
||||
setTimeout(() => {
|
||||
submenu.classList.remove('active');
|
||||
|
|
@ -19,70 +19,69 @@ function pt_menu__hideChildren(nav, children) {
|
|||
children.shift();
|
||||
if (children.length > 0) {
|
||||
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
||||
nav.querySelector('.pt-menu__title').innerHTML = title;
|
||||
nav.querySelector('.menu__title').innerHTML = title;
|
||||
} else {
|
||||
nav.querySelector('.pt-menu__header').classList.remove('active');
|
||||
nav.querySelector('.pt-menu__title').innerHTML = '';
|
||||
nav.querySelector('.menu__header').classList.remove('active');
|
||||
nav.querySelector('.menu__title').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function pt_menu__toggle(nav, overlay) {
|
||||
function menu__toggle(nav, overlay) {
|
||||
nav.classList.toggle('active');
|
||||
overlay.classList.toggle('active');
|
||||
}
|
||||
|
||||
function pt_menu__reset(menu, nav) {
|
||||
nav.querySelector('.pt-menu__header').classList.remove('active');
|
||||
nav.querySelector('.pt-menu__title').innerHTML = '';
|
||||
menu.querySelectorAll('.pt-menu__subs').forEach(submenu => {
|
||||
function menu__reset(menu, nav) {
|
||||
nav.querySelector('.menu__header').classList.remove('active');
|
||||
nav.querySelector('.menu__title').innerHTML = '';
|
||||
menu.querySelectorAll('.menu__subs').forEach(submenu => {
|
||||
submenu.classList.remove('active');
|
||||
submenu.style.removeProperty("animation");
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.pt-menu__container').forEach(menu => {
|
||||
document.querySelectorAll('.menu__container').forEach(menu => {
|
||||
|
||||
let menuChildren = [];
|
||||
const menuNav = menu.querySelector('.pt-menu__nav');
|
||||
const menuOverlay = menu.querySelector('.pt-menu__overlay');
|
||||
const menuNav = menu.querySelector('.menu__nav');
|
||||
const menuOverlay = menu.querySelector('.menu__overlay');
|
||||
|
||||
menu.querySelector('.pt-menu__section').addEventListener('click', (e) => {
|
||||
if (!menuNav.classList.contains('active')) {
|
||||
return;
|
||||
}
|
||||
let target = e.target.closest('.pt-menu__children');
|
||||
if (target && target != menuChildren[0]) {
|
||||
menuChildren.unshift(target);
|
||||
pt_menu__showChildren(menuNav, menuChildren);
|
||||
menu.querySelector('.menu__section').addEventListener('click', (e) => {
|
||||
if (menuNav.classList.contains('active')) {
|
||||
let target = e.target.closest('.menu__children');
|
||||
if (target && target != menuChildren[0]) {
|
||||
menuChildren.unshift(target);
|
||||
menu__showChildren(menuNav, menuChildren);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
menu.querySelector('.pt-menu__arrow').addEventListener('click', () => {
|
||||
pt_menu__hideChildren(menuNav, menuChildren);
|
||||
menu.querySelector('.menu__arrow').addEventListener('click', () => {
|
||||
menu__hideChildren(menuNav, menuChildren);
|
||||
});
|
||||
|
||||
menu.querySelector('.pt-menu__close').addEventListener('click', () => {
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
menu.querySelector('.menu__close').addEventListener('click', () => {
|
||||
menu__toggle(menuNav, menuOverlay);
|
||||
setTimeout(() => {
|
||||
pt_menu__reset(menu, menuNav);
|
||||
menu__reset(menu, menuNav);
|
||||
menuChildren = [];
|
||||
}, 300);
|
||||
});
|
||||
|
||||
menu.querySelector('.pt-menu__trigger').addEventListener('click', () => {
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
menu.querySelector('.menu__trigger').addEventListener('click', () => {
|
||||
menu__toggle(menuNav, menuOverlay);
|
||||
});
|
||||
|
||||
menuOverlay.addEventListener('click', () => {
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
menu__toggle(menuNav, menuOverlay);
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
if (this.innerWidth >= 992) {
|
||||
if (menuNav.classList.contains('active')) {
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
menu__toggle(menuNav, menuOverlay);
|
||||
setTimeout(() => {
|
||||
pt_menu__reset(menu, menuNav);
|
||||
menu__reset(menu, menuNav);
|
||||
menuChildren = [];
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue