Skip to content

Commit

Permalink
Merge branch 'master' into beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@dargmuesli
dargmuesli committed Jan 29, 2023
2 parents 7f294f2 + 1f61383 commit 51bb5b9
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 37 deletions.
5 changes: 4 additions & 1 deletion playground/nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ export default defineNuxtConfig({
[
'@dargmuesli/nuxt-cookie-control',
{
locales: ['en', 'de'],
colors: {
checkboxActiveBackground: '#00A34A', // text-green-600
},
cookies: {
necessary: [
{
Expand All @@ -26,6 +28,7 @@ export default defineNuxtConfig({
},
],
},
locales: ['en', 'de'],
},
],
],
Expand Down
123 changes: 87 additions & 36 deletions src/runtime/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,50 @@
.cookieControl__Modal-enter-active, .cookieControl__Modal-leave-active {
.cookieControl__Modal-enter-active,
.cookieControl__Modal-leave-active {
transition: opacity 0.25s;
}
.cookieControl__Modal-enter, .cookieControl__Modal-leave-to {
.cookieControl__Modal-enter,
.cookieControl__Modal-leave-to {
opacity: 0;
}
.cookieControl__Bar--center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cookieControl__Bar--center-enter-active, .cookieControl__Bar--top-left-enter-active, .cookieControl__Bar--top-full-enter-active, .cookieControl__Bar--top-right-enter-active, .cookieControl__Bar--bottom-left-enter-active, .cookieControl__Bar--bottom-full-enter-active, .cookieControl__Bar--bottom-right-enter-active, .cookieControl__Bar--center-leave-active, .cookieControl__Bar--top-left-leave-active, .cookieControl__Bar--top-full-leave-active, .cookieControl__Bar--top-right-leave-active, .cookieControl__Bar--bottom-left-leave-active, .cookieControl__Bar--bottom-full-leave-active, .cookieControl__Bar--bottom-right-leave-active {
.cookieControl__Bar--center-enter-active,
.cookieControl__Bar--top-left-enter-active,
.cookieControl__Bar--top-full-enter-active,
.cookieControl__Bar--top-right-enter-active,
.cookieControl__Bar--bottom-left-enter-active,
.cookieControl__Bar--bottom-full-enter-active,
.cookieControl__Bar--bottom-right-enter-active,
.cookieControl__Bar--center-leave-active,
.cookieControl__Bar--top-left-leave-active,
.cookieControl__Bar--top-full-leave-active,
.cookieControl__Bar--top-right-leave-active,
.cookieControl__Bar--bottom-left-leave-active,
.cookieControl__Bar--bottom-full-leave-active,
.cookieControl__Bar--bottom-right-leave-active {
transition: transform 0.25s;
}
.cookieControl__Bar--top-left-enter, .cookieControl__Bar--top-full-enter, .cookieControl__Bar--top-right-enter, .cookieControl__Bar--top-left-leave-to, .cookieControl__Bar--top-full-leave-to, .cookieControl__Bar--top-right-leave-to {
.cookieControl__Bar--top-left-enter,
.cookieControl__Bar--top-full-enter,
.cookieControl__Bar--top-right-enter,
.cookieControl__Bar--top-left-leave-to,
.cookieControl__Bar--top-full-leave-to,
.cookieControl__Bar--top-right-leave-to {
transform: translateY(-100%);
}
.cookieControl__Bar--bottom-left-enter, .cookieControl__Bar--bottom-full-enter, .cookieControl__Bar--bottom-right-enter, .cookieControl__Bar--bottom-left-leave-to, .cookieControl__Bar--bottom-right-leave-to, .cookieControl__Bar--bottom-full-leave-to {
.cookieControl__Bar--bottom-left-enter,
.cookieControl__Bar--bottom-full-enter,
.cookieControl__Bar--bottom-right-enter,
.cookieControl__Bar--bottom-left-leave-to,
.cookieControl__Bar--bottom-right-leave-to,
.cookieControl__Bar--bottom-full-leave-to {
transform: translateY(100%);
}
.cookieControl__Bar--center-enter, .cookieControl__Bar--center-leave-to {
.cookieControl__Bar--center-enter,
.cookieControl__Bar--center-leave-to {
transform: translate(-50%, -50%) scale(0.95);
}
.cookieControl {
Expand All @@ -37,9 +63,10 @@
.cookieControl__Bar {
position: fixed;
background-color: var(--cookie-control-barBackground);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.cookieControl__Bar h3, .cookieControl__Bar p {
.cookieControl__Bar h3,
.cookieControl__Bar p {
color: var(--cookie-control-barTextColor);
max-width: 900px;
}
Expand Down Expand Up @@ -68,7 +95,8 @@
align-items: flex-end;
justify-content: space-between;
}
.cookieControl__Bar--top-full, .cookieControl__Bar--bottom-full {
.cookieControl__Bar--top-full,
.cookieControl__Bar--bottom-full {
left: 0;
right: 0;
}
Expand All @@ -78,25 +106,41 @@
.cookieControl__Bar--bottom-full {
bottom: 0;
}
.cookieControl__Bar--center p, .cookieControl__Bar--top-left p, .cookieControl__Bar--top-right p, .cookieControl__Bar--bottom-left p, .cookieControl__Bar--bottom-right p {
.cookieControl__Bar--center p,
.cookieControl__Bar--top-left p,
.cookieControl__Bar--top-right p,
.cookieControl__Bar--bottom-left p,
.cookieControl__Bar--bottom-right p {
max-width: 400px;
}
.cookieControl__Bar--center .cookieControl__BarContainer, .cookieControl__Bar--top-left .cookieControl__BarContainer, .cookieControl__Bar--top-right .cookieControl__BarContainer, .cookieControl__Bar--bottom-left .cookieControl__BarContainer, .cookieControl__Bar--bottom-right .cookieControl__BarContainer {
.cookieControl__Bar--center .cookieControl__BarContainer,
.cookieControl__Bar--top-left .cookieControl__BarContainer,
.cookieControl__Bar--top-right .cookieControl__BarContainer,
.cookieControl__Bar--bottom-left .cookieControl__BarContainer,
.cookieControl__Bar--bottom-right .cookieControl__BarContainer {
flex-direction: column;
}
.cookieControl__Bar--center .cookieControl__BarButtons, .cookieControl__Bar--top-left .cookieControl__BarButtons, .cookieControl__Bar--top-right .cookieControl__BarButtons, .cookieControl__Bar--bottom-left .cookieControl__BarButtons, .cookieControl__Bar--bottom-right .cookieControl__BarButtons {
.cookieControl__Bar--center .cookieControl__BarButtons,
.cookieControl__Bar--top-left .cookieControl__BarButtons,
.cookieControl__Bar--top-right .cookieControl__BarButtons,
.cookieControl__Bar--bottom-left .cookieControl__BarButtons,
.cookieControl__Bar--bottom-right .cookieControl__BarButtons {
margin-top: 20px;
}
.cookieControl__Bar--top-left, .cookieControl__Bar--top-right {
.cookieControl__Bar--top-left,
.cookieControl__Bar--top-right {
top: 20px;
}
.cookieControl__Bar--bottom-left, .cookieControl__Bar--bottom-right {
.cookieControl__Bar--bottom-left,
.cookieControl__Bar--bottom-right {
bottom: 20px;
}
.cookieControl__Bar--top-left, .cookieControl__Bar--bottom-left {
.cookieControl__Bar--top-left,
.cookieControl__Bar--bottom-left {
left: 20px;
}
.cookieControl__Bar--top-right, .cookieControl__Bar--bottom-right {
.cookieControl__Bar--top-right,
.cookieControl__Bar--bottom-right {
right: 20px;
}
.cookieControl__BarButtons {
Expand All @@ -113,14 +157,14 @@
text-align: center;
}
.cookieControl__Modal:before {
content: "";
content: '';
min-height: 100vh;
display: inline-block;
vertical-align: middle;
}
.cookieControl__Modal:after {
position: absolute;
content: "";
content: '';
top: 0;
left: 0;
right: 0;
Expand Down Expand Up @@ -211,7 +255,7 @@
}
.cookieControl__ModalContent label:before {
position: absolute;
content: "";
content: '';
top: 50%;
left: 3px;
width: 15px;
Expand Down Expand Up @@ -259,24 +303,30 @@
padding: 20px;
border: 2px solid #ddd;
}
.cookieControl__BlockedIframe p, .cookieControl__BlockedIframe a {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
.cookieControl__BlockedIframe p,
.cookieControl__BlockedIframe a {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
@media screen and (max-width: 768px) {
.cookieControl__Bar {
flex-direction: column;
left: 0;
right: 0;
}
.cookieControl__Bar p, .cookieControl__Bar h3 {
}
.cookieControl__Bar p,
.cookieControl__Bar h3 {
max-width: 100%;
}
.cookieControl__Bar--top-full, .cookieControl__Bar--top-left, .cookieControl__Bar--top-right {
}
.cookieControl__Bar--top-full,
.cookieControl__Bar--top-left,
.cookieControl__Bar--top-right {
top: 0;
}
.cookieControl__Bar--bottom-full, .cookieControl__Bar--bottom-left, .cookieControl__Bar--bottom-right {
}
.cookieControl__Bar--bottom-full,
.cookieControl__Bar--bottom-left,
.cookieControl__Bar--bottom-right {
bottom: 0;
}
}
.cookieControl__ModalContent {
position: absolute;
top: 0;
Expand All @@ -286,28 +336,29 @@
max-width: none;
max-height: 100%;
padding: 80px 20px 20px;
}
}
.cookieControl__BarButtons {
width: 100%;
margin-top: 20px;
flex-direction: column;
justify-content: center;
}
}
.cookieControl__BarButtons button {
width: 100%;
}
}
.cookieControl__BarButtons button + button {
margin: 10px 0 0;
}
.cookieControl__BarContainer, .cookieControl__ModalButtons {
}
.cookieControl__BarContainer,
.cookieControl__ModalButtons {
flex-direction: column;
}
}
.cookieControl__ModalButtons button {
width: 100%;
}
}
.cookieControl__ModalButtons button + button {
margin: 10px 0 0;
}
}
}
.cookieControl__ControlButton {
position: fixed;
Expand Down

0 comments on commit 51bb5b9

Please sign in to comment.