diff --git a/.stylelintignore b/.stylelintignore index da64780c..8062b4f7 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -6,6 +6,8 @@ /.angular /test-reports /src/coverage +/src/styles.scss + /projects/ngx-mask-lib/coverage # Node diff --git a/.stylelintrc.json b/.stylelintrc.json index 5c635866..536ca0df 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -2,6 +2,9 @@ "extends": ["stylelint-config-recommended-scss", "stylelint-prettier/recommended"], "customSyntax": "postcss-scss", "rules": { + "no-empty-source": null, + "scss/comment-no-empty": null, + "no-descending-specificity": null, "selector-type-no-unknown": [ true, { diff --git a/bun.lockb b/bun.lockb index c6f68a0c..b1a2112e 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 66125bd1..759ef289 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,8 @@ "type-coverage": "^2.29.1", "typescript": "5.5.4", "angular-eslint": "^18.1.0", - "typescript-eslint": "^7.17.0" + "typescript-eslint": "^7.17.0", + "tailwindcss": "^3.4.14" }, "typeCoverage": { "atLeast": 92, diff --git a/src/app/app.component.html b/src/app/app.component.html index e40422d1..53f0f10a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,10 @@ -
+
-
-
+
+
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8907320d..06ed89a7 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,26 +1,3 @@ -@import '../libraries/styles/media-breakpoints'; :host { - display: block; - height: 100%; -} -.content-wrapper { - .mask-wrap { - height: calc(100% - 64px); - overflow: auto; - .right-section { - width: 100%; - padding-left: 310px; - } - } -} - -@media screen and (max-width: $desktopWidth) { - .content-wrapper { - .mask-wrap { - .right-section { - padding: 0; - margin-top: 55px; - } - } - } + @apply block h-full; } diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html index 793f67c7..efeaf2a0 100644 --- a/src/app/options/options.component.html +++ b/src/app/options/options.component.html @@ -1,25 +1,33 @@ @for (tile of cardDocs(); track tile.id; let i = $index) { -
-
+
+
{{ tile.header }}
-
-
-
+
+
+
Hand with box - Usage + Usage
- Source code -
-
-                             
-                             Input vector
-                        
+ Source code +
+
+                        
+                        Input vector
+                    
-
+
-
+
+ class="w-full h-[51px] placeholder:text-white/25 text-full-white py-3 px-5 outline-none bg-black border-b-2px border-b-white rounded-10px focus:border-b-yellow hover:border-b-yellow hover:bg-full-white/25 focus:bg-full-white/25" />
-
+
{{ title() }} -{{ - value() -}} +{{ title() }} +{{ value() }} diff --git a/src/app/shared/card-content/card-content.component.scss b/src/app/shared/card-content/card-content.component.scss index bffd69f1..9d536b75 100644 --- a/src/app/shared/card-content/card-content.component.scss +++ b/src/app/shared/card-content/card-content.component.scss @@ -1,23 +1,10 @@ :host { - padding: 15px; - display: flex; - flex-direction: column; - .sub-text { - margin-bottom: 5px; - } - .green-view, - .yellow-view { - padding: 0 5px; - gap: 10px; - height: 21px; - width: fit-content; - border-radius: 5px; - } + @apply flex flex-col mt-5 text-full-white; + .green-view { - color: var(--green); - background: rgba(26, 183, 126, 0.05); + @apply text-green bg-green/[.10]; } .yellow-view { - background: rgba(248, 248, 248, 0.05); + @apply text-yellow bg-yellow/[.10]; } } diff --git a/src/libraries b/src/libraries index 1092682f..732a29a7 160000 --- a/src/libraries +++ b/src/libraries @@ -1 +1 @@ -Subproject commit 1092682f6ef7550040231e3c9460bdf48277b84b +Subproject commit 732a29a701b8b29990f1d6c7cb5c9add02206940 diff --git a/src/styles.scss b/src/styles.scss index 71de5b92..b5c61c95 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ -@import './libraries/styles/general'; +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 00000000..0f3ba726 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,93 @@ +import { type Config } from 'tailwindcss'; + +const tailwindConfig: Config = { + content: ['./src/**/*.{html,scss,ts}'], + theme: { + extend: { + screens: { + mob: { min: '1px', max: '700px' }, + tab: { min: '700px', max: '1279px' }, + desk: { min: '1279px' }, + }, + fontFamily: { + sans: ['Varela', 'system-ui', 'sans-serif'], + }, + colors: { + dark: { + DEFAULT: '#191919', + }, + yellow: { + DEFAULT: '#FFD64D', + }, + green: { + DEFAULT: '#1AB77E', + }, + orange: { + DEFAULT: '#FF710A', + }, + 'full-white': '#FFFFFF', + white: { + DEFAULT: '#F8F8F8', + }, + }, + spacing: { + '5px': '5px', + '15px': '15px', + '30px': '30px', + '35px': '35px', + '50px': '50px', + }, + fontSize: { + title: [ + '10px', + { + lineHeight: '14px', + fontWeight: '400', + }, + ], + 'span-12': [ + '12px', + { + lineHeight: '21px', + fontWeight: '400', + }, + ], + span: [ + '14px', + { + lineHeight: '21px', + fontWeight: '400', + }, + ], + + h3: [ + '25px', + { + lineHeight: '27px', + fontWeight: '500', + }, + ], + h5: [ + '16px', + { + lineHeight: '24px', + fontWeight: '400', + }, + ], + }, + borderRadius: { + '4px': '4px', + '5px': '5px', + '10px': '10px', + '15px': '15px', + '25px': '25px', + }, + borderWidth: { + '2px': '2px', + }, + }, + }, + plugins: [], +}; + +export default tailwindConfig;