Fixed bug and added actions, docs pending

dist/css/actions.css

@@ -0,0 +1,121 @@
+.p-action-background{
+  background: rgba(0, 0, 0, 0.3);
+    height: 100vh;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    transition: all 0.3s;
+    width: 100vw;
+    z-index: 5;
+}
+
+.p-action-background.nowactive {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+
+.p-action-big-container{
+  position:fixed;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1rem 5vw;
+  bottom:0;
+}
+
+.p-action-container{
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  display:block;
+  margin:auto;
+  margin-bottom: 10px;
+  border-radius: 10px;
+}
+
+.p-action-big-container .p-action-container:first-child{
+  margin-bottom:10px;
+}
+
+.p-action--intern{
+  display:block;
+  margin:auto;
+  text-align:center;
+  padding: 15px 0;
+  border-bottom: 1px solid #bfbfbf;
+  font-weight: 500;
+  color: #0f75f5;
+  text-decoration:none;
+}
+
+.p-action-destructive{
+  color: #c6262e;
+}
+
+.p-action-neutral{
+  color: #555761;
+}
+
+.p-action-cancel, .p-action-container a:last-child{
+  border-bottom:none;
+}
+
+.p-action-cancel{
+  font-weight:bold;
+}
+
+.p-action-icon{
+  position:relative;
+}
+.p-action-icon svg, .p-action-icon img{
+  position:absolute;
+  left:5%;
+  top:50%;
+  transform:translateY(-50%);
+}
+
+.p-action-icon-inline{
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.p-action-icon-inline svg, .p-action-icon-inline img{
+  margin-left: 5%;  
+  margin-right: 3%;
+}
+
+.p-action-title{
+  padding: 30px 15px;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.p-action-title--intern,.p-action-text{
+  margin:0;
+  color:#555761;
+}
+
+.p-action-title--intern{
+  margin-bottom: .3rem;
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+  .p-action-container {
+    background: rgba(255,255,255,.95);
+  }
+}
+
+.p-action-big-container{
+  -webkit-transform: translateY(30%);
+            transform: translateY(30%);
+    opacity: 0;
+  transition: opacity 0.4s, transform 0.4s;
+  transition-timing-function: ease-in-out;
+}
+
+.p-action-big-container.active {
+-webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+}

dist/css/forms.css

@@ -1,3 +1,13 @@
+:root {
+  --primary-col:linear-gradient(to bottom, #4fc5fa 0%,#0f75f5 100%);
+  --primary-col-ac:#0f75f5;
+  --bg-color:#fff;
+  --bg-hover-color:#f9f9f9;
+  --bg-front-col:#000;
+  --invalid-color:#d6513c;
+  --valid-color:#94d63c;
+}
+
 .p-form-select {
   border-radius: 5px;
   display: inline-block;
@@ -34,7 +44,8 @@
 }
 
 .p-form-select > select {
-  background: var(--bg-color);
+  -webkit-appearance: none;
+  background: #fff;
   border: 1px solid #cacaca;
   border-radius: 5px;
   font-size: 14px;
@@ -46,26 +57,30 @@
 }
 
 .p-form-text:invalid,
+.p-form-text-alt:invalid,
 .p-form-select > select:invalid {
   border-color: var(--invalid-color);
 }
 
 .p-form-text:valid,
+.p-form-text-alt:valid,
 .p-form-select > select:valid {
   border-color: var(--valid-color);
 }
 
 .p-form-text:placeholder-shown,
+.p-form-text-alt:placeholder-shown,
 .p-form-select > select:placeholder-shown {
   border-color: #cacaca;
 }
 
 .p-form-text {
-  appearance: none;
-  background: var(--bg-color);
+  -webkit-appearance: none;
+  box-shadow: none;
+  background: #fff;
   border: 1px solid #cacaca;
   border-radius: 5px;
-  font-family: var(--font);
+  font-family: -apple-system, "Inter", sans-serif;
   margin: 10px;
   outline: 0;
   padding: 5px;
@@ -73,11 +88,31 @@
   transition: border-color 200ms;
 }
 
+.p-form-text-alt {
+  -webkit-appearance: none;
+  box-shadow: none;
+  background: #fff;
+  border: 0px;
+  border-bottom: 2px solid #cacaca;
+  padding: 10px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  margin: 10px;
+}
+
+.p-form-text-alt::placeholder {
+  color: #cacaca;
+}
+
+.p-form-text-alt:focus {
+  outline: 3px solid #bed8f9;
+}
+
 .p-form-no-validate:valid,
 .p-form-no-validate:invalid,
 .p-form-no-validate > select:valid,
 .p-form-no-validate > select:invalid {
-  border: 1px solid #cacaca;
+  border-color: #cacaca;
 }
 
 .p-form-text:focus {
@@ -85,7 +120,7 @@
 }
 
 textarea.p-form-text {
-  appearance: none;
+  -webkit-appearance: none;
   height: 100px;
 }
 
@@ -96,7 +131,7 @@ textarea.p-form-text {
 }
 
 .p-form-text[type=password] {
-  font-family: caption, sans-serif;
+  font-family: caption;
 }
 
 .p-form-label,
@@ -118,7 +153,7 @@ textarea.p-form-text {
 
 .p-form-radio-cont > input + span,
 .p-form-checkbox-cont > input + span {
-  background: var(--bg-color);
+  background: #fff;
   border: 1px solid #cacaca;
   border-radius: 50%;
   cursor: pointer;
@@ -131,7 +166,7 @@ textarea.p-form-text {
 }
 
 .p-form-radio-cont > input + span:hover {
-  background: var(--bg-hover-color);
+  background: #f9f9f9;
 }
 
 .p-form-radio-cont > input,
@@ -201,6 +236,7 @@ textarea.p-form-text {
 }
 
 .p-form-button {
+  -webkit-appearance: none;
   background: #fff;
   border: 1px solid #cacaca;
   border-radius: 5px;
@@ -214,8 +250,8 @@ textarea.p-form-text {
 }
 
 .p-form-send {
-  background: var(--primary-col);
-  border: 1px solid #4fc5fa;
+  background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
+  border: 0;
   color: #fff;
 }
 
@@ -237,16 +273,16 @@ textarea.p-form-text {
   border-color: var(--valid-color);
 }
 
-.p-form-switch > input:checked + span::after {
-  left: calc(100% - calc(var(--width) / 2.1));
-}
-
 .p-form-switch {
   --width: 80px;
   cursor: pointer;
   display: inline-block;
 }
 
+.p-form-switch > input:checked + span::after {
+  left: calc(100% - calc(var(--width) / 2.1));
+}
+
 .p-form-switch > input:checked + span {
   background: #60c35b;
 }
@@ -266,7 +302,7 @@ textarea.p-form-text {
 .p-form-switch > span::after {
   background: #f9f9f9;
   border-radius: 50%;
-  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.16), 0px 3px 8px rgba(0, 0, 0, 0.15);
   content: "";
   height: 90%;
   left: 3%;
@@ -369,3 +405,6 @@ how to remove the virtical space around the range input in IE*/
     /*Edge starts the margin from the thumb, not the track as other browsers do*/
   }
 }
+
+
+/* END OF FORMS */

dist/css/modals.css

@@ -41,7 +41,7 @@
 }
 
 .p-modal.active {
-  backdrop-filter: blur(5px);
+  backdrop-filter: saturate(180%) blur(10px);
   opacity: 1;
   pointer-events: auto;
   transform: scale(1);
@@ -89,6 +89,7 @@
 
   .p-modal p {
     font-size: 15px;
+    padding: 0% 10%;
   }
 
   .p-modal-button-container {

dist/css/shadows.css

@@ -3,9 +3,10 @@
   <head>
     <title>Buttons - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
@@ -92,8 +93,6 @@
 
         <a href="#" class="p-btn p-prim-col">Primary</a>
 
-        <a href="#" class="p-btn p-btn-hero">Big Button</a>
-
         <a href="#" class="p-btn p-btn-round">Rounded</a>
 
         <a href="#" class="p-btn p-prim-col" id="mobile_big">Mobile big</a>
@@ -114,8 +113,6 @@
 
 &#60;a href="#" class="p-btn p-prim-col">Primary&#60;/a>
 
-&#60;a href="#" class="p-btn p-btn-hero">Big Button&#60;/a>
-
 &#60;a href="#" class="p-btn p-btn-round">Rounded&#60;/a>
 
 &#60;a href="#" class="p-btn p-prim-col p-btn-big-sm">Mobile big&#60;/a>

docs/examples/color_palette.html

@@ -3,7 +3,7 @@
   <head>
     <title>Color Palette - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link

docs/examples/forms.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<title>Forms - Puppertino Framework</title>
-	<link href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css">
 	<meta charset="utf-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

docs/examples/icons.html

@@ -3,7 +3,7 @@
   <head>
     <title>Icons - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link

docs/examples/index.html

@@ -3,7 +3,7 @@
   <head>
     <title>Examples & Documentation - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
       rel="stylesheet"
     />
     <link

docs/examples/layout.html

@@ -3,7 +3,7 @@
   <head>
     <title>Layout - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link

docs/examples/modals.html

@@ -3,7 +3,7 @@
   <head>
     <title>Modals - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />

docs/examples/new-index.html

@@ -3,7 +3,7 @@
   <head>
     <title>Home - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />

docs/examples/segmented_controls.html

@@ -3,7 +3,7 @@
   <head>
     <title>Segmented controls - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />

docs/examples/shadows.html

@@ -3,7 +3,7 @@
   <head>
     <title>Shadows - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />

docs/examples/tabs.html

@@ -3,7 +3,7 @@
   <head>
     <title>Tabs - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />

docs/index.html

@@ -3,7 +3,7 @@
   <head>
     <title>Home - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
+      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />

src/css/actions.scss

@@ -0,0 +1,121 @@
+.p-action-background{
+  background: rgba(0, 0, 0, 0.3);
+    height: 100vh;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    transition: all 0.3s;
+    width: 100vw;
+    z-index: 5;
+}
+
+.p-action-background.nowactive {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+
+.p-action-big-container{
+  position:fixed;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1rem 5vw;
+  bottom:0;
+}
+
+.p-action-container{
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  display:block;
+  margin:auto;
+  margin-bottom: 10px;
+  border-radius: 10px;
+}
+
+.p-action-big-container .p-action-container:first-child{
+  margin-bottom:10px;
+}
+
+.p-action--intern{
+  display:block;
+  margin:auto;
+  text-align:center;
+  padding: 15px 0;
+  border-bottom: 1px solid #bfbfbf;
+  font-weight: 500;
+  color: #0f75f5;
+  text-decoration:none;
+}
+
+.p-action-destructive{
+  color: #c6262e;
+}
+
+.p-action-neutral{
+  color: #555761;
+}
+
+.p-action-cancel, .p-action-container a:last-child{
+  border-bottom:none;
+}
+
+.p-action-cancel{
+  font-weight:bold;
+}
+
+.p-action-icon{
+  position:relative;
+}
+.p-action-icon svg, .p-action-icon img{
+  position:absolute;
+  left:5%;
+  top:50%;
+  transform:translateY(-50%);
+}
+
+.p-action-icon-inline{
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.p-action-icon-inline svg, .p-action-icon-inline img{
+  margin-left: 5%;  
+  margin-right: 3%;
+}
+
+.p-action-title{
+  padding: 30px 15px;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.p-action-title--intern,.p-action-text{
+  margin:0;
+  color:#555761;
+}
+
+.p-action-title--intern{
+  margin-bottom: .3rem;
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+  .p-action-container {
+    background: rgba(255,255,255,.95);
+  }
+}
+
+.p-action-big-container{
+  -webkit-transform: translateY(30%);
+            transform: translateY(30%);
+    opacity: 0;
+  transition: opacity 0.4s, transform 0.4s;
+  transition-timing-function: ease-in-out;
+}
+
+.p-action-big-container.active {
+-webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+}

src/css/full.scss

@@ -6,3 +6,4 @@
 @import "modals";
 @import "segmented-controls";
 @import "tabs";
+@import "actions";

src/css/modals.scss

@@ -40,7 +40,7 @@
 }
 
 .p-modal.active {
-  backdrop-filter: blur(5px);
+  backdrop-filter: saturate(180%) blur(10px);
   opacity: 1;
   pointer-events: auto;
   transform: scale(1);
@@ -89,6 +89,7 @@
 
   .p-modal p {
     font-size: 15px;
+    padding: 0% 10%;
   }
 
   .p-modal-button-container {

src/css/puppertino.scss

@@ -6,3 +6,4 @@
 @import "modals";
 @import "segmented-controls";
 @import "tabs";
+@import "actions";