styling components

src/components/form/button/button.css

@@ -0,0 +1,24 @@
+.form-button{
+    touch-action: manipulation;
+
+    width: var(--form-mid-width);
+    border-radius: var(--def-radius);
+
+    padding: 0.56rem 0.8rem;
+
+    border: none;
+    outline-color: rgba(255, 255, 255, 0.87);
+
+    background-color: #f1f5f9;
+    transition: background-color 0.2s ease-out;
+
+    color: var(--text-color);
+    font-weight: 600;
+    font-size: 14px;
+
+    cursor: pointer;
+}
+
+.form-button:hover{
+    background-color: #e2e8f0;
+}

src/components/form/button/button.html

@@ -0,0 +1 @@
+<button class="form-button">Submit</button>

src/components/form/listbox/listbox.css

@@ -5,10 +5,30 @@
     border-radius: var(--def-radius);
     padding: 2px;
     width: var(--form-mid-width);
+    margin-bottom: var(--form-el-margin-bottom);
 }
 
 .list-option{
-    padding: 0.4rem 0.6rem;
+    padding: 0.24rem 0.48rem;
     cursor: pointer;
     border-radius: var(--def-radius);
+    transition: background-color 0.2s ease-out;
+}
+
+.list-option:not(:last-child){
+    margin-bottom: 1px;
+}
+
+.list-option:hover{
+    background-color: #f1f5f9;
+}
+
+.list-option-selected{
+    background-color: #020617;
+    color: #fff;
+}
+
+.list-option-selected:hover{
+    background-color:  #020617; 
+    transition: none;
 }

src/components/form/listbox/listbox.html

@@ -2,7 +2,7 @@
     <ul class="list-container">
         <li class="list-option">New York</li>
         <li class="list-option">Rome</li>
-        <li class="list-option">London</li>
+        <li class="list-option list-option-selected">London</li>
         <li class="list-option">Istanbul</li>
         <li class="list-option">Paris</li>
     </ul>

src/pages/css/initial.css

@@ -54,47 +54,6 @@ body {
   font-weight: 400;
 }
 
-h1 {
-  font-size: 2.5rem;
-  font-weight: 500;
-}
-
-h2 {
-  font-size: 2.25rem;  
-  font-weight: 500;
-}
-
-h3 {
-  font-size: 2rem;  
-  font-weight: 500;
-}
-
-h4 {
-  font-size: 1.75rem;
-}
-
-h5 {
-  font-size: 1.5rem;
-}
-
-h6 {
-  font-size: 1.25rem;
-}
-
-#main{
-    margin: 0 auto;
-    max-width: 1920px;
-    min-width: 320px;
-    min-height: 100vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    position: relative;
-    border: 5px solid orange;
-    /*letter-spacing: 0!important;*/
-}
-
 @media only screen and (max-width : 320px) {
   body * {
       animation: none !important;

src/pages/css/main.css

@@ -0,0 +1,59 @@
+:root {
+  --silver-color: #E1E3DF;
+  --text-color: #34485E;
+
+  --animate-duration: 1s;
+  --animate-delay: 1s;
+  --animate-repeat: 1;
+
+  --def-radius: 6px;
+  --def-border-color: #e5e7eb;
+
+  --form-small-width: 132px;
+  --form-mid-width: 264px;
+  --form-big-width: 528px;
+
+  --form-el-margin-bottom: 8px;  
+
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+
+h2 {
+  font-size: 2.25rem;  
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 2rem;  
+  font-weight: 500;
+}
+
+h4 {
+  font-size: 1.75rem;
+}
+
+h5 {
+  font-size: 1.5rem;
+}
+
+h6 {
+  font-size: 1.25rem;
+}
+
+#main{
+    margin: 0 auto;
+    max-width: 1920px;
+    min-width: 320px;
+    min-height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    position: relative;
+    color: var(--text-color)
+    /*letter-spacing: 0!important;*/
+}

src/pages/css/vars.css

@@ -1,16 +0,0 @@
-:root {
-  --silver-color: #E1E3DF;
-  --text-color: #34485E;
-
-  --animate-duration: 1s;
-  --animate-delay: 1s;
-  --animate-repeat: 1;
-
-  --def-radius: 4px;
-  --def-border-color: #e5e7eb;
-
-  --form-small-width: 132px;
-  --form-mid-width: 264px;
-  --form-big-width: 528px;
-
-}

src/pages/example/example.css

@@ -1,5 +1,4 @@
 .preview {
-    border: 4px solid greenyellow;
     width: 100%;
     flex-grow: 1;
     display: flex;