process

Author: Artasov

classes/layout.sass

@@ -62,6 +62,27 @@
   justify-content: center
   align-items: center
 
+.fccs
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: flex-start
+.frcs
+  display: flex
+  flex-direction: row
+  justify-content: center
+  align-items: flex-start
+.frce
+  display: flex
+  flex-direction: row
+  justify-content: center
+  align-items: flex-end
+.fcce
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: flex-end
+
 .fcbc
   display: flex
   flex-direction: column

classes/margins.sass

@@ -0,0 +1,59 @@
+.mt-1px
+  margin-top: 1px
+
+.mt-2px
+  margin-top: 2px
+
+.mt-3px
+  margin-top: 3px
+
+.mt-4px
+  margin-top: 4px
+
+.mt-5px
+  margin-top: 5px
+
+.me-1px
+  margin-right: 1px
+
+.me-2px
+  margin-right: 2px
+
+.me-3px
+  margin-right: 3px
+
+.me-4px
+  margin-right: 4px
+
+.me-5px
+  margin-right: 5px
+
+.ms-1px
+  margin-left: 1px
+
+.ms-2px
+  margin-left: 2px
+
+.ms-3px
+  margin-left: 3px
+
+.ms-4px
+  margin-left: 4px
+
+.ms-5px
+  margin-left: 5px
+
+.mb-1px
+  margin-bottom: 1px
+
+.mb-2px
+  margin-bottom: 2px
+
+.mb-3px
+  margin-bottom: 3px
+
+.mb-4px
+  margin-bottom: 4px
+
+.mb-5px
+  margin-bottom: 5px

classes/paddings.sass

@@ -0,0 +1,59 @@
+.pt-1px
+  padding-top: 1px
+
+.pt-2px
+  padding-top: 2px
+
+.pt-3px
+  padding-top: 3px
+
+.pt-4px
+  padding-top: 4px
+
+.pt-5px
+  padding-top: 5px
+
+.pe-1px
+  padding-right: 1px
+
+.pe-2px
+  padding-right: 2px
+
+.pe-3px
+  padding-right: 3px
+
+.pe-4px
+  padding-right: 4px
+
+.pe-5px
+  padding-right: 5px
+
+.ps-1px
+  padding-left: 1px
+
+.ps-2px
+  padding-left: 2px
+
+.ps-3px
+  padding-left: 3px
+
+.ps-4px
+  padding-left: 4px
+
+.ps-5px
+  padding-left: 5px
+
+.pb-1px
+  padding-bottom: 1px
+
+.pb-2px
+  padding-bottom: 2px
+
+.pb-3px
+  padding-bottom: 3px
+
+.pb-4px
+  padding-bottom: 4px
+
+.pb-5px
+  padding-bottom: 5px

classes/size.sass

@@ -23,6 +23,15 @@
   max-height: 100vh !important
 
 
+@for $i from 0 through 20
+  .w-#{5 * $i}vw
+    width: (5 * $i) * 1% + vw !important
+
+@for $i from 0 through 20
+  .h-#{5 * $i}vh
+    height: (5 * $i) * 1 + vh !important
+
+
 @for $i from 0 through 20
   .w-#{5 * $i}
     width: (5 * $i) * 1% !important
@@ -46,4 +55,13 @@
 
 @for $i from 2 through 20
   .mh-#{5 * $i}
-    max-height: #{5 * $i + "% !important"}
+    max-height: #{5 * $i + "% !important"}
+
+
+@for $i from 2 through 20
+  .mw-#{5 * $i}vw
+    max-width: #{5 * $i + "vw !important"}
+
+@for $i from 2 through 20
+  .mh-#{5 * $i}vh
+    max-height: #{5 * $i + "vh !important"}

wide-classes.css

@@ -10,6 +10,8 @@
 @import "classes/size"
 @import "classes/transition"
 @import "classes/grid"
+@import "classes/margins"
+@import "classes/paddings"
 
 
 button, input[type="submit"], input[type="reset"]
@@ -45,6 +47,15 @@ textarea, textarea:active, textarea:focus
   -ms-overflow-style: none
   overflow: -moz-scrollbars-none
 
+.outline-none
+  outline: none !important
+
+  &:focus
+    outline: none !important
+
+  &:focus-visible
+    outline: none !important
+
 ._pc
   .only_pc
     display: block !important