woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

🎨 Improve SCSS for header navigation

Browse source
This commit is contained in:
Philipp Stracker 2024-12-02 18:25:15 +01:00
parent f4cfabacf9
commit 36b51d2b2a
No known key found for this signature in database
2 changed files with 45 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

65
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -4,52 +4,63 @@
border-bottom: 1px solid $color-gray-300;
position: relative;
--color-accent: #{$color-blueberry};
--color-text: #{$color-gray-900};
--color-disabled: #CCC;
.ppcp-r-navigation {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
button.is-primary {
padding: 10px 18px;
justify-content: center;
margin: 0 0 0 12px;
&:not(:disabled) {
background-color: $color-blueberry;
.components-button {
@include font(13, 20, 400);
&.is-primary {
background-color: var(--color-accent);
padding: 10px 18px;
justify-content: center;
margin: 0 0 0 12px;
&:disabled {
background-color: var(--color-disabled);
}
}
}
button.is-tertiary {
@include font(16, 24, 600);
color: $color-gray-900;
&:hover{
background-color: transparent;
background: none;
&.is-link {
color: var(--color-accent);
text-decoration: none;
&:disabled {
color: var(--color-disabled);
}
}
&.is-title {
@include font(16, 24, 600);
color: var(--color-text);
.title {
margin-left: 18px;
}
.big {
@include font(20, 28, 400);
}
}
}
&--left {
align-items: center;
display: inline-flex;
&__link {
@include font(20, 28, 400);
color: $color-gray-900;
text-decoration: none;
padding: 0 0 0 18px;
}
}
&--right a{
@include font(13, 20, 400);
color: $color-blueberry;
text-decoration: none;
}
&--progress-bar {
position: absolute;
bottom: 0;
left: 0;
background-color: $color-blueberry;
background-color: var(--color-accent);
height: 4px;
transition: width 0.3s;
}