Merge pull request #105 from ConnectHolland/fix-css-build

Fix css build to be generated from scss
Harborn-digital · Oct 19, 2021 · 606a78b · 606a78b
2 parents 063e843 + f3c07a0
commit 606a78b
Showing 1 changed file with 81 additions and 18 deletions.
diff --git a/Resources/public/css/cookie_consent.css b/Resources/public/css/cookie_consent.css
@@ -63,13 +63,13 @@
     left: -10000px;
 }
 
-.ch-cookie-consent__category-toggle input+label {
+.ch-cookie-consent__category-toggle input + label {
     background-repeat: no-repeat;
     background-position: 45px center;
     background-color: #fff;
     color: #223462;
     border: 1px solid #223462;
-    transition: all .2s;
+    transition: all 0.2s;
     display: inline-block;
     margin-right: 15px;
     padding: 6px 28px 6px 10px;
@@ -78,19 +78,17 @@
     width: 75px;
 }
 
-.ch-cookie-consent__category-toggle input+label::before,
-.ch-cookie-consent__category-toggle input+label::after {
+.ch-cookie-consent__category-toggle input + label::before, .ch-cookie-consent__category-toggle input + label::after {
     content: '';
 }
 
-.ch-cookie-consent__category-toggle input:checked+label,
-.ch-cookie-consent__category-toggle input+label:hover {
+.ch-cookie-consent__category-toggle input:checked + label, .ch-cookie-consent__category-toggle input + label:hover {
     background-color: #223462;
     color: #fff;
     border-color: #fff;
 }
 
-.ch-cookie-consent__category-toggle input:checked+label {
+.ch-cookie-consent__category-toggle input:checked + label {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='#fff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
 }
 
@@ -103,28 +101,70 @@
     margin: 0;
 }
 
+.ch-cookie-consent__btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.ch-cookie-consent__btn-group .ch-cookie-consent__btn {
+    margin-right: 30px;
+}
+
+.ch-cookie-consent__btn-group .ch-cookie-consent__toggle-details {
+    cursor: pointer;
+    margin-bottom: 25px;
+}
+
+.ch-cookie-consent__btn-group .ch-cookie-consent__toggle-details-hide {
+    display: none;
+}
+
+.ch-cookie-consent__btn-wrapper {
+    margin-bottom: 25px;
+}
+
+.ch-cookie-consent__btn-wrapper:nth-child(2) {
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 861px) {
+    .ch-cookie-consent__btn-wrapper {
+        width: 100%;
+    }
+}
+
 .ch-cookie-consent__btn {
-    margin-top: 25px;
-    width: 200px;
-    background: linear-gradient(349.19deg, #CF1E34 0%, #EE365F 100%);
+    background: linear-gradient(349.19deg, #cf1e34 0%, #ee365f 100%);
     color: #fff;
     font-weight: bold;
     padding: 10px 20px;
     display: -ms-flexbox;
     display: flex;
-    margin-left: auto;
     text-align: center;
     border-radius: 6px;
-    box-shadow: 0 26px 10px -21px rgba(0, 0, 0, 0.28);
+    box-shadow: 0 26px 10px -21px rgba(0, 0, 0, .28);
+}
+
+@media screen and (max-width: 641px) {
+    .ch-cookie-consent__btn {
+        width: 100%;
+        display: inline-block;
+    }
+}
+
+.ch-cookie-consent__btn--secondary {
+    background: transparent;
+    color: #000;
+    border: 2px solid #000;
 }
 
 .ch-cookie-consent--dark-theme {
     background-color: #000;
     color: #fff;
 }
 
-.ch-cookie-consent--dark-theme .ch-cookie-consent__title,
-.ch-cookie-consent--dark-theme .ch-cookie-consent__read-more {
+.ch-cookie-consent--dark-theme .ch-cookie-consent__title, .ch-cookie-consent--dark-theme .ch-cookie-consent__read-more {
     color: #fff;
 }
 
@@ -136,23 +176,46 @@
     border-color: #fff;
 }
 
-.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input+label {
+.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input + label {
     background-color: #000;
     color: #fff;
     border-color: #fff;
 }
 
-.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input:checked+label,
-.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input+label:hover {
+.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input:checked + label, .ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input + label:hover {
     background-color: #fff;
     color: #000;
     border-color: #000;
 }
 
-.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input:checked+label {
+.ch-cookie-consent--dark-theme .ch-cookie-consent__category-toggle input:checked + label {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='#000' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
 }
 
 .ch-cookie-consent--dark-theme .ch-cookie-consent__category-title {
     color: #fff;
 }
+
+.ch-cookie-consent--dark-theme .ch-cookie-consent__btn--secondary {
+    background: transparent;
+    color: #fff;
+    border: 2px solid #fff;
+}
+
+.ch-cookie-consent--simplified .ch-cookie-consent__form {
+    flex-direction: column-reverse;
+    display: flex;
+}
+
+.ch-cookie-consent--simplified .ch-cookie-consent__category-group {
+    display: none;
+}
+
+.ch-cookie-consent--simplified .ch-cookie-consent__category-toggle {
+    display: none;
+}
+
+.ch-cookie-consent--simplified .ch-cookie-consent__btn-group {
+    margin-top: 0;
+    margin-bottom: 25px;
+}