Work on the components (#10)

* Remove redeclaration to resolve issues

* Add handlers for the button-component accordingly to the issue #6.

* Update some css files

* Add some modifier to the button components

* Add some modifiers to the group component

* Change some property cases

* Update some of the components

Author: mattesmohr

Dependencies/dist/all.css

@@ -1,95 +1,83 @@
-:root {
-    
-    --buttonPadding: 10px 24px 10px 24px;
-    --buttonBorderColor: 5;
-    --buttonBorderWidth: 1px;
-    --buttonBorderRadius: 5px;
-    --buttonFontSize: 14px;
-    --buttonFontWeight: normal;
-    --buttonLineHeight: 1.2rem;
-}
+/**
+ button component
+ */
 
 .button {
-    
-    display: inline-block;
-    width: 100%;
-    padding: var(--buttonPadding);
-    border: var(--buttonBorderWidth) solid transparent;
-    border-radius: var(--buttonBorderRadius);
-    font-size: var(--buttonFontSize);
-    font-weight: var(--buttonFontWeight);
-    line-height: var(--buttonLineHeight);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--buttonPaddingY);
+    padding-right: var(--buttonPaddingX);
+    padding-bottom: var(--buttonPaddingY);
+    padding-left: var(--buttonPaddingX);
+    font-family: var(--textFontFamily);
+    font-size: 16px;
     text-decoration: none;
+    border-width: var(--buttonBorderWidth);
+    border-style: solid;
     cursor: pointer;
+    -webkit-user-select: none;
+}
+
+.button:hover {
+    filter: brightness(90%) saturate(90%);
 }
 
 .button.style\:primary {
-    
     color: var(--whiteColor);
     background-color: var(--primaryColor);
-}
-
-.button.style\:primary:hover {
-    
-    background-color: var(--primaryDarkColor);
+    border-color: var(--primaryColor);
 }
 
 .button.style\:secondary {
-    
     color: var(--whiteColor);
     background-color: var(--secondaryColor);
-}
-
-.button.style\:secondary:hover {
-    
-    background-color: var(--secondaryDarkColor);
+    border-color: var(--secondaryColor);
 }
 
 .button.style\:outline {
-    
     color: var(--secondaryColor);
     background-color: transparent;
     border-color: var(--secondaryColor);
 }
 
-.button.style\:outline:hover {
-    
-    color: var(--whiteColor);
-    background-color: var(--secondaryDarkColor);
-    border-color: transparent;
+.button.size\:full {
+    width: 100%;
 }
 
-.button.style\:ghost {
-    
-    color: var(--blackColor);
-    background-color: transparent;
+.button.size\:large {
+    width: 75%;
 }
 
-.button i {
-    
-    padding: 0px 10px 0px 10px;
+.button.size\:medium {
+    width: 50%;
 }
 
-.group {
-    
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
+.button.size\:small {
+    width: 25%;
+}
+
+.button.shape\:smallrounded {
+    border-radius: 5px;
+}
+
+.button.shape\:largerounded {
+    border-radius: 10px;
+}
+
+.button.shape\:fullrounded {
+    border-radius: 25px;
 }
 
-.group > .button {
-    
-    border-radius: 0;
+.button.shape\:circle {
+    border-radius: 50%;
 }
 
-.group > .button:first-child {
-    
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
+.button > .symbol + * {
+    margin-left: 15px;
 }
 
-.group > .button:last-child {
-    
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+.button > * + .symbol {
+    margin-left: 15px;
 }

Dependencies/src/css/components/button.css

@@ -1,18 +1,44 @@
-:root {
-    
-    --collectionItemHeight: 200px;
-    --collectionGapSize: 35px;
-}
+/**
+ collection component
+ */
 
 .collection {
-    
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-auto-rows: 1fr;
-    grid-gap: var(--collectionGapSize);
+    gap: var(--collectionGapSize);
 }
 
 .collection-item {
+    overflow: hidden;
+}
+
+.collection.style\:grid > .collection-item {
 
-    height: var(--collectionItemHeight);
+    border-width: var(--collectionBorderWidth);
+    border-style: solid;
+    border-color: var(--collectionBorderColor);
+    border-radius: var(--collectionBorderRadius);
+}
+
+.collection.style\:carousel {
+    
+}
+
+.collection.ratio\:50 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.collection.ratio\:33 {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.collection.ratio\:25 {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+.collection.ratio\:20 {
+    grid-template-columns: repeat(5, 1fr);
+}
+
+.collection.ratio\:15 {
+    grid-template-columns: repeat(6, 1fr);
 }

Dependencies/src/css/components/collection.css

@@ -1,11 +1,11 @@
-:root {
-    
-    --dividerColor: #FFFFFF;
-}
+/**
+ divider component
+ */
 
 .divider {
-
-    width: 100%;
     display: block;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    width: 100%;
     background-color: var(--dividerColor);
 }