diff --git a/ngx-css/Classes.md b/ngx-css/Classes.md new file mode 100644 index 00000000..1e90d5ce --- /dev/null +++ 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 + edit // We can use material icons in these formats diff --git a/ngx-css/Readme.md b/ngx-css/Readme.md new file mode 100644 index 00000000..034fd800 --- /dev/null +++ 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 new file mode 100644 index 00000000..7a00984c --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/ngx-css/atom/margin.scss b/ngx-css/atom/margin.scss new file mode 100644 index 00000000..55eb83a4 --- /dev/null +++ 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 new file mode 100644 index 00000000..13752c9a --- /dev/null +++ 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 new file mode 100644 index 00000000..1bc6ca96 --- /dev/null +++ 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 new file mode 100644 index 00000000..c592643d --- /dev/null +++ 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 new file mode 100644 index 00000000..9597d929 --- /dev/null +++ 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; +} diff --git a/ngx-css/components/Readme.md b/ngx-css/components/Readme.md new file mode 100644 index 00000000..4ef4e18c --- /dev/null +++ b/ngx-css/components/Readme.md @@ -0,0 +1,118 @@ + + +1. ==== button ==== +``` + + + +``` + +2. ==== input ==== +``` + +``` + +3. ==== select ==== +``` + +``` + +4. ==== textarea ==== +``` + +``` + +5. ==== switch ==== +``` + +``` + +6. ==== checkbox ==== +``` + +``` + + +``` + + + + + +``` + +7. ==== radio ==== +``` + +``` + +8. ==== table ==== +``` +
+ + + + + + + + + + + + + + + + + + + + + + + +
ClientsAddressEmailPhoneadditional phoneGenderDate of birth
Ivan PetrnekoStreet of Blue Flowers 23korsun_anna@gmail.com(201) 555-0124(201) 555-0124Woman2.05.1978
+
+``` + + +9. ==== card ==== +``` +
+ +
+ +
+
+
+ +``` diff --git a/ngx-css/components/_w-alert.scss b/ngx-css/components/_w-alert.scss new file mode 100644 index 00000000..a6ffbb25 --- /dev/null +++ b/ngx-css/components/_w-alert.scss @@ -0,0 +1,546 @@ +@keyframes iziT-bounceInUp { + 0% { + opacity: 0; + transform: translateY(200px); + } + 50% { + opacity: 1; + transform: translateY(-10px); + } + 70% { + transform: translateY(5px); + } + to { + transform: translateY(0); + } +} +@keyframes iziT-fadeIn { + 0% { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes iziT-fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes iziT-fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes iziT-bounceInLeft { + 0% { + opacity: 0; + transform: translateX(280px); + } + 50% { + opacity: 1; + transform: translateX(-20px); + } + 70% { + transform: translateX(10px); + } + to { + transform: translateX(0); + } +} +@keyframes iziT-bounceInDown { + 0% { + opacity: 0; + transform: translateY(-200px); + } + 50% { + opacity: 1; + transform: translateY(10px); + } + 70% { + transform: translateY(-5px); + } + to { + transform: translateY(0); + } +} +.alert-wrapper { + position: fixed; + bottom: 50px; + left: 0; + width: 100%; + height: 60px; + overflow: hidden; +} + +.alert { + display: flex; + -webkit-box-align: center; + align-items: center; + width: auto; + background: #3aed92; + color: #fff; + max-width: 700px; + margin: 0 auto; + transform: translateY(300px) scale(0); + transition: .3s all ease-in-out; + + &._show { + transform: translateY(0) scale(1); + transition: .3s all ease-in-out; + } +} + +.alert-icon { + min-width: 60px; + min-height: 60px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: #2bd17d; + + &:before { + content: ""; + position: absolute; + width: 25px; + height: 25px; + border-radius: 50%; + border: 2px solid #fff; + } + + &:after { + content: ""; + position: absolute; + top: 22px; + width: 7px; + height: 11px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } +} + +.alert-text { + padding: 0px 20px; + + word-break: break-all; + overflow: auto; + height: 60px; + + .text-block { + width: 99%; + + &__text { + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + } + } +} + +.alert-close { + min-width: 50px; + + margin-left: auto; + font-size: 25px; + display: flex; + justify-content: center; + align-items: center; +} + + +.font-bold { + font-weight: bold; +} + +.waw-alert__progress { + bottom: 0px; + position: absolute; + width: 100%; + margin-bottom: 0; + border-radius: 50px; + + &:hover { + span { + animation-play-state: paused; + } + + } + + + span { + display: block; + width: 100%; + height: 2px; + background-color: #a5a5a5ed; + animation-name: waw-alert-progress; + animation-duration: 10s; + border-radius: 50px; + + &._red { + background-color: rgba(255, 175, 180, 1); + } + + &._green { + background-color: rgba(166, 239, 184, 1); + } + + &._yellow { + background-color: rgba(255, 249, 178, 1); + } + + &._orange { + background-color: rgba(255, 207, 165, 1); + } + + &._blue { + background-color: rgba(255, 207, 165, 1); + } + + &._white { + background-color: white; + } + + &._black { + background-color: black; + } + } +} + +.waw-alert:hover { + .waw-alert__progress>span { + animation-play-state: paused; + } +} + +.waw-alert__close { + width: 15px; + height: 15px; + opacity: 0.3; + position: relative; + order: 2; + + &:hover { + opacity: 1; + + } + + &::before, + &::after { + cursor: pointer; + position: absolute; + left: 15px; + content: ' '; + height: 12px; + width: 2px; + background-color: #47525d; + } + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } +} + +@keyframes waw-alert-progress { + from { + width: 100%; + } + + to { + width: 0%; + } +} + +.waw-alert-container { + font-size: 0; + height: 100px; + width: 100%; + transform: translateZ(0); + backface-visibility: hidden; + // transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: .3s all ease-in-out; + // transform: scale(1); + opacity: 1; + + + &._close { + // transform: scale(0); + opacity: 0; + transition: .3s all ease-in-out; + + } +} + +.waw-alert { + display: inline-block; + clear: both; + position: relative; + font-family: 'Lato', Tahoma, Arial; + font-size: 14px; + padding: 8px 25px 9px 0; + background: rgba(238, 238, 238, 0.9); + border-color: rgba(238, 238, 238, 0.9); + width: 100%; + pointer-events: all; + cursor: default; + transform: translateX(0); + -webkit-touch-callout: none + /* iOS Safari */ + ; + -webkit-user-select: none + /* Chrome/Safari/Opera */ + ; + -khtml-user-select: none + /* Konqueror */ + ; + -moz-user-select: none + /* Firefox */ + ; + -ms-user-select: none + /* Internet Explorer/Edge */ + ; + user-select: none; + min-height: 54px; +} + +.waw-alert>.waw-alert-progressbar { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + z-index: 1; + background: rgba(255, 255, 255, 0.2); +} + +.waw-alert>.waw-alert-progressbar>div { + height: 2px; + width: 100%; + background: rgba(0, 0, 0, 0.3); + border-radius: 0 0 3px 3px; +} + +.waw-alert>.waw-alert-close { + position: absolute; + right: 0; + top: 0; + border: 0; + padding: 0; + opacity: 0.6; + width: 42px; + height: 100%; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAJPAAACTwBcGfW0QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAD3SURBVFiF1ZdtDoMgDEBfdi4PwAX8vLFn0qT7wxantojKupmQmCi8R4tSACpgjC2ICCUbEBa8ingjsU1AXRBeR8aLN64FiknswN8CYefBBDQ3whuFESy7WyQMeC0ipEI0A+0FeBvHUFN8xPaUhAH/iKoWsnXHGegy4J0yxialOfaHJAz4bhRzQzgDvdGnz4GbAonZbCQMuBm1K/kcFu8Mp1N2cFFpsxsMuJqqbIGExGl4loARajU1twskJLLhIsID7+tvUoDnIjTg5T9DPH9EBrz8rxjPzciAl9+O8SxI8CzJ8CxKFfh3ynK8Dyb8wNHM/XDqejx/AtNyPO87tNybAAAAAElFTkSuQmCC") no-repeat 50% 50%; + background-size: 8px; + cursor: pointer; + outline: none; +} + +.waw-alert>.waw-alert-close:hover { + opacity: 1; +} + +.waw-alert>.waw-alert-body { + position: relative; + padding: 0 0 0 10px; + height: auto; + min-height: 36px; + margin: 0 0 0 15px; + text-align: left; + display: flex; + justify-content: space-between; + align-items: center; +} + +.waw-alert>.waw-alert-body:after { + content: ""; + display: table; + clear: both; +} + +.waw-alert>.waw-alert-body .waw-alert-texts { + margin: 10px 0 0 0; + padding-right: 2px; + display: inline-block; + float: left; + display: flex; + justify-content: space-between; + align-items: center; +} + +.waw-alert>.waw-alert-body .waw-alert-icon { + height: 100%; + position: absolute; + left: 0; + top: 50%; + display: table; + font-size: 23px; + line-height: 24px; + margin-top: -12px; + color: #000; + width: 24px; + height: 24px; +} + +.waw-alert>.waw-alert-body .waw-alert-title { + padding: 0; + margin: 0; + line-height: 16px; + font-size: 14px; + text-align: left; + float: left; + color: #000; + white-space: normal; + margin-right: 10px; + font-weight: bold; +} + +.waw-alert>.waw-alert-body .waw-alert-message { + padding: 0; + // margin: 0 0 10px 0; + font-size: 14px; + line-height: 16px; + text-align: left; + float: left; + color: rgba(0, 0, 0, 0.6); + white-space: normal; +} + +@media only screen and (min-width: 568px) { + .waw-alert-wrapper { + padding: 10px 15px; + } + + .waw-alert { + margin: 5px; + border-radius: 3px; + width: auto; + } + + .waw-alert:after { + content: ''; + z-index: -1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 3px; + box-shadow: inset 0 -10px 20px -10px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1), 0 8px 8px -5px rgba(0, 0, 0, 0.25); + } + + .waw-alert:not(.waw-alert-rtl) .waw-alert-cover { + border-radius: 3px 0 0 3px; + } + + .waw-alert.waw-alert-rtl .waw-alert-cover { + border-radius: 0 3px 3px 0; + } + + .waw-alert.waw-alert-color-dark:after { + box-shadow: inset 0 -10px 20px -10px rgba(255, 255, 255, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.25); + } + + .waw-alert.waw-alert-balloon .waw-alert-progressbar { + background: transparent; + } + + .waw-alert.waw-alert-balloon:after { + box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25), inset 0 10px 20px -5px rgba(0, 0, 0, 0.25); + } + + .waw-alert-target .waw-alert:after { + box-shadow: inset 0 -10px 20px -10px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1); + } +} + +.waw-alert.waw-alert-theme-dark { + background: #565c70; + border-color: #565c70; +} + +.waw-alert.waw-alert-theme-dark .waw-alert-title { + color: #fff; +} + +.waw-alert.waw-alert-theme-dark .waw-alert-message { + color: rgba(255, 255, 255, 0.7); + font-weight: 300; +} + +.waw-alert.waw-alert-theme-dark .waw-alert-icon { + color: #fff; +} + +.waw-alert.waw-alert-color-red { + background: rgba(255, 175, 180, 0.9); + border-color: rgba(255, 175, 180, 0.9); +} + +.waw-alert.waw-alert-color-orange { + background: rgba(255, 207, 165, 0.9); + border-color: rgba(255, 207, 165, 0.9); +} + +.waw-alert.waw-alert-color-yellow { + background: rgba(255, 249, 178, 0.9); + border-color: rgba(255, 249, 178, 0.9); +} + +.waw-alert.waw-alert-color-blue { + background: rgba(157, 222, 255, 0.9); + border-color: rgba(157, 222, 255, 0.9); +} + +.waw-alert.waw-alert-color-green { + background: rgba(166, 239, 184, 0.9); + border-color: rgba(166, 239, 184, 0.9); +} + +.waw-alert.slideIn, +.waw-alert .slideIn { + -webkit-animation: iziT-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; + -moz-animation: iziT-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; + animation: iziT-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; +} + +.waw-alert.bounceInLeft { + -webkit-animation: iziT-bounceInLeft 0.7s ease-in-out both; + animation: iziT-bounceInLeft 0.7s ease-in-out both; +} + +.waw-alert.bounceInRight { + -webkit-animation: iziT-bounceInRight 0.85s ease-in-out both; + animation: iziT-bounceInRight 0.85s ease-in-out both; +} + +.waw-alert.bounceInDown { + -webkit-animation: iziT-bounceInDown 0.7s ease-in-out both; + animation: iziT-bounceInDown 0.7s ease-in-out both; +} + +.waw-alert.bounceInUp { + -webkit-animation: iziT-bounceInUp 0.7s ease-in-out both; + animation: iziT-bounceInUp 0.7s ease-in-out both; +} + +.height { + height: auto !important; +} diff --git a/ngx-css/components/_w-btn.scss b/ngx-css/components/_w-btn.scss new file mode 100644 index 00000000..340a2223 --- /dev/null +++ b/ngx-css/components/_w-btn.scss @@ -0,0 +1,70 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + +.w-btn { + font-size: var(--fs); + font-weight: 500; + font-family: var(--ff-base); + background-color: var(--c-primary); + border-radius: var(--b-radius-btn); + transition: var(--transition); + color: var(--c-white); + position: relative; + padding: 11px 25px; + line-height: 19px; + text-align: center; + white-space: nowrap; + display: inline-flex; + justify-content: center; + align-items: center; + user-select: none; + text-align: center; + width: 100%; + border: none; + cursor: pointer; + transition: all .3s; + border-radius: 4px; + &._primary { + background-color: var(--c-primary); + + &:hover { + background-color: var(--c-primary-hover); + } + } + + &._second { + border: 1px solid #256eff; + background-color: var(--c-white); + color: #256eff; + } + + &._danger { + background-color: var(--c-secondary); + color: white; + + &:hover { + background: var(--c-secondary-hover); + } + } + + &._link { + background: transparent; + color: var(--c-text-primary); + font-size: 14px; + font-weight: 400; + + &:hover { + color: var(--c-text-secondary); + } + } + + &:disabled { + background-color: var(--c-grey-dark); + cursor: default; + + &:hover { + background-color: var(--c-grey-dark); + } + } +} diff --git a/ngx-css/components/_w-card.scss b/ngx-css/components/_w-card.scss new file mode 100644 index 00000000..5e810ba8 --- /dev/null +++ b/ngx-css/components/_w-card.scss @@ -0,0 +1,50 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + + +.w-card { + display: flex; + flex-direction: column; + background-color: var(--c-bg-secondary); + border-radius: var(--card-border-radius, 8px); + box-shadow: var(--card-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1)); + overflow: hidden; + margin-bottom: var(--card-margin-bottom, 20px); + + &__header { + padding: var(--card-header-padding, 16px); + border-bottom: var(--card-border-width, 1px) solid + var(--card-border-color, #eaeaea); + //background-color: var(--card-header-background, #f5f5f5); + flex-shrink: 0; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__body { + padding: var(--card-body-padding, 16px); + flex-grow: 1; + display: flex; + flex-direction: column; + + &-section { + padding: var(--card-section-padding, 8px 0); + border-bottom: var(--card-border-width, 1px) solid + var(--card-border-color, #eaeaea); + + &:last-child { + border-bottom: none; + } + } + } + + &__footer { + padding: var(--card-footer-padding, 16px); + border-top: var(--card-border-width, 1px) solid + var(--card-border-color, #eaeaea); + background-color: var(--card-footer-background, #f5f5f5); + flex-shrink: 0; + } +} diff --git a/ngx-css/components/_w-checkbox.scss b/ngx-css/components/_w-checkbox.scss new file mode 100644 index 00000000..d0c53413 --- /dev/null +++ b/ngx-css/components/_w-checkbox.scss @@ -0,0 +1,83 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + +.w-checkbox { + &__body { + display: inline-flex; + user-select: none; + color: var(--c-text-primary); + cursor: pointer; + padding: 6px 8px; + border-radius: 6px; + overflow: hidden; + transition: vars.$transition; + &:not(:last-child) { + margin-right: 6px; + } + &:hover { + background: rgba(var(--c-primary), 0.09); + } + &:hover .w-checkbox__svg { + border-color: var(--c-primary); + } + @include media.bp-max(md) { + width: 100%; + margin-bottom: 4px; + display: inline-block; + } + } + &__input { + display: none; + &:checked+.w-checkbox__body .w-checkbox__svg { + background: var(--c-primary); + border-color: var(--c-primary); + animation: wave 0.4s ease; + } + &:checked+.w-checkbox__body .w-checkbox__svg svg { + stroke-dashoffset: 0; + } + } + &__svg { + position: relative; + width: 18px; + height: 18px; + display: inline-block; + border-radius: 4px; + transform: scale(1); + border: 1px solid var(--c-border); + transition: vars.$transition; + box-shadow: 0 1px 1px var(--c-shadow); + } + &__svg svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: #fff; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transition-delay: 0.1s; + transform: translate3d(0, 0, 0); + } + &__text { + padding-left: 8px; + line-height: 18px; + } + &__svg-icon { + position: absolute; + width: 0; + height: 0; + pointer-events: none; + user-select: none; + } +} +@keyframes wave { + 50% { + transform: scale(0.9); + } +} diff --git a/ngx-css/components/_w-forms.scss b/ngx-css/components/_w-forms.scss new file mode 100644 index 00000000..a9677ae1 --- /dev/null +++ b/ngx-css/components/_w-forms.scss @@ -0,0 +1,101 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; +// forms + +.form-container{ + margin-bottom: 15px; +} + +.w-forms { + position: relative; + + display: flex; + flex-direction: column; + width: 100%; + gap: 10px; + + &__title { + display: inline-block; + color: var(--c-text-primary); + // font-size: calc(#{$fs} - 4px); + font-size: 19px; + line-height: calc(#{vars.$fs} + 2px); + letter-spacing: vars.$letter-spacing; + // margin-bottom: 6px; + font-weight: 500; + margin-bottom: 15px; + } + &__component{ + label{ + padding: 0 !important; + } + .w-btn{ + //margin: 0 20px; + } + } + &__input, + &__textarea, + &__select { + height: 42px; + background-color: transparent; + border: 1px solid var(--c-border); + border-radius: vars.$b-radius; + color: var(--c-text-secondary); + font-size: calc(#{vars.$fs} - 2px); + line-height: calc(#{vars.$fs} + 4px); + transition: vars.$transition; + width: 100%; + display: block; + letter-spacing: vars.$letter-spacing; + padding: 10px; + + &::placeholder { + color: var(--c-placeholder); + transition: vars.$transition; + } + + &:focus { + transition: vars.$transition; + border-color: var(--c-primary); + } + + &:disabled { + background-color: vars.$c-grey; + border-color: vars.$c-grey; + color: vars.$c-grey; + cursor: default; + opacity: 0.6; + } + } + + &__input { + &[type='time'] { + display: block; + -webkit-appearance: textfield; + -moz-appearance: textfield; + } + } + + &__select { + appearance: none; + padding-right: 30px; + } + + &__chevron { + position: absolute; + top: 30px; + right: 12px; + + &::before { + color: var(--c-primary); + } + } + + &__textarea { + min-height: 80px; + resize: vertical; + max-height: 250px; + margin-top: 10px; + } +} diff --git a/ngx-css/components/_w-modal.scss b/ngx-css/components/_w-modal.scss new file mode 100644 index 00000000..2066319c --- /dev/null +++ b/ngx-css/components/_w-modal.scss @@ -0,0 +1,82 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + +#html .modal { + padding: 20px; + + &-content { + background: var(--c-bg-secondary); + border-radius: vars.$b-radius; + border: 1px solid var(--c-border); + max-width: 700px; + padding-top: 45px; + } + .close { + top: -2px; + right: 5px; + + font-size: 50px; + } + .close:hover { + color: var(--c-text-secondary); + } +} + + +#html body._modal-small .modal-content, +#html .forms_modal .modal-content { + max-width: 500px; + width: 100%; +} + +.modal { + position: fixed; /* Stay in place */ + z-index: 9999; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow-y: auto; /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + position: relative; + background-color: #fff; + margin: 15% auto; /* 15% from the top and centered */ + padding: 40px 20px 20px 20px; + border: 1px solid #888; + min-width: 20%; /* Could be more or less, depending on screen size */ + max-width: 80%; /* Could be more or less, depending on screen size */ + @media screen and (max-width: 767px) { + max-width: 100% !important; + } +} + +/* The Close Button */ +.close { + color: #aaa; + position: absolute; + right: 10px; + top: 10px; + font-size: 32px; + line-height: 1; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.big { + .modal-content { + margin-top: 5%!important; + margin-bottom: 0!important; + max-width: 100%!important; + } +} diff --git a/ngx-css/components/_w-radio.scss b/ngx-css/components/_w-radio.scss new file mode 100644 index 00000000..22b04e54 --- /dev/null +++ b/ngx-css/components/_w-radio.scss @@ -0,0 +1,52 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + +.w-radio { + position: relative; + display: flex; + align-items: center; + cursor: pointer; + line-height: 20px; + font-size: 16px; + margin: 5px 0; + &:hover &__label:after { + transform: scale(3.6); + } + &__label { + position: relative; + display: block; + float: left; + margin-right: 10px; + width: 20px; + height: 20px; + border: 2px solid var(--c-border); + border-radius: 100%; + min-width: 20px; + &:after { + content: ''; + position: absolute; + top: 3px; + left: 3px; + width: 10px; + height: 10px; + border-radius: 100%; + background: var(--c-primary); + transform: scale(0); + transition: vars.$transition; + opacity: 0.08; + pointer-events: none; + } + } + &__input { + display: none; + &:checked+.w-radio__label { + border-color: var(--c-primary); + &:after { + transform: scale(1); + transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9); + opacity: 1; + } + } + } +} diff --git a/ngx-css/components/_w-select.scss b/ngx-css/components/_w-select.scss new file mode 100644 index 00000000..c7348f0c --- /dev/null +++ b/ngx-css/components/_w-select.scss @@ -0,0 +1,236 @@ +:host { + display: block; +} + +// waw-select styles +.w-select { + width: 100%; + &__label { + margin-bottom: 5px; + } + &__body { + position: relative; + cursor: pointer; + display: flex; + min-height: 50px; + height: 50px; + align-items: center; + border: 2px solid var(--c-text-primary); + border-radius: 12px; + transition: var(--transition); + //background: var(--c-bg-secondary); + &._active { + border-color: var(--c-primary); + } + } + &__header { + padding-left: 15px; + display: flex; + align-items: center; + width: 100%; + overflow: hidden; + white-space: nowrap; + padding: 14px 10px 14px 40px; + position: relative; + svg { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + path{ + fill:var(--c-primary); + } + } + } + &__text { + margin-right: 10px; + flex-grow: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + .text-overflow { + overflow: hidden; + text-overflow: ellipsis; + word-break: keep-all; + color: var(--c-text-primary); + } + } + &__arrow { + margin-right: 15px; + transition: var(--transition); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + svg{ + width: 12px; + height: 12px; + path{ + fill: var(--c-text-primary); + } + } + &._active { + transform: rotate(180deg); + } + } + .item { + padding: 10px; + transition: var(--transition); + border-bottom: 1px solid var(--c-text-primary); + &:hover { + background: var(--c-shadow); + border-bottom: 1px solid var(--c-primary); + color: var(--c-primary); + } + } + &__popup { + z-index: 9; + width: 100%; + left: 0; + position: absolute; + top: calc(100% + 10px); + background: var(--c-white); + box-shadow: 0px 0px 4px var(--c-border); + border-radius: 10px; + border: 2px solid var(--c-primary); + background: var(--c-bg-secondary); + color: var(--c-text-primary); + padding-bottom: 15px; + padding-top: 15px; + &._search { + padding-top: 60px; + } + .popup-block { + max-height: 180px; + overflow-y: auto; + padding: 0 15px; + margin-right: 10px; + &__empty-search { + padding: 15px; + text-align: center; + color: var(--c-text-primary); + } + } + } + &__search { + top: 10px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + left: 0; + padding: 0 15px; + .search-input { + outline: none; + width: 100%; + cursor: pointer; + display: flex; + padding: 10px; + padding-right: 30px; + align-items: center; + border: 1px solid var(--c-border); + border-radius: 10px; + transition: var(--transition); + } + .search-icon { + position: absolute; + top: 50%; + right: 25px; + transform: translateY(-50%); + } + } + // scroll styles + *::-webkit-scrollbar { + width: 5px; + height: 5px; + background-color: var(--c-white); + } + * ::-webkit-scrollbar-thumb { + border-radius: 0; + background-color: var(--c-border); + } + + // checkbox styles + .checkbox { + &__body { + display: inline-flex; + user-select: none; + cursor: pointer; + padding: 6px 8px; + color: var(--c-text); + border-radius: 6px; + overflow: hidden; + transition: var(--transition); + &:not(:last-child) { + margin-right: 6px; + } + &:hover { + background: rgba(var(--c-sky), 0.09); + } + &:hover .checkbox__svg { + border-color: var(--c-sky); + } + } + &__input { + display: none; + &:checked + .checkbox__body .checkbox__svg { + background: var(--c-sky); + border-color: var(--c-sky); + animation: wave 0.4s ease; + } + &:checked + .checkbox__body .checkbox__svg svg { + stroke-dashoffset: 0; + } + } + &__svg { + position: relative; + min-width: 18px; + min-height: 18px; + width: 18px; + height: 18px; + display: inline-block; + border-radius: 4px; + transform: scale(1); + border: 1px solid var(--c-border); + transition: var(--transition); + box-shadow: 0 1px 1px var(--c-shadow); + } + &__svg svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: var(--c-white); + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transition-delay: 0.1s; + transform: translate3d(0, 0, 0); + } + &__text { + padding-left: 8px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + } + &__svg-icon { + position: absolute; + width: 0; + height: 0; + pointer-events: none; + user-select: none; + } + @keyframes wave { + 50% { + transform: scale(0.9); + } + } + } +} +.selected { + font-weight: bold; +} \ No newline at end of file diff --git a/ngx-css/components/_w-switch.scss b/ngx-css/components/_w-switch.scss new file mode 100644 index 00000000..9cf56792 --- /dev/null +++ b/ngx-css/components/_w-switch.scss @@ -0,0 +1,61 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + +// SWITCH +.w-switch { + display: flex; + align-items: center; + cursor: pointer; + &__toggle { + position: relative; + width: 45px; + height: 25px; + } + &__input { + display: none; + &:checked+.w-switch__slider { + background-color: var(--c-primary); + border: 1px solid var(--c-primary); + } + &:focus+.w-switch__slider { + box-shadow: 0 0 1px var(--c-shadow); + } + &:checked+.w-switch__slider:before { + transform: translate(15px, -50%); + background-color: vars.$c-white; + } + } + &__slider { + position: absolute; + inset: 0; + background-color: vars.$c-grey; + border: 1px solid var(--c-border); + outline: none; + transition: vars.$transition; + &:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 6px; + top: 50%; + transform: translateY(-50%); + background-color: vars.$c-white; + transition: vars.$transition; + } + &._round { + border-radius: 34px; + &:before { + border-radius: 50%; + } + } + } + &__text { + margin-left: 10px; + font-size: calc(#{vars.$fs} - 2px); + line-height: calc(#{vars.$fs} - 2px); + letter-spacing: vars.$letter-spacing; + color: var(--c-text); + } +} diff --git a/ngx-css/components/_w-table.scss b/ngx-css/components/_w-table.scss new file mode 100644 index 00000000..00f983e6 --- /dev/null +++ b/ngx-css/components/_w-table.scss @@ -0,0 +1,530 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; + +.user{ + &__icons{ + display: flex; + flex-flow: row wrap; + justify-content: right; + wbutton{ + margin-left: 10px; + @media screen and (max-width: 599px) { + margin-left: 5px; + } + } + } +} +.users__header { + padding: 10px; +} +.edit-header{ + height: 45px; + @media screen and (max-width: 599px) { + height: 38px; + } + .edit, .playlist{ + width: 45px; + height: 45px; + } + + @media screen and (max-width: 599px) { + .material-icons{ + font-size: 21px; + } + + width: 38px ; + .playlist, .edit{ + width: 38px ; + height: 38px; + padding: 10px; + } + } + +} +.wtable { + background: var(--c-bg-secondary); + box-shadow: var(--c-shadow); + border-radius: 10px; + padding-bottom: 70px; + max-width: 100%; + height: auto; + margin: 0px auto; + position: relative; + + @media (max-width: 991px) { + padding-left: 10px; + padding-right: 10px; + } + + @media screen and (max-width: 599px) { + padding-bottom: 50px; + } + + .table { + border-collapse: collapse; + margin: 0; + padding: 0; + width: 100%; + table-layout: auto; + + &-plus-btn { + cursor: pointer; + font-size: 16px; + font-weight: 500; + border: 0; + display: flex; + justify-content: center; + align-items: center; + min-width: 140px; + height: 45px; + border-radius: 4px; + padding: 5px 12px; + background-color: var(--c-primary); + color: var(--c-white); + border: 1px solid var(--c-primary); + button{ + width: unset !important; + @media screen and (max-width: 599px) { + width: 38px !important; + } + } + + .playlist, .edit{ + width: 45px; + min-width: 45px; + } + &:hover { + box-shadow: 0 0 3px 0px var(--c-primary); + background-color: var(--c-primary); + //color: var(--c-bg-secondary); + } + span { + margin-left: 5px; + @media screen and (max-width: 599px) { + display: none; + } + } + @media screen and (max-width: 599px) { + //position: absolute; + right: 0; + min-width: auto; + font-size: 24px; + width: 38px !important; + height: 38px; + } + } + + // search + &-search { + position: relative; + display: flex; + flex-grow: 1; + margin: 0 30px; + &--active { + .table-search__input { + opacity: 1; + } + } + + &__input { + width: 100%; + height: 45px; + border-radius: 4px; + padding: 0 10px; + color: inherit; + background: var(--c-bg-secondary); + border: 1px solid var(--c-primary); + + &:focus { + border: 2px solid var(--c-primary); + } + } + + &__icon { + width: 40px; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + z-index: 4; + cursor: pointer; + } + + &__icon-mobile { + display: none; + margin-left: auto; + margin-right: 130px; + } + + @media (max-width: 599px) { + display: none; + + &.table-search--active { + display: block; + position: absolute; + margin: 0; + width: 100%; + z-index: 2; + } + + &.table-search--active + .table-plus-btn { + display: none; + } + + &.table-search--active + .w-forms__title { + display: none; + } + + &__icon-mobile { + display: none; + } + } + } + + .table-header__sort { + position: relative; + cursor: pointer; + .icon-arrow { + transform: rotate(90deg); + font-size: var(--fs); + position: absolute; + top: 3px; + cursor: pointer; + } + } + + th { + position: relative; + padding: 0 16px; + height: 48px; + text-align: left; + font-weight: 500; + font-size: calc(var(--fs) - 2px); + font-size: var(--fs); + line-height: calc(var(--fs) + 8px); + letter-spacing: var(--letter-spacing); + text-transform: capitalize; + color: var(--c-text-primary); + border-bottom: 1px solid var(--c-border); + overflow: hidden; + text-overflow: ellipsis; + .icon-arrow { + opacity: 0; + transition: 0.3s all ease-in-out; + } + &:hover { + .icon-arrow { + opacity: 1; + transition: 0.3s all ease-in-out; + } + } + .table-header__sort._sortActiveDown { + .icon-arrow { + transform: rotate(-90deg); + opacity: 1; + } + } + .table-header__sort._sortActiveUp { + .icon-arrow { + opacity: 1; + } + } + @media all and (max-width: 991.9px) { + display: none; + text-align: left; + } + &:last-child { + width: 140px; + } + } + + td { + cursor: pointer; + padding: 5px 16px; + height: 60px; + text-align: left; + vertical-align: middle; + font-size: calc(var(--fs) - 2px); + line-height: calc(var(--fs) + 8px); + letter-spacing: var(--letter-spacing); + color: var(--c-text-primary); + word-break: break-word; + display: table-cell; + border-bottom: 1px solid var(--c-border); + @media all and (max-width: 991.9px) { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: 5px; + border-bottom: 0; + border: 2px solid var(--c-border); + height: auto; + min-height: 60px; + } + &:before { + content: attr(data-label); + word-break: keep-all; + display: inline-block; + font-weight: 500; + font-size: var(--fs); + line-height: calc(var(--fs) + 8px); + letter-spacing: var(--letter-spacing); + text-transform: capitalize; + color: var(--c-text-primary); + text-overflow: ellipsis; + @media (min-width: 992px) { + display: none; + } + } + } + + tr { + &:last-child { + td { + border-bottom: none; + @media (max-width: 991.9px) { + border-bottom: 2px solid var(--c-border); + } + } + } + td { + &:last-child { + border-right: none; + @media (max-width: 992px) { + border-right: 2px solid var(--c-border); + } + } + &:first-child { + @media (max-width: 992px) { + margin-top: 20px; + } + } + } + th { + &:last-child { + border-right: none; + } + } + } + + .table__actions { + display: flex; + gap: 6px; + + a { + i { + color: var(--c-text-primary); + } + } + } + + .table-body { + &__last-td { + @media (max-width: 991.9px) { + margin-bottom: 20px; + border-bottom: 3px solid var(--c-border); + } + + i { + font-size: 22px; + width: 22px; + &:hover { + color: var(--c-primary); + } + } + } + } + + &-footer { + height: 65px; + display: flex; + gap: 120px; + position: absolute; + width: 100%; + left: 0; + bottom: 0; + padding: 0 8px 0 15px; + align-items: center; + justify-content: space-between; + @media screen and (max-width: 599px) { + height: 90px; + padding: 10px 20px; + flex-direction: column; + position: static; + gap: 20px; + } + + &__pagination { + display: flex; + align-items: center; + position: relative; + bottom: 15px; + + @media (max-width: 599px) { + bottom: 0; + left: 5px; + } + } + + &__arrow { + border: 0; + background: none; + width: 30px; + height: 30px; + margin-right: 30px; + cursor: pointer; + + .chevron { + position: relative; + display: block; + min-width: 22px; + min-height: 22px; + border: 2px solid transparent; + border-radius: 100px; + &::before { + position: absolute; + width: 2px; + height: 90%; + background-color: var(--c-grey); + mix-blend-mode: overlay; + top: 8%; + } + &::after { + content: ''; + display: block; + box-sizing: border-box; + position: absolute; + width: 10px; + height: 10px; + border-bottom: 2px solid var(--c-grey); + border-right: 2px solid var(--c-grey); + mix-blend-mode: overlay; + transform: rotate(135deg); + left: 2px; + top: 2px; + } + } + + &:disabled { + i::after { + border-color: #9f9f9f; + } + i::before { + background: #9f9f9f; + } + } + + &._start { + .chevron { + position: relative; + left: 1px; + } + + .chevron::after { + left: 8px; + top: 4px; + } + .chevron::before { + display: block; + left: 2px; + content: ''; + } + } + &._left { + .chevron { + position: relative; + left: 4px; + } + + .chevron::after { + top: 4px; + } + } + &._right { + .chevron::after { + transform: rotate(315deg); + top: 4px; + } + } + &._end { + .chevron { + position: relative; + left: 2px; + } + + .chevron::after { + left: -3px; + top: 4px; + transform: rotate(315deg); + } + .chevron::before { + display: block; + left: 11px; + content: ''; + } + } + } + + .item-page { + font-size: 12px; + color: #9f9f9f; + letter-spacing: 1px; + display: flex; + align-items: center; + + &__dropdown { + position: relative; + margin: 0 10px; + font-weight: bold; + .caption { + background-color: transparent; + padding: 11px 24px; + border-radius: 4px; + border: 1px solid var(--c-border); + cursor: pointer; + &:hover { + background-color: var(--c-primary); + color: var(--c-bg-secondary); + } + } + .list { + position: absolute; + background-color: var(--c-bg-secondary); + width: 100%; + bottom: 100%; + flex-direction: column; + border-radius: 4px 4px 0 0; + display: none; + z-index: 999; + .item { + > div { + padding: 11px 20px; + cursor: pointer; + text-align: center; + } + &:hover { + background-color: var(--c-primary); + color: var(--c-bg-secondary); + } + } + .item.selected { + font-weight: bold; + } + } + &.open { + .caption { + border-radius: 0 0 4px 4px; + } + .list { + display: flex; + flex-direction: column-reverse; + border: 1px solid var(--c-border); + border-bottom: 0; + } + } + } + } + } + } +} diff --git a/ngx-css/index.scss b/ngx-css/index.scss new file mode 100644 index 00000000..c71fa5dd --- /dev/null +++ b/ngx-css/index.scss @@ -0,0 +1,37 @@ +// src/scss/index.scss +// ===== MAIN SCSS FILE ===== + +// ## VENDORS +@use 'vendors/normalize'; + +// ## UTILS +@use 'utils/vars' as vars; +@use 'utils/media' as media; +@use 'utils/mixins' as mixins; +@use 'utils/fonts'; +@use 'utils/icons'; + +// ## LAYOUT +@use 'layout/base'; +@use 'layout/scroll'; +// @use 'layout/grid'; + +// ## COMPONENTS +@use 'components/w-alert'; +@use 'components/w-btn'; +@use 'components/w-switch'; +@use 'components/w-forms'; +@use 'components/w-card'; +@use 'components/w-checkbox'; +@use 'components/w-radio'; +@use 'components/w-table'; +@use 'components/w-select'; +@use 'components/w-modal'; + +// ## ATOM +@use 'atom/display'; +@use 'atom/margin'; +// @use 'atom/padding'; +// @use 'atom/size'; +// @use 'atom/text'; +// @use 'atom/other'; \ No newline at end of file diff --git a/ngx-css/layout/_base.scss b/ngx-css/layout/_base.scss new file mode 100644 index 00000000..0d89cdca --- /dev/null +++ b/ngx-css/layout/_base.scss @@ -0,0 +1,38 @@ +// ===== BASE STYLE ===== +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; +html { + font-size: vars.$fs; + overflow: hidden; + height: 100%; +} +body { + font-family: vars.$ff-base; + color: var(--c-text-primary); + line-height: 1.4; + position: relative; + overflow: hidden; + height: 100%; + display: flex; + flex-direction: column; +} +/* === PAGE LAYOUT === */ +.container { + margin-left: auto; + margin-right: auto; + padding: vars.$padding; + max-width: 100%; + width: 100%; +} +.container-box{ + display: flex; + align-items: center; + .w-input__checkbox{ + margin-right: 5px; + } +} + +.showTable{ + padding: 20px 20px 0 20px !important; +} \ No newline at end of file diff --git a/ngx-css/layout/_grid.scss b/ngx-css/layout/_grid.scss new file mode 100644 index 00000000..42f124ce --- /dev/null +++ b/ngx-css/layout/_grid.scss @@ -0,0 +1,58 @@ +// ===== GRID SETTINGS ===== +.row { + display: flex; + flex-wrap: wrap; + width: calc(100% + 20px); + margin-left: -10px; +} +.col-5 { + width: 20%; + padding: 0 10px 10px; + @include bp-max(sm) { + width: 100%; + } +} +.col-4 { + width: 25%; + padding: 0 10px 10px; + @include bp-max(sm) { + width: 100%; + } +} +.col-3 { + width: 33.33%; + padding: 0 10px 10px; + @include bp-max(sm) { + width: 100%; + } +} +.col-25 { + width: 40%; + padding: 0 10px 10px; + @include bp-max(sm) { + width: 100%; + } +} +.col-2 { + width: 50%; + padding: 0 10px 10px; + @include bp-max(sm) { + width: 100%; + } +} +.col-2m { + width: 50%; + padding: 0 10px 10px; +} +.col-23 { + width: 66.66%; + padding: 0 10px 10px; + + @include bp-max(sm) { + width: 100%; + } +} +.col-1 { + width: 100%; + padding: 0 10px 10px; +} diff --git a/ngx-css/layout/_scroll.scss b/ngx-css/layout/_scroll.scss new file mode 100644 index 00000000..0015a056 --- /dev/null +++ b/ngx-css/layout/_scroll.scss @@ -0,0 +1,18 @@ +@use 'src/scss/utils/mixins' as mixins; +@use 'src/scss/utils/media' as media; +@use 'src/scss/utils/vars' as vars; +// ===== SCROLL CUSTOMIZE ===== +*::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px var(--c-shadow); + background-color: vars.$c-white; + display: none; +} +*::-webkit-scrollbar { + width: 5px; + height: 5px; + background-color: vars.$c-white; +} +* ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 6px var(--c-basic); + background-color: var(--c-basic); +} diff --git a/ngx-css/utils/_fonts.scss b/ngx-css/utils/_fonts.scss new file mode 100644 index 00000000..c2c2500e --- /dev/null +++ b/ngx-css/utils/_fonts.scss @@ -0,0 +1,28 @@ +@font-face { + font-family: 'Poppins'; + src: url('src/fonts/1.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('src/fonts/2.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('src/fonts/3.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('src/fonts/4.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; +} diff --git a/ngx-css/utils/_icons.scss b/ngx-css/utils/_icons.scss new file mode 100644 index 00000000..dc19bd86 --- /dev/null +++ b/ngx-css/utils/_icons.scss @@ -0,0 +1,21 @@ +// ===== ICONS IMPORT ===== +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(~src/fonts/5.woff2) format('woff2'); +} + +.material-icons, i { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 26px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; +} \ No newline at end of file diff --git a/ngx-css/utils/_media.scss b/ngx-css/utils/_media.scss new file mode 100644 index 00000000..9b4d252a --- /dev/null +++ b/ngx-css/utils/_media.scss @@ -0,0 +1,70 @@ +// ===== MEDIA MIXINS FOR RESPONSIVE ===== +// USE: @include bp-max(sm)... bp-min... bp-only... + +// Мапа брейкпоінтів для відповідності +$breakpoints-map: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1980px +) !default; + +// Імпорт sass:map для роботи з мапами +@use 'sass:map'; +@use 'sass:list'; + +// Функція для отримання наступного брейкпоінту +@function breakpoint-next($name, $breakpoints: $breakpoints-map) { + $breakpoint-names: map.keys($breakpoints); // Отримуємо ключі з мапи + $n: list.index($breakpoint-names, $name); // Отримуємо індекс з іменем брейкпоінту + @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null); // Повертаємо наступний брейкпоінт +} + +// Функція для отримання мінімального брейкпоінту +@function breakpoint-min($name, $breakpoints: $breakpoints-map) { + $min: map.get($breakpoints, $name); // Отримуємо значення мінімального брейкпоінту + @return if($min != 0, $min, null); +} + +// Функція для отримання максимального брейкпоінту +@function breakpoint-max($name, $breakpoints: $breakpoints-map) { + $next: breakpoint-next($name, $breakpoints); // Отримуємо наступний брейкпоінт + @return if($next, breakpoint-min($next, $breakpoints) - 0.1, null); +} + +// Міксін для мінімального брейкпоінту +@mixin bp-min($name, $breakpoints: $breakpoints-map) { + $min: breakpoint-min($name, $breakpoints); // Отримуємо мінімальний брейкпоінт + @if $min { + @media (min-width: $min) { + @content; + } + } + @else { + @content; + } +} + +// Міксін для максимального брейкпоінту +@mixin bp-max($name, $breakpoints: $breakpoints-map) { + $max: breakpoint-max($name, $breakpoints); // Отримуємо максимальний брейкпоінт + @if $max { + @media (max-width: $max) { + @content; + } + } + @else { + @content; + } +} + +// Міксін для точного брейкпоінту +@mixin bp-only($name, $breakpoints: $breakpoints-map) { + @include bp-min($name, $breakpoints) { + @include bp-max($name, $breakpoints) { + @content; + } + } +} diff --git a/ngx-css/utils/_mixins.scss b/ngx-css/utils/_mixins.scss new file mode 100644 index 00000000..7746217a --- /dev/null +++ b/ngx-css/utils/_mixins.scss @@ -0,0 +1,14 @@ +@mixin text-default($ls, $lh, $fw, $fs, $color) { + letter-spacing: $ls; + line-height: $lh; + font-weight: $fw; + font-size: $fs; + color: $color; +} +@mixin flexBox ($display: null, $row:null, $jc: null, $ai: null, $wrap: null) { + display: $display; + flex-direction: $row; + justify-content: $jc; + align-items: $ai; + flex-wrap: $wrap; +} diff --git a/ngx-css/utils/_vars.scss b/ngx-css/utils/_vars.scss new file mode 100644 index 00000000..ae8b4de0 --- /dev/null +++ b/ngx-css/utils/_vars.scss @@ -0,0 +1,121 @@ +@use 'sass:meta'; + + $default-c-white: #fff; + $c-white: if(meta.variable-exists(--c-white), var(--c-white), $default-c-white); + + $default-c-black: #000; + $c-black: if(meta.variable-exists(--c-black), var(--c-black), $default-c-black); + + $default-c-grey: #e7e7e7; + $c-grey: if(meta.variable-exists(--c-grey), var(--c-grey), $default-c-grey); + + $default-c-grey-dark: #bfbfbf; + $c-grey-dark: if(meta.variable-exists(--c-grey-dark), var(--c-grey-dark), $default-c-grey-dark); + + // classic + $default-c-warn: #e67e22; + $c-warn: if(meta.variable-exists(--c-warn), var(--c-warn), $default-c-warn); + + $default-c-error: #e74c3c; + $c-error: if(meta.variable-exists(--c-error), var(--c-error), $default-c-error); + + $default-c-error-hover: #d62c1a; + $c-error-hover: if(meta.variable-exists(--c-error-hover), var(--c-error-hover), $default-c-error-hover); + + $default-c-success: #14c76e; + $c-success: if(meta.variable-exists(--c-success), var(--c-success), $default-c-success); + + $default-c-info: #17a2b8; + $c-info: if(meta.variable-exists(--c-info), var(--c-info), $default-c-info); + + // geometry + $default-container: 1210px; + $container: if(meta.variable-exists(--container), var(--container), $default-container); + + $default-b-radius: 8px; + $b-radius: if(meta.variable-exists(--b-radius), $b-radius, $default-b-radius); + + $default-b-radius-card: 10px; + $b-radius-card: if(meta.variable-exists(--b-radius-card), var(--b-radius-card), $default-b-radius-card); + + $default-b-radius-btn: 10px; + $b-radius-btn: if(meta.variable-exists(--b-radius-btn), var(--b-radius-btn), $default-b-radius-btn); + + $default-b-radius-img: 50%; + $b-radius-img: if(meta.variable-exists(--b-radius-img), var(--b-radius-img), $default-b-radius-img); + + $default-padding: 10px; + $padding: if(meta.variable-exists(--padding), var(--padding), $default-padding); + + $default-fs: 16px; + $fs: if(meta.variable-exists(--fs), var(--fs), $default-fs); + + $default-ff-bold: bold; + $ff-bold: if(meta.variable-exists(--ff-bold), var(--ff-bold), $default-ff-bold); + + $default-ff-base: "Poppins", + sans-serif; + $ff-base: if(meta.variable-exists(--ff-base), var(--ff-base), $default-ff-base); + + $default-letter-spacing: 0.3px; + $letter-spacing: if(meta.variable-exists(--letter-spacing), var(--letter-spacing), $default-letter-spacing); + + $default-transition: .3s all ease-in-out; + $transition: if(meta.variable-exists(--transition), var(--transition), $default-transition); + + // theme + :root { + --c-white: #fff; + --c-basic: #3558ae; + --c-primary: #256eff; + --c-primary-hover: #0051f1; + --c-secondary: rgb(197, 61, 61); + --c-secondary-hover: rgb(150, 42, 42); + --c-bg-primary: #f3f4f7; + --c-bg-secondary: #ffffff; + --c-bg-tertiary: #fcfdfe; + --c-border: #f0f1f7; + --c-shadow: #f3f3f3; + --c-text-primary: #666666; + --c-text-secondary: #19235c; + --c-placeholder: #313335ab; + --c-img-round: 50%; + --card-background: #fefefe; + --card-border-radius: 10px; + --card-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + --card-margin-bottom: 24px; + --card-header-padding: 20px; + --card-header-background: #e0e0e0; + --card-body-padding: 20px; + --card-section-padding: 10px 0; + --card-footer-padding: 20px; + --card-footer-background: #e0e0e0; + --card-border-width: 2px; + --card-border-color: #cccccc; + --file-img-border-radius: 50%; + --file-add-bg: #28a745; + --file-add-bg-hover: #218838; + --file-item-border-radius: 10px; + --day-name: #988888; + --b-radius-btn: 10px; + --transition: all .3s; + --events: #4c8e9d; + --border: rgba(102, 91, 91, 0.432); + } + + html.dark:root { + --c-white: #fff; + --c-basic: #333; + --c-bg-primary: #282828; + --c-bg-secondary: #343434; + --c-bg-tertiary: #404040; + --c-border: #404040; + --c-shadow: #444444; + --c-text-primary: #ffffff; + --c-text-secondary: #ffffff; + --c-placeholder: #d3cdcd; + --c-calendar: #141414; + --day-name: #dad5d5; + --events: #1c2e32; + --border: rgb(255 255 255 / 23%); + } diff --git a/ngx-css/utils/angular.scss b/ngx-css/utils/angular.scss new file mode 100644 index 00000000..b62efd4c --- /dev/null +++ b/ngx-css/utils/angular.scss @@ -0,0 +1,4 @@ +// ===== ONLY FOR ANGULAR COMPONENTS ===== +@use 'vars' as vars; +@use 'media' as media; +@use 'mixins' as mixins; \ No newline at end of file diff --git a/ngx-css/vendors/_normalize.scss b/ngx-css/vendors/_normalize.scss new file mode 100644 index 00000000..8243ba10 --- /dev/null +++ b/ngx-css/vendors/_normalize.scss @@ -0,0 +1,98 @@ +html, +*, +*:before, +*:after { + box-sizing: border-box; +} +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} +* { + outline: 0; +} +html, +body { + margin: 0; + padding: 0; +} +main { + display: block; +} +h1 { + font-size: 2em; + margin: 0; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +pre { + font-family: monospace, monospace; + font-size: 1em; +} +img { + border-style: none; +} +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} +button, +input { + overflow: visible; +} +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +[hidden] { + display: none; +} +img { + max-width: 100%; + display: inline-block; + vertical-align: top; +} +a { + text-decoration: none; +}