..

README.md

@@ -30,6 +30,7 @@ You can use the following options.
 `cookieDays` default: 365 // Amount of days the cookie is saved before erased by the browser.  
 `classPrefix` default: "AMPEr" // If you want to use you own styling.    
 `debugMode` default: false // Change this to true if you want to open the modal every pageload.  
+`extraClass` default: "" // Put an extra class for styling on the modal
 `language` default: "en" // What language from the lexicon we want to use.  
 `lexicon` // see below for more information.  
 `analyticCallback` default: `function () { console.log("Consent for analytic cookies!");` // Triggers when it has consent for analytic cookies.    

dist/AMPEr/css/AMPEr.css

@@ -17,6 +17,7 @@
  * 4. Buttons and icon's
  * 5. Toggle switch component
  * 6. Transition
+ * 7. Extra styling options
  */
 /* 2. Helpers ( Maybe this is already included, but heck .. )*/
 .sr-only {
@@ -205,3 +206,44 @@ html.using-mouse :focus + label span:last-child {
   display: none; }
   #AMPEr_modal_2.AMPEr--active {
     display: block; }
+
+/* 7. Extra styling options */
+.AMPEr_modal.AMPEr--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  border-radius: 0; }
+  .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 {
+    align-items: center;
+    justify-content: space-between; }
+    .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1.AMPEr--active {
+      display: flex; }
+    .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 .AMPEr_modal_head {
+      display: none; }
+    .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 .AMPEr_description {
+      flex-grow: 1; }
+    .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 .AMPEr_modal_buttons {
+      margin-top: 0;
+      display: flex;
+      justify-content: flex-end;
+      min-width: 200px; }
+  .AMPEr_modal.AMPEr--bottom #AMPEr_modal_2 {
+    background-color: white;
+    padding: 1rem;
+    border-radius: 0.625rem;
+    max-width: 700px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
+  @media screen and (max-width: 768px) {
+    .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 {
+      flex-wrap: wrap; }
+      .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 .AMPEr_description {
+        flex-grow: 1; }
+      .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 .AMPEr_modal_buttons {
+        width: 100%;
+        margin-top: 0;
+        display: flex;
+        justify-content: flex-end; } }

dist/AMPEr/js/AMPEr.js

@@ -36,6 +36,7 @@ var AMPEr = function () {
     cookieName: "AMPEr",
     cookieDays: 365,
     classPrefix: "AMPEr",
+    extraClass: "",
     debugMode: false,
     language: "en",
     lexicon: {
@@ -95,7 +96,7 @@ var AMPEr = function () {
 
   var showCookieWindow = function showCookieWindow() {
     var html;
-    html = '<div class="' + settings.classPrefix + '_modal" id="AMPEr_Cookies" role="dialog" aria-labelledby="AMPEr_title" aria-describedby="AMPEr_description">';
+    html = '<div class="' + settings.classPrefix + '_modal ' + settings.extraClass + '" id="AMPEr_Cookies" role="dialog" aria-labelledby="AMPEr_title" aria-describedby="AMPEr_description">';
     html += '<div class="' + settings.classPrefix + '_modal_inner">';
     html += '<div id="AMPEr_modal_1" class="AMPEr--active">';
     html += '<h2 class="' + settings.classPrefix + '_modal_head" id="AMPEr_title">' + settings.lexicon[settings.language].modalTitle + '</h2>';

dist/js/build/main.js

@@ -4,6 +4,7 @@ function main() {
   a11yFocus();
   AMPEr.init({
     debugMode: true,
+    extraClass: "AMPEr--bottom",
     language: "en"
   });
 }

src/AMPEr/js/AMPEr.js

@@ -38,6 +38,7 @@ var AMPEr = (function () {
         cookieName: "AMPEr",
         cookieDays: 365,
         classPrefix: "AMPEr",
+        extraClass: "",
         debugMode: false,
         language: "en",
         lexicon: {
@@ -99,7 +100,7 @@ var AMPEr = (function () {
     const showCookieWindow = function () {
         let html;
 
-        html = '<div class="' + settings.classPrefix + '_modal" id="AMPEr_Cookies" role="dialog" aria-labelledby="AMPEr_title" aria-describedby="AMPEr_description">';
+        html = '<div class="' + settings.classPrefix + '_modal '+ settings.extraClass + '" id="AMPEr_Cookies" role="dialog" aria-labelledby="AMPEr_title" aria-describedby="AMPEr_description">';
         html += '<div class="' + settings.classPrefix + '_modal_inner">';
         html += '<div id="AMPEr_modal_1" class="AMPEr--active">';
         html += '<h2 class="' + settings.classPrefix + '_modal_head" id="AMPEr_title">' + settings.lexicon.[settings.language].modalTitle + '</h2>'

src/AMPEr/scss/AMPEr.scss

@@ -18,6 +18,7 @@
  * 4. Buttons and icon's
  * 5. Toggle switch component
  * 6. Transition
+ * 7. Extra styling options
  */
 
 // 1. Variables and functions 
@@ -87,6 +88,8 @@ html.using-mouse :focus + label span:last-child {
     &_text {
         margin: 1rem 0;
     }
+
+
 }
 
 @media screen and (min-width:480px){
@@ -306,3 +309,63 @@ html.using-mouse :focus + label span:last-child {
         display: block;
     }
 }
+
+/* 7. Extra styling options */
+.AMPEr_modal.AMPEr--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    border-radius: 0;
+
+    #AMPEr_modal_1 {
+        &.AMPEr--active {
+            display:flex;
+        }
+        align-items: center;
+        justify-content: space-between;
+
+        .AMPEr_modal_head {
+            display: none;
+        }
+        .AMPEr_description {
+            flex-grow: 1;
+        }
+        .AMPEr_modal_buttons {
+            margin-top: 0;
+            display: flex;
+            justify-content: flex-end;
+            min-width: 200px;
+        }
+    }
+
+    #AMPEr_modal_2 {
+        background-color: white;
+        padding: 1rem;
+        border-radius: rem(10px);
+        max-width:700px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    @media screen and (max-width: 768px){
+        #AMPEr_modal_1 {
+            flex-wrap: wrap;
+
+            .AMPEr_description {
+                flex-grow: 1;
+            }
+            .AMPEr_modal_buttons {
+                width: 100%;
+                margin-top: 0;
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+    }
+
+
+
+}

src/js/main.js

@@ -4,6 +4,7 @@ function main() {
 
     AMPEr.init({
         debugMode: true,
+        extraClass: "AMPEr--bottom",
         language: "en",
     });
 }