Change from jsdeliver to gitcdn

dist/css/full.css

@@ -1161,4 +1161,178 @@ textarea.p-form-text {
   box-shadow: 0 25px 30px rgba(0, 0, 0, 0.2);
 }
 
-/* END OF SHADOWS */
+/* END OF SHADOWS */
+/* START OF TABS */
+
+.p-tabs-container {
+  background: #E3E3E3;
+  border:  1px solid #E0E0E0;
+  padding: 1em;
+}
+
+.p-tabs-container.p-light {
+  background: none;
+  border: none;
+}
+
+.p-tabs-container.p-light .p-panels{
+  margin-top: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+.p-tabs {
+  display: flex;
+  justify-content: center;
+}
+
+.p-tabs > :nth-of-type(1) {
+  border-radius: 5px 0 0 5px;
+}
+
+.p-tabs > :last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+.p-tab {
+  margin: 0;
+  padding: 5px 35px;
+  background: #fff;
+  color: #333230;
+  text-decoration: none;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  border: 1px solid #cacaca;
+  display: inline-block;
+  font-size: 17px;
+  font-family: -apple-system, "Inter", sans-serif;
+  cursor: pointer;
+}
+
+.p-tab:focus {
+  outline: 0;
+}
+
+.p-is-active {
+  background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
+  border: 0;
+  color: #fff;
+}
+
+.p-panels{
+  margin-top: 1em;
+  background: #fff;
+  border-radius: 3px;
+  position: relative;
+  padding: .8em;
+  overflow: hidden;
+}
+
+.p-panel.p-is-active {
+  opacity: 1;
+  pointer-events: all;
+  background: none;
+  color: inherit;
+  position: static;
+}
+
+.p-panel {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+
+  .p-tabs {
+    overflow: auto;
+  }
+  .p-tab {
+    font-size: .8em;
+    padding: 5px 28px;
+  }
+  .p-tabs-container {
+    padding: .8em;
+  }
+  
+  .p-panels {
+    padding: .8em;
+  }
+}
+
+@media screen and (max-width: 496px) {
+  .p-tab {
+    text-align: center;
+    padding: 5px 18px;
+  }
+  .p-tabs-container {
+    padding: .5em;
+  }
+  
+  .p-panels {
+    padding: .5em;
+    margin-top: .5em;
+    
+  }
+}
+
+@media screen and (max-width: 378px) {
+  .p-tab {
+    text-align: center;
+    padding: 5px 10px;
+  }
+  .p-tabs-container {
+    padding: .5em;
+  }
+  
+  .p-panels {
+    padding: .5em;
+    margin-top: .5;
+  }
+}
+
+.p-mobile-tabs {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 15px 0px;
+  border-top: 1px solid #949494;
+  background: rgba(202, 202, 202, 0.8);
+  backdrop-filter: blur(10px);
+  display: flex;
+  font-family: -apple-system, "Inter", sans-serif;
+}
+
+.p-mobile-tabs > div {
+  flex: auto;
+  text-align: center;
+}
+
+.p-mobile-tabs a {
+  text-decoration: none;
+  color: #555;
+  transition: color 0.5s;
+  display: inline-block;
+  font-size: 0.8rem;
+}
+
+.p-mobile-tabs a.active {
+  color: #0f75f5;
+  font-weight: 600;
+}
+
+.p-mobile-tabs svg {
+  display: block;
+  margin: auto;
+  margin-bottom: 0.2rem;
+}
+
+.p-mobile-tabs--content {
+  display: none;
+}
+
+.p-mobile-tabs--content.active {
+  display: block;
+}
+
+/* END OF TABS */

dist/css/tabs.css

@@ -1,6 +1,6 @@
 .p-tabs-container {
-  background: #E3E3E3;
-  border:  1px solid #E0E0E0;
+  background: #e3e3e3;
+  border: 1px solid #e0e0e0;
   padding: 1em;
 }
 
@@ -9,7 +9,7 @@
   border: none;
 }
 
-.p-tabs-container.p-light .p-panels{
+.p-tabs-container.p-light .p-panels {
   margin-top: 0;
   border-radius: 0;
   padding: 0;
@@ -52,12 +52,12 @@
   color: #fff;
 }
 
-.p-panels{
+.p-panels {
   margin-top: 1em;
   background: #fff;
   border-radius: 3px;
   position: relative;
-  padding: .8em;
+  padding: 0.8em;
   overflow: hidden;
 }
 
@@ -76,20 +76,19 @@
 }
 
 @media (max-width: 768px) {
-
   .p-tabs {
     overflow: auto;
   }
   .p-tab {
-    font-size: .8em;
+    font-size: 0.8em;
     padding: 5px 28px;
   }
   .p-tabs-container {
-    padding: .8em;
+    padding: 0.8em;
   }
-  
+
   .p-panels {
-    padding: .8em;
+    padding: 0.8em;
   }
 }
 
@@ -99,13 +98,12 @@
     padding: 5px 18px;
   }
   .p-tabs-container {
-    padding: .5em;
+    padding: 0.5em;
   }
-  
+
   .p-panels {
-    padding: .5em;
-    margin-top: .5em;
-    
+    padding: 0.5em;
+    margin-top: 0.5em;
   }
 }
 
