Merge branch 'master' of github.com:WebArtWork/ngx-platform

WebArtWork · Nov 27, 2024 · 8968857 · 8968857
2 parents f2975cd + 8a4cbb3
commit 8968857
Show file tree

Hide file tree

Showing 30 changed files with 2,764 additions and 0 deletions.
diff --git a/ngx-css/Classes.md b/ngx-css/Classes.md
@@ -0,0 +1,69 @@
+# • HOW TO USE OUR CLASSES IN HTML •
+
+## STRUCTURE
+### Components
+	included file readme in components folder
+
+### GRID
+	row // row
+	col-1  // column width 100%
+	col-2 // column width 50%
+	col-3 // column width 33.3%
+	col-4 // column width 25%
+	col-5 // column width 20%
+	col-23 // column width 66.6%
+	col-2m // column min-width 50%
+	col-25 // column width 40%
+
+### CARD
+	w-card // card body
+	w-card _pd  // card with padding
+	w-card__header // header card inside w-card
+
+### Atom (should turn on in file app.scss)
+	1. Display
+		d-b //display-block:
+		d-ib //display-inline-block
+		d-f // display-flex
+		fd-c // flex-direction-column
+		jc-sb // justify-content-space-between
+		jc-fs // justify-content-flex-start
+		jc-c // justify-content-center
+		jc-fe // justify-content-flex-end
+		ai-c // align-items-center
+		ai-fe // align-items-flex-end
+		ai-fs // align-items-flex-start
+		ai-sb // align-items-space-between
+		fg-1 // flex-grow-1
+
+	2. Margin (should set numbers in margin.scss)
+		m$ // margin $ px
+		mx$ // margin left and right $px
+		my$ // margin top and bottom $px
+		example: m10 // margin: 10px;
+
+	3. Padding (should set numbers in padding.scss)
+		p$ // padding $ px
+		px$ // padding left and right $px
+		py$ // padding top and bottom $px
+		example: p10 // padding: 10px;
+	4. Other
+		pos-rel // position relative
+
+	5. Size
+		w100p // width 100%
+		h100p // height 100%\
+
+	6. Text
+		ta-l // text-align-left
+		ta-c // text-align-center
+		ta-r // text-align-right
+		ws-nw // white-space-no-wrap
+		ws-pl // white-space-pre-line
+		ws-n // white-space-normal
+		fw400 // font-weight-400
+		fw500 // font-weigh-500
+		fw700 // font-weight-700
+		tt-u // text-transform-uppercase
+### Icons
+	<i>edit</i> // We can use material icons in these formats
diff --git a/ngx-css/Readme.md b/ngx-css/Readme.md
@@ -0,0 +1,68 @@
+# • SCSS FOLDER PACK BY WAW •
+
+## I. GET STARTED
+- Import app.scss to your global styles -> ```@import: "scss/waw";```
+
+## II. STRUCTURE
+### Atom
+	1. display
+	2. margin
+	3. other
+	4. padding
+	5. size
+	6. text
+
+### Components
+	1. w-btn
+	2. w-checkbox
+	3. w-card
+	4. w-forms
+	5. w-radio
+	6. w-switch
+	7. w-table
+
+### Layout
+	1. base
+	2. grid
+	3. scroll
+
+### Utils
+	1. fonts
+	2. icons
+	3. media
+	4. mixins
+	5. vars
+	6. angular
+
+### Vendors
+	1. normalize
+
+## III. SETTINGS
+- Go to ```waw.scss``` and turn on/off imports scss files
+
+## IV. INFO
+1. atom - include atomic classes.
+2. common - include styles which appears on few pages.
+3. components - include independent blocks
+4. layout - include global layout settings
+5. pages - include style for specifically page
+6. utils - include utilities styles
+7. vendors - include imports resets, normalize, libs
+
+## V. HOW TO USE COMPONENTS
+- Go to ```scss/components/README.md``` - ready made html for components
+
+## VI. HOW TO USE CLASESS
+- Go to ```scss/Classes.md``` - ready made htnl classes
+
+## VII. HTML/SCSS RULES
+### We use BEM technology but changed a little for themselves (optional)
+#### a. HTML
+	1. block -> "header"
+	2. element -> "header__link"
+	3. modifier -> "_active"
+
+#### b. SCSS
+	1. block -> "header {}"
+	2. element -> "&__link {}"
+	3. modifier -> "&._active {}"
diff --git a/ngx-css/atom/display.scss b/ngx-css/atom/display.scss
@@ -0,0 +1,41 @@
+// ===== BLOCKS =====
+.d-b {
+	display: block !important;
+}
+.d-ib {
+	display: inline-block !important;
+}
+// ===== FLEXBOX =====
+.d-f {
+	display: flex !important;
+}
+.fd-c {
+	flex-direction: column !important;
+}
+.jc-sb {
+	justify-content: space-between !important;
+}
+.jc-fs {
+	justify-content: flex-start !important;
+}
+.jc-c {
+	justify-content: center !important;
+}
+.jc-fe {
+	justify-content: flex-end !important;
+}
+.ai-c {
+	align-items: center !important;
+}
+.ai-fe {
+	align-items: flex-end !important;
+}
+.ai-fs {
+	align-items: flex-start !important;
+}
+.ai-sb {
+	align-items: space-between !important;
+}
+.fg-1 {
+	flex-grow: 1 !important;
+}
diff --git a/ngx-css/atom/margin.scss b/ngx-css/atom/margin.scss
@@ -0,0 +1,52 @@
+
+// ===== ADD NEEDED SIZED SEPARETED BY SPACE: $margin-px: 0 10 20 30; =====
+$margin-px: 0;
+$margin-x-px: 0;
+$margin-y-px: 0;
+$margin-top-px: 0 10;
+$margin-bottom-px: 0 15;
+$margin-left-px: 0;
+$margin-right-px: 0;
+
+// ===== GENERATORS =====
+@mixin margin {
+    @each $i in $margin-px {
+        .m#{$i} {
+            margin: #{$i}px !important;
+        }
+    }
+    @each $i in $margin-x-px {
+        .mx#{$i} {
+            margin-left: #{$i}px !important;
+            margin-right: #{$i}px !important;
+        }
+    }
+    @each $i in $margin-y-px {
+        .my#{$i} {
+            margin-top: #{$i}px !important;
+            margin-bottom: #{$i}px !important;
+        }
+    }
+    @each $i in $margin-top-px {
+        .mt#{$i} {
+            margin-top: #{$i}px !important;
+        }
+    }
+    @each $i in $margin-bottom-px {
+        .mb#{$i} {
+            margin-bottom: #{$i}px !important;
+        }
+    }
+    @each $i in $margin-left-px {
+        .ml#{$i} {
+            margin-left: #{$i}px !important;
+        }
+    }
+    @each $i in $margin-right-px {
+        .mr#{$i} {
+            margin-right: #{$i}px !important;
+        }
+    }
+}
+
+@include margin;
diff --git a/ngx-css/atom/other.scss b/ngx-css/atom/other.scss
@@ -0,0 +1,4 @@
+// =====  POSITION =====
+.pos-rel {
+	position: relative !important;
+}
diff --git a/ngx-css/atom/padding.scss b/ngx-css/atom/padding.scss
@@ -0,0 +1,51 @@
+// =====  ADD NEEDED SIZED SEPARETED BY SPACE: $padding-px: 0 10 20 30; ===== 
+$padding-px: 0;
+$padding-x-px: 0;
+$padding-y-px: 0;
+$padding-top-px: 0;
+$padding-bottom-px: 0;
+$padding-left-px: 0;
+$padding-right-px: 0;
+
+/* Generators */
+@mixin padding {
+    @each $i in $padding-px {
+        .p#{$i} {
+            padding: #{$i}px !important;
+        }
+    }
+    @each $i in $padding-x-px {
+        .px#{$i} {
+            padding-left: #{$i}px !important;
+            padding-right: #{$i}px !important;
+        }
+    }
+    @each $i in $padding-y-px {
+        .py#{$i} {
+            padding-top: #{$i}px !important;
+            padding-bottom: #{$i}px !important;
+        }
+    }
+    @each $i in $padding-top-px {
+        .pt#{$i} {
+            padding-top: #{$i}px !important;
+        }
+    }
+    @each $i in $padding-bottom-px {
+        .pb#{$i} {
+            padding-bottom: #{$i}px !important;
+        }
+    }
+    @each $i in $padding-right-px {
+        .pr#{$i} {
+            padding-right: #{$i}px !important;
+        }
+    }
+    @each $i in $padding-left-px {
+        .pl#{$i} {
+            padding-left: #{$i}px !important;
+        }
+    }
+}
+
+@include padding;
diff --git a/ngx-css/atom/size.scss b/ngx-css/atom/size.scss
@@ -0,0 +1,9 @@
+// ===== WIDTH ===== 
+.w100p {
+	width: 100% !important;
+}
+
+// ===== HEIGHT ===== 
+.h100p {
+	height: 100%;
+}
diff --git a/ngx-css/atom/text.scss b/ngx-css/atom/text.scss
@@ -0,0 +1,34 @@
+// ===== TEXT ALIGN ===== 
+.ta-l {
+	text-align: left !important;
+}
+.ta-c {
+	text-align: center !important;
+}
+.ta-r {
+	text-align: right !important;
+}
+// ===== WHITE SPACE ===== 
+.ws-nw {
+	white-space: nowrap !important;
+}
+.ws-pl {
+	white-space: pre-line !important;
+}
+.ws-n {
+	white-space: normal !important;
+}
+// ===== FONT WEIGHT ===== 
+.fw400 {
+	font-weight: 400 !important;
+}
+.fw500 {
+	font-weight: 500 !important;
+}
+.fw700 {
+	font-weight: 700 !important;
+}
+// ===== TEXT TRANSFORM ===== 
+.tt-u {
+	text-transform: uppercase !important;
+}