@@ -115,12 +113,12 @@
     padding: 5px 10px;
   }
   .p-tabs-container {
-    padding: .5em;
+    padding: 0.5em;
   }
-  
+
   .p-panels {
-    padding: .5em;
-    margin-top: .5;
+    padding: 0.5em;
+    margin-top: 0.5;
   }
 }
 

docs/examples/buttons.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/color_palette.html

@@ -10,7 +10,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/forms.html

@@ -3,7 +3,7 @@
 <head>
 	<title>Forms - Puppertino Framework</title>
 	<link href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css">
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css">
 	<meta charset="utf-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   	<meta http-equiv="x-ua-compatible" content="ie=edge">

docs/examples/icons.html

@@ -10,7 +10,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/index.html

@@ -10,7 +10,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/layout.html

@@ -10,7 +10,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/modals.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/new-index.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/segmented_controls.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/shadows.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/tabs.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/index.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://min.gitcdn.link/repo/codedgar/Puppertino/master/dist/css/puppertino.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

src/css/full.scss

@@ -5,4 +5,4 @@
 @import "layout";
 @import "modals";
 @import "segmented-controls";
-@import "tabs";
+@import "tabs";

src/css/puppertino.scss

@@ -5,4 +5,4 @@
 @import "layout";
 @import "modals";
 @import "segmented-controls";
-@import "tabs";
+@import "tabs";

src/css/shadows.scss

@@ -23,7 +23,7 @@
 }
 
 .p-to-shadow-1:hover {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);>
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 }
 
 .p-to-shadow-2:hover {

src/css/tabs.scss

@@ -1,17 +1,17 @@
 .p-tabs-container {
-  background: #E3E3E3;
-  border:  1px solid #E0E0E0;
+  background: #e3e3e3;
+  border: 1px solid #e0e0e0;
   padding: 1em;
 }
 
 .p-tabs-container.p-light {
   background: none;
-  border: none;
+  border: 0;
 }
 
-.p-tabs-container.p-light .p-panels{
-  margin-top: 0;
+.p-tabs-container.p-light .p-panels {
   border-radius: 0;
+  margin-top: 0;
   padding: 0;
 }
 
@@ -30,16 +30,16 @@
 
 .p-tab {
   margin: 0;
-  padding: 5px 35px;
   background: #fff;
+  padding: 5px 35px;
   color: #333230;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   border: 1px solid #cacaca;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   display: inline-block;
-  font-size: 17px;
-  font-family: -apple-system, "Inter", sans-serif;
   cursor: pointer;
+  font-family: -apple-system, "Inter", sans-serif;
+  font-size: 17px;
 }
 
 .p-tab:focus {
@@ -52,60 +52,58 @@
   color: #fff;
 }
 
-.p-panels{
-  margin-top: 1em;
+.p-panels {
   background: #fff;
+  margin-top: 1em;
   border-radius: 3px;
-  position: relative;
-  padding: .8em;
   overflow: hidden;
+  padding: 0.8em;
+  position: relative;
 }
 
 .p-panel.p-is-active {
   opacity: 1;
-  pointer-events: all;
   background: none;
+  pointer-events: all;
   color: inherit;
   position: static;
 }
 
 .p-panel {
-  position: absolute;
   opacity: 0;
+  position: absolute;
   pointer-events: none;
 }
 
 @media (max-width: 768px) {
-
   .p-tabs {
     overflow: auto;
   }
   .p-tab {
-    font-size: .8em;
+    font-size: 0.8em;
     padding: 5px 28px;
   }
   .p-tabs-container {
-    padding: .8em;
+    padding: 0.8em;
   }
-  
+
   .p-panels {
-    padding: .8em;
+    padding: 0.8em;
   }
 }
 
 @media screen and (max-width: 496px) {
   .p-tab {
-    text-align: center;
     padding: 5px 18px;
+    text-align: center;
   }
   .p-tabs-container {
-    padding: .5em;
+    padding: 0.5em;
   }
-  
+
   .p-panels {
-    padding: .5em;
-    margin-top: .5em;
-    
+    margin-top: 0.5em;
+    padding: 0.5em;
   }
 }
 
@@ -115,26 +113,26 @@
     padding: 5px 10px;
   }
   .p-tabs-container {
-    padding: .5em;
+    padding: 0.5em;
   }
-  
+
   .p-panels {
-    padding: .5em;
-    margin-top: .5;
+    margin-top: 0.5;
+    padding: 0.5em;
   }
 }
 
 .p-mobile-tabs {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding: 15px 0px;
-  border-top: 1px solid #949494;
   background: rgba(202, 202, 202, 0.8);
+  border-top: 1px solid #949494;
   backdrop-filter: blur(10px);
+  bottom: 0;
   display: flex;
   font-family: -apple-system, "Inter", sans-serif;
+  left: 0;
+  padding: 15px 0px;
+  position: fixed;
+  width: 100%;
 }
 
 .p-mobile-tabs > div {
@@ -143,10 +141,10 @@
 }
 
 .p-mobile-tabs a {
-  text-decoration: none;
   color: #555;
-  transition: color 0.5s;
   display: inline-block;
+  text-decoration: none;
+  transition: color 0.5s;
   font-size: 0.8rem;
 }