diff --git a/.gitignore b/.gitignore index a294f17f5..2f6c71bea 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ # dependencies /node_modules +package-lock.json /.pnp .pnp.js diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..5c6c95870 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 0715867a0..cb37f5aad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,14 @@ # Change Log +## [1.1.1] 2023-05-22 + +- Update dependencies +- Fix installation issue + ## [1.1.0] 2021-03-19 + ### Bug fixing + - Rename `master` branch to `main` - To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`): https://tailwindcss.com/docs/upgrading-to-v2 - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-blueGray-{number}` @@ -15,7 +22,7 @@ - Then, you search in your whole project for `blueGray-700` and replace it with `blueGray-600` - Then, you search in your whole project for `blueGray-800` and replace it with `blueGray-700` - Then, you search in your whole project for `blueGray-900` and replace it with `blueGray-800` - - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-lightBlue-{number}` + - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-sky-{number}` - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-green-{number}` classes were renamed to `{type}-emerald-{number}` - `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0` - https://github.com/creativetimofficial/notus-angular/issues/4 @@ -29,24 +36,34 @@ - https://github.com/creativetimofficial/notus-svelte/issues/3 - https://github.com/creativetimofficial/notus-svelte/issues/6 - https://github.com/creativetimofficial/vue-notus/pull/4/ + ### Major style changes + - The upgrade of Tailwind CSS from version 1 to version 2, will cause multiple style changes, check them out on the official Tailwind CSS websites: - https://blog.tailwindcss.com/tailwindcss-v2 - https://tailwindcss.com/ - https://tailwindcss.com/docs/upgrading-to-v2 + ### Deleted components + ### Added components + ### Deleted dependencies + - `@tailwindcss/custom-forms` - `react-google-maps` (replaced by simple Google Maps API) - `@types/googlemaps` (dependencies of `react-google-maps`) - `@types/markerclustererplus` (dependencies of `react-google-maps`) - `@types/react` (dependencies of `react-google-maps`) + ### Added dependencies + - `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`) - `autoprefixer` - `postcss` + ### Updated dependencies + ``` @fortawesome/fontawesome-free 5.14.0 → 5.15.3 @popperjs/core 2.5.1 → 2.9.1 @@ -57,10 +74,14 @@ react-scripts 3.4.3 → 4.0.3 tailwindcss 1.8.10 → 2.0.4 typescript 4.0.3 → 4.2.3 ``` + ### Warning + _On a clean install there may be some warnings from request, chokidar, fsevents - they come from node_modules, and they do not affect the product at all._ ## [1.0.0] 2020-09-29 + ### Original Release + - Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=nr-changelog) - Added design from Tailwind Starter Kit by Creative Tim diff --git a/package.json b/package.json index 37565ea44..e64fa6353 100644 --- a/package.json +++ b/package.json @@ -1,24 +1,24 @@ { "name": "notus-react", - "version": "1.1.0", + "version": "1.1.1", "description": "Notus React - A free Tailwind CSS and React UI Kit and Admin by Creative Tim.", "repository": "https://github.com/creativetimofficial/notus-react", "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-free": "5.15.3", - "@popperjs/core": "2.9.1", - "@tailwindcss/forms": "0.2.1", - "autoprefixer": "10.2.5", + "@fortawesome/fontawesome-free": "6.4.0", + "@popperjs/core": "2.11.7", + "@tailwindcss/forms": "0.5.3", + "autoprefixer": "10.4.14", "chart.js": "2.9.4", "gulp": "4.0.2", - "gulp-append-prepend": "1.0.8", - "postcss": "8.2.8", - "react": "17.0.1", - "react-dom": "17.0.1", - "react-router": "5.2.0", - "react-router-dom": "5.2.0", - "react-scripts": "4.0.3", - "tailwindcss": "2.0.4" + "gulp-append-prepend": "1.0.9", + "postcss": "8.4.23", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-router": "6.11.1", + "react-router-dom": "6.11.1", + "react-scripts": "5.0.1", + "tailwindcss": "2.2.19" }, "scripts": { "start": "react-scripts start", @@ -44,6 +44,11 @@ ] }, "optionalDependencies": { - "typescript": "4.2.3" + "typescript": "5.0.4" + }, + "overrides": { + "svgo": "3.0.2", + "chokidar": "3.5.3", + "fsevents": "2.3.2" } } diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index bbb42b738..269fe7158 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -1,6 +1,6 @@ -/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */ -/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document @@ -12,8 +12,8 @@ Use a better box model (opinionated). */ *, -*::before, -*::after { +::before, +::after { box-sizing: border-box; } @@ -21,8 +21,7 @@ Use a better box model (opinionated). Use a more readable tab size (opinionated). */ -:root { - -moz-tab-size: 4; +html { tab-size: 4; } @@ -32,8 +31,10 @@ Use a more readable tab size (opinionated). */ html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } /* @@ -54,16 +55,9 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre */ body { - font-family: - system-ui, - -apple-system, /* Firefox supports this but not yet `system-ui` */ - 'Segoe UI', - Roboto, - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji'; + font-family: system-ui, -apple-system, + /* Firefox supports this but not yet `system-ui` */ "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; } /* @@ -77,8 +71,10 @@ Grouping content */ hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ + height: 0; + /* 1 */ + color: inherit; + /* 2 */ } /* @@ -92,7 +88,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr[title] { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /** @@ -113,14 +109,11 @@ code, kbd, samp, pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, + monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /** @@ -162,8 +155,10 @@ Tabular data */ table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ } /* @@ -181,10 +176,14 @@ input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } /** @@ -193,7 +192,8 @@ Remove the inheritance of text transform in Edge and Firefox. */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -202,7 +202,7 @@ Correct the inability to style clickable types in iOS and Safari. */ button, -[type='button'] { +[type="button"] { -webkit-appearance: button; } @@ -210,6 +210,11 @@ button, Remove the inner border and padding in Firefox. */ +::-moz-focus-inner { + border-style: none; + padding: 0; +} + /** Restore the focus styles unset by the previous rule. */ @@ -239,20 +244,43 @@ progress { Correct the cursor style of increment and decrement buttons in Safari. */ +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + /** Remove the inner padding in Chrome and Safari on macOS. */ +::-webkit-search-decoration { + -webkit-appearance: none; +} + /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + /* Interactive =========== @@ -297,16 +325,6 @@ button { background-image: none; } -/** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - fieldset { margin: 0; padding: 0; @@ -331,8 +349,12 @@ ul { */ html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ - line-height: 1.5; /* 2 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 1 */ + line-height: 1.5; + /* 2 */ } /** @@ -374,10 +396,14 @@ body { *, ::before, ::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e4e4e7; /* 2 */ + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: currentColor; + /* 2 */ } /* @@ -406,12 +432,8 @@ textarea { resize: vertical; } -input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - opacity: 1; - color: #a1a1aa; -} - -input:-ms-input-placeholder, textarea:-ms-input-placeholder { +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { opacity: 1; color: #a1a1aa; } @@ -427,6 +449,14 @@ button, cursor: pointer; } +/** + * Override legacy focus reset from Normalize with modern Firefox focus styles. + * + * This is actually an improvement over the new defaults in Firefox in our testing, + * as it triggers the better focus styles even for links, which still use a dotted + * outline in Firefox by default. + */ + table { border-collapse: collapse; } @@ -480,15 +510,25 @@ pre, code, kbd, samp { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; } /** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. + * 1. Make replaced elements `display: block` by default as that's + * the behavior you want almost all of the time. Inspired by + * CSS Remedy, with `svg` added as well. * - * https://github.com/mozdevs/cssremedy/issues/14 + * https://github.com/mozdevs/cssremedy/issues/14 + * + * 2. Add `vertical-align: middle` to align replaced elements more + * sensibly by default when overriding `display` by adding a + * utility like `inline`. + * + * This can trigger a poorly considered linting error in some + * tools but is included by design. + * + * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 */ img, @@ -500,12 +540,14 @@ iframe, embed, object { display: block; + /* 1 */ vertical-align: middle; + /* 2 */ } /** * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. + * their intrinsic aspect ratio. * * https://github.com/mozdevs/cssremedy/issues/14 */ @@ -516,21 +558,35 @@ video { height: auto; } +/** + * Ensure the default browser behavior of the `hidden` attribute. + */ + +[hidden] { + display: none; +} - [type='text'], - [type='email'], - [type='url'], - [type='password'], - [type='number'], - [type='month'], - [type='time'], - [type='week'], - [multiple], - textarea, - select - { +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(228, 228, 231, var(--tw-border-opacity)); +} + +[type="text"], +[type="email"], +[type="url"], +[type="password"], +[type="number"], +[type="month"], +[type="search"], +[type="time"], +[type="week"], +[multiple], +textarea, +select { -webkit-appearance: none; - appearance: none; + appearance: none; background-color: #fff; border-color: #71717a; border-width: 1px; @@ -541,34 +597,67 @@ video { padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; + --tw-shadow: 0 0 #0000; } -[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='month']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { +[type="text"]:focus, +[type="email"]:focus, +[type="url"]:focus, +[type="password"]:focus, +[type="number"]:focus, +[type="month"]:focus, +[type="search"]:focus, +[type="time"]:focus, +[type="week"]:focus, +[multiple]:focus, +textarea:focus, +select:focus { outline: 2px solid transparent; outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow); border-color: #2563eb; } -input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { color: #71717a; opacity: 1; } -input:-ms-input-placeholder, textarea:-ms-input-placeholder { +input::placeholder, +textarea::placeholder { color: #71717a; opacity: 1; } -input::placeholder, textarea::placeholder { - color: #71717a; - opacity: 1; +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-webkit-date-and-time-value { + min-height: 1.5em; +} + +::-webkit-datetime-edit, +::-webkit-datetime-edit-year-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-minute-field, +::-webkit-datetime-edit-second-field, +::-webkit-datetime-edit-millisecond-field, +::-webkit-datetime-edit-meridiem-field { + padding-top: 0; + padding-bottom: 0; } select { @@ -578,7 +667,7 @@ select { background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; - color-adjust: exact; + print-color-adjust: exact; } [multiple] { @@ -588,51 +677,50 @@ select { background-size: initial; padding-right: 0.75rem; -webkit-print-color-adjust: unset; - color-adjust: unset; + print-color-adjust: unset; } - - [type='checkbox'] { +[type="checkbox"] { -webkit-appearance: none; - appearance: none; + appearance: none; padding: 0; -webkit-print-color-adjust: exact; - color-adjust: exact; + print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-flex-shrink: 0; - flex-shrink: 0; + user-select: none; + flex-shrink: 0; height: 1rem; width: 1rem; color: #2563eb; background-color: #fff; border-color: #71717a; border-width: 1px; + --tw-shadow: 0 0 #0000; } -[type='checkbox'] { +[type="checkbox"] { border-radius: 0px; } - - [type='checkbox']:focus { +[type="checkbox"]:focus { outline: 2px solid transparent; outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow); } - - [type='checkbox']:checked { +[type="checkbox"]:checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; @@ -640,18 +728,17 @@ select { background-repeat: no-repeat; } -[type='checkbox']:checked { +[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } - - [type='checkbox']:checked:hover, - [type='checkbox']:checked:focus { +[type="checkbox"]:checked:hover, +[type="checkbox"]:checked:focus { border-color: transparent; background-color: currentColor; } -[type='checkbox']:indeterminate { +[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; @@ -660,15 +747,13 @@ select { background-repeat: no-repeat; } - - [type='checkbox']:indeterminate:hover, - [type='checkbox']:indeterminate:focus - { +[type="checkbox"]:indeterminate:hover, +[type="checkbox"]:indeterminate:focus { border-color: transparent; background-color: currentColor; } -[type='file'] { +[type="file"] { background: unset; border-color: inherit; border-width: 0; @@ -678,7 +763,8 @@ select { line-height: inherit; } -[type='file']:focus { +[type="file"]:focus { + outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } @@ -1046,6 +1132,79 @@ select { } } +.form-checkbox { + -webkit-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #71717a; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +.form-checkbox { + border-radius: 0px; +} + +.form-checkbox:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow); +} + +.form-checkbox:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-checkbox:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +.form-checkbox:checked:hover, +.form-checkbox:checked:focus { + border-color: transparent; + background-color: currentColor; +} + +.form-checkbox:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-checkbox:indeterminate:hover, +.form-checkbox:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + .container { width: 100%; } @@ -1080,416 +1239,373 @@ select { } } -.bg-black { - --tw-bg-opacity: 1; - background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); +.pointer-events-none { + pointer-events: none; } -.bg-white { - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); +.fixed { + position: fixed; } -.bg-pink-500 { - --tw-bg-opacity: 1; - background-color: rgba(236, 72, 153, var(--tw-bg-opacity)); +.absolute { + position: absolute; } -.bg-purple-200 { - --tw-bg-opacity: 1; - background-color: rgba(233, 213, 255, var(--tw-bg-opacity)); +.relative { + position: relative; } -.bg-purple-500 { - --tw-bg-opacity: 1; - background-color: rgba(168, 85, 247, var(--tw-bg-opacity)); +.top-0 { + top: 0px; } -.bg-indigo-500 { - --tw-bg-opacity: 1; - background-color: rgba(99, 102, 241, var(--tw-bg-opacity)); +.top-auto { + top: auto; } -.bg-lightBlue-200 { - --tw-bg-opacity: 1; - background-color: rgba(186, 230, 253, var(--tw-bg-opacity)); +.-top-225-px { + top: -225px; } -.bg-lightBlue-300 { - --tw-bg-opacity: 1; - background-color: rgba(125, 211, 252, var(--tw-bg-opacity)); +.-top-160-px { + top: -160px; } -.bg-lightBlue-400 { - --tw-bg-opacity: 1; - background-color: rgba(56, 189, 248, var(--tw-bg-opacity)); +.-top-150-px { + top: -150px; } -.bg-lightBlue-500 { - --tw-bg-opacity: 1; - background-color: rgba(14, 165, 233, var(--tw-bg-opacity)); +.-top-94-px { + top: -94px; } -.bg-lightBlue-600 { - --tw-bg-opacity: 1; - background-color: rgba(2, 132, 199, var(--tw-bg-opacity)); +.-top-29-px { + top: -29px; } -.bg-lightBlue-800 { - --tw-bg-opacity: 1; - background-color: rgba(7, 89, 133, var(--tw-bg-opacity)); +.top-25-px { + top: 25px; } -.bg-lightBlue-900 { - --tw-bg-opacity: 1; - background-color: rgba(12, 74, 110, var(--tw-bg-opacity)); +.top-95-px { + top: 95px; } -.bg-teal-200 { - --tw-bg-opacity: 1; - background-color: rgba(153, 246, 228, var(--tw-bg-opacity)); +.top-210-px { + top: 210px; } -.bg-teal-500 { - --tw-bg-opacity: 1; - background-color: rgba(20, 184, 166, var(--tw-bg-opacity)); +.right-0 { + right: 0px; } -.bg-emerald-200 { - --tw-bg-opacity: 1; - background-color: rgba(167, 243, 208, var(--tw-bg-opacity)); +.-right-100 { + right: -100%; } -.bg-emerald-400 { - --tw-bg-opacity: 1; - background-color: rgba(52, 211, 153, var(--tw-bg-opacity)); +.bottom-0 { + bottom: 0px; } -.bg-emerald-500 { - --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); +.bottom-auto { + bottom: auto; } -.bg-yellow-500 { - --tw-bg-opacity: 1; - background-color: rgba(234, 179, 8, var(--tw-bg-opacity)); +.left-0 { + left: 0px; } -.bg-orange-200 { - --tw-bg-opacity: 1; - background-color: rgba(254, 215, 170, var(--tw-bg-opacity)); +.left-auto { + left: auto; } -.bg-orange-500 { - --tw-bg-opacity: 1; - background-color: rgba(249, 115, 22, var(--tw-bg-opacity)); +.-left-50-px { + left: -50px; } -.bg-red-200 { - --tw-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--tw-bg-opacity)); +.-left-20-px { + left: -20px; } -.bg-red-400 { - --tw-bg-opacity: 1; - background-color: rgba(248, 113, 113, var(--tw-bg-opacity)); +.left-40-px { + left: 40px; } -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); +.left-145-px { + left: 145px; } -.bg-red-600 { - --tw-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--tw-bg-opacity)); +.left-195-px { + left: 195px; } -.bg-red-700 { - --tw-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--tw-bg-opacity)); +.left-260-px { + left: 260px; } -.bg-blueGray-50 { - --tw-bg-opacity: 1; - background-color: rgba(248, 250, 252, var(--tw-bg-opacity)); +.z-2 { + z-index: 2; } -.bg-blueGray-100 { - --tw-bg-opacity: 1; - background-color: rgba(241, 245, 249, var(--tw-bg-opacity)); +.z-3 { + z-index: 3; } -.bg-blueGray-200 { - --tw-bg-opacity: 1; - background-color: rgba(226, 232, 240, var(--tw-bg-opacity)); +.z-10 { + z-index: 10; } -.bg-blueGray-600 { - --tw-bg-opacity: 1; - background-color: rgba(71, 85, 105, var(--tw-bg-opacity)); +.z-40 { + z-index: 40; } -.bg-blueGray-700 { - --tw-bg-opacity: 1; - background-color: rgba(51, 65, 85, var(--tw-bg-opacity)); +.z-50 { + z-index: 50; } -.bg-blueGray-800 { - --tw-bg-opacity: 1; - background-color: rgba(30, 41, 59, var(--tw-bg-opacity)); +.float-left { + float: left; } -.active\:bg-indigo-600:active { - --tw-bg-opacity: 1; - background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); +.m-2 { + margin: 0.5rem; } -.active\:bg-lightBlue-600:active { - --tw-bg-opacity: 1; - background-color: rgba(2, 132, 199, var(--tw-bg-opacity)); +.m-4 { + margin: 1rem; } -.active\:bg-blueGray-50:active { - --tw-bg-opacity: 1; - background-color: rgba(248, 250, 252, var(--tw-bg-opacity)); +.-m-16 { + margin: -4rem; } -.active\:bg-blueGray-600:active { - --tw-bg-opacity: 1; - background-color: rgba(71, 85, 105, var(--tw-bg-opacity)); +.-m-24 { + margin: -6rem; } -.bg-center { - background-position: center; +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; } -.bg-no-repeat { - background-repeat: no-repeat; +.mx-auto { + margin-left: auto; + margin-right: auto; } -.bg-cover { - background-size: cover; +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } -.bg-full { - background-size: 100%; +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; } -.border-collapse { - border-collapse: collapse; +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; } -.border-lightBlue-700 { - --tw-border-opacity: 1; - border-color: rgba(3, 105, 161, var(--tw-border-opacity)); +.mt-0 { + margin-top: 0px; } -.border-blueGray-50 { - --tw-border-opacity: 1; - border-color: rgba(248, 250, 252, var(--tw-border-opacity)); +.mt-1 { + margin-top: 0.25rem; } -.border-blueGray-100 { - --tw-border-opacity: 1; - border-color: rgba(241, 245, 249, var(--tw-border-opacity)); +.mt-2 { + margin-top: 0.5rem; } -.border-blueGray-200 { - --tw-border-opacity: 1; - border-color: rgba(226, 232, 240, var(--tw-border-opacity)); +.mt-3 { + margin-top: 0.75rem; } -.border-blueGray-300 { - --tw-border-opacity: 1; - border-color: rgba(203, 213, 225, var(--tw-border-opacity)); +.mt-4 { + margin-top: 1rem; } -.border-blueGray-500 { - --tw-border-opacity: 1; - border-color: rgba(100, 116, 139, var(--tw-border-opacity)); +.mt-5 { + margin-top: 1.25rem; } -.border-blueGray-600 { - --tw-border-opacity: 1; - border-color: rgba(71, 85, 105, var(--tw-border-opacity)); +.mt-6 { + margin-top: 1.5rem; } -.rounded { - border-radius: 0.25rem; +.mt-8 { + margin-top: 2rem; } -.rounded-lg { - border-radius: 0.5rem; +.mt-10 { + margin-top: 2.5rem; } -.rounded-full { - border-radius: 9999px; +.mt-12 { + margin-top: 3rem; } -.rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; +.mt-16 { + margin-top: 4rem; } -.rounded-t-lg { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; +.mt-20 { + margin-top: 5rem; } -.border-solid { - border-style: solid; +.mt-24 { + margin-top: 6rem; } -.border-none { - border-style: none; +.mt-32 { + margin-top: 8rem; } -.border-0 { - border-width: 0px; +.mt-48 { + margin-top: 12rem; } -.border-2 { - border-width: 2px; +.-mt-20 { + margin-top: -5rem; } -.border { - border-width: 1px; +.-mt-24 { + margin-top: -6rem; } -.border-t-0 { - border-top-width: 0px; +.-mt-32 { + margin-top: -8rem; } -.border-r-0 { - border-right-width: 0px; +.-mt-48 { + margin-top: -12rem; } -.border-l-0 { - border-left-width: 0px; +.-mt-64 { + margin-top: -16rem; } -.border-t { - border-top-width: 1px; +.mr-0 { + margin-right: 0px; } -.border-b { - border-bottom-width: 1px; +.mr-1 { + margin-right: 0.25rem; } -.cursor-pointer { - cursor: pointer; +.mr-2 { + margin-right: 0.5rem; } -.block { - display: block; +.mr-3 { + margin-right: 0.75rem; } -.inline-block { - display: inline-block; +.mr-4 { + margin-right: 1rem; } -.flex { - display: -webkit-flex; - display: flex; +.mr-auto { + margin-right: auto; } -.inline-flex { - display: -webkit-inline-flex; - display: inline-flex; +.mb-0 { + margin-bottom: 0px; } -.table { - display: table; +.mb-1 { + margin-bottom: 0.25rem; } -.hidden { - display: none; +.mb-2 { + margin-bottom: 0.5rem; } -.flex-row { - -webkit-flex-direction: row; - flex-direction: row; +.mb-3 { + margin-bottom: 0.75rem; } -.flex-col { - -webkit-flex-direction: column; - flex-direction: column; +.mb-4 { + margin-bottom: 1rem; } -.flex-wrap { - -webkit-flex-wrap: wrap; - flex-wrap: wrap; +.mb-5 { + margin-bottom: 1.25rem; } -.items-center { - -webkit-align-items: center; - align-items: center; +.mb-6 { + margin-bottom: 1.5rem; } -.items-stretch { - -webkit-align-items: stretch; - align-items: stretch; +.mb-8 { + margin-bottom: 2rem; } -.content-center { - -webkit-align-content: center; - align-content: center; +.mb-12 { + margin-bottom: 3rem; } -.justify-end { - -webkit-justify-content: flex-end; - justify-content: flex-end; +.mb-24 { + margin-bottom: 6rem; } -.justify-center { - -webkit-justify-content: center; - justify-content: center; +.ml-1 { + margin-left: 0.25rem; } -.justify-between { - -webkit-justify-content: space-between; - justify-content: space-between; +.ml-2 { + margin-left: 0.5rem; } -.flex-1 { - -webkit-flex: 1 1 0%; - flex: 1 1 0%; +.ml-3 { + margin-left: 0.75rem; } -.flex-auto { - -webkit-flex: 1 1 auto; - flex: 1 1 auto; +.ml-auto { + margin-left: auto; } -.flex-initial { - -webkit-flex: 0 1 auto; - flex: 0 1 auto; +.-ml-4 { + margin-left: -1rem; } -.flex-grow { - -webkit-flex-grow: 1; - flex-grow: 1; +.-ml-20 { + margin-left: -5rem; } -.float-left { - float: left; +.last\:mr-0:last-child { + margin-right: 0px; } -.font-light { - font-weight: 300; +.hover\:-mt-4:hover { + margin-top: -1rem; } -.font-normal { - font-weight: 400; +.block { + display: block; } -.font-semibold { - font-weight: 600; +.inline-block { + display: inline-block; } -.font-bold { - font-weight: 700; +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.table { + display: table; +} + +.hidden { + display: none; } .h-0 { @@ -1556,384 +1672,580 @@ select { height: 600px; } -.text-55 { - font-size: 55rem; +.max-h-860-px { + max-height: 860px; } -.text-xs { - font-size: 0.75rem; - line-height: 1rem; +.min-h-screen { + min-height: 100vh; } -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; +.min-h-screen-75 { + min-height: 75vh; } -.text-base { - font-size: 1rem; - line-height: 1.5rem; +.w-5 { + width: 1.25rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; +.w-8 { + width: 2rem; } -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; +.w-10 { + width: 2.5rem; } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; +.w-12 { + width: 3rem; } -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; +.w-16 { + width: 4rem; } -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; +.w-auto { + width: auto; } -.text-5xl { - font-size: 3rem; - line-height: 1; +.w-1\/2 { + width: 50%; } -.leading-none { - line-height: 1; +.w-6\/12 { + width: 50%; } -.leading-snug { - line-height: 1.375; +.w-10\/12 { + width: 83.333333%; } -.leading-normal { - line-height: 1.5; +.w-full { + width: 100%; } -.leading-relaxed { - line-height: 1.625; +.min-w-0 { + min-width: 0px; +} + +.min-w-48 { + min-width: 12rem; +} + +.min-w-140-px { + min-width: 140px; +} + +.max-w-full { + max-width: 100%; +} + +.max-w-100-px { + max-width: 100px; +} + +.max-w-120-px { + max-width: 120px; +} + +.max-w-150-px { + max-width: 150px; +} + +.max-w-180-px { + max-width: 180px; +} + +.max-w-200-px { + max-width: 200px; +} + +.max-w-210-px { + max-width: 210px; +} + +.max-w-580-px { + max-width: 580px; +} + +.flex-1 { + flex: 1 1 0%; +} + +.flex-auto { + flex: 1 1 auto; +} + +.flex-initial { + flex: 0 1 auto; +} + +.flex-grow { + flex-grow: 1; +} + +.border-collapse { + border-collapse: collapse; +} + +.transform { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + -webkit-transform: translateX(var(--tw-translate-x)) + translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); + transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@-webkit-keyframes spin { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-webkit-keyframes ping { + 75%, + 100% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; + } +} + +@keyframes ping { + 75%, + 100% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; + } +} + +@-webkit-keyframes pulse { + 50% { + opacity: 0.5; + } +} + +@keyframes pulse { + 50% { + opacity: 0.5; + } +} + +@-webkit-keyframes bounce { + 0%, + 100% { + -webkit-transform: translateY(-25%); + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + + 50% { + -webkit-transform: none; + transform: none; + -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } +} + +@keyframes bounce { + 0%, + 100% { + -webkit-transform: translateY(-25%); + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + + 50% { + -webkit-transform: none; + transform: none; + -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } +} + +.cursor-pointer { + cursor: pointer; } .list-none { list-style-type: none; } -.m-2 { - margin: 0.5rem; +.flex-row { + flex-direction: row; } -.m-4 { - margin: 1rem; +.flex-col { + flex-direction: column; } -.-m-16 { - margin: -4rem; +.flex-wrap { + flex-wrap: wrap; } -.-m-24 { - margin: -6rem; +.content-center { + align-content: center; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.items-center { + align-items: center; } -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; +.items-stretch { + align-items: stretch; } -.mx-4 { - margin-left: 1rem; - margin-right: 1rem; +.justify-end { + justify-content: flex-end; } -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; +.justify-center { + justify-content: center; } -.mx-auto { - margin-left: auto; - margin-right: auto; +.justify-between { + justify-content: space-between; } -.mt-0 { - margin-top: 0px; +.overflow-hidden { + overflow: hidden; } -.mr-0 { - margin-right: 0px; +.overflow-x-auto { + overflow-x: auto; } -.mb-0 { - margin-bottom: 0px; +.overflow-y-auto { + overflow-y: auto; } -.mt-1 { - margin-top: 0.25rem; +.overflow-x-hidden { + overflow-x: hidden; } -.mr-1 { - margin-right: 0.25rem; +.whitespace-nowrap { + white-space: nowrap; } -.mb-1 { - margin-bottom: 0.25rem; +.break-words { + overflow-wrap: break-word; } -.ml-1 { - margin-left: 0.25rem; +.rounded { + border-radius: 0.25rem; } -.mt-2 { - margin-top: 0.5rem; +.rounded-lg { + border-radius: 0.5rem; } -.mr-2 { - margin-right: 0.5rem; +.rounded-full { + border-radius: 9999px; } -.mb-2 { - margin-bottom: 0.5rem; +.rounded-t { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } -.ml-2 { - margin-left: 0.5rem; +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; } -.mt-3 { - margin-top: 0.75rem; +.border-0 { + border-width: 0px; } -.mr-3 { - margin-right: 0.75rem; +.border-2 { + border-width: 2px; } -.mb-3 { - margin-bottom: 0.75rem; +.border { + border-width: 1px; } -.ml-3 { - margin-left: 0.75rem; +.border-t-0 { + border-top-width: 0px; } -.mt-4 { - margin-top: 1rem; +.border-t { + border-top-width: 1px; } -.mr-4 { - margin-right: 1rem; +.border-r-0 { + border-right-width: 0px; } -.mb-4 { - margin-bottom: 1rem; +.border-b { + border-bottom-width: 1px; } -.mt-5 { - margin-top: 1.25rem; +.border-l-0 { + border-left-width: 0px; } -.mb-5 { - margin-bottom: 1.25rem; +.border-solid { + border-style: solid; } -.mt-6 { - margin-top: 1.5rem; +.border-none { + border-style: none; } -.mb-6 { - margin-bottom: 1.5rem; +.border-sky-700 { + --tw-border-opacity: 1; + border-color: rgba(3, 105, 161, var(--tw-border-opacity)); } -.mt-8 { - margin-top: 2rem; +.border-blueGray-50 { + --tw-border-opacity: 1; + border-color: rgba(248, 250, 252, var(--tw-border-opacity)); } -.mb-8 { - margin-bottom: 2rem; +.border-blueGray-100 { + --tw-border-opacity: 1; + border-color: rgba(241, 245, 249, var(--tw-border-opacity)); } -.mt-10 { - margin-top: 2.5rem; +.border-blueGray-200 { + --tw-border-opacity: 1; + border-color: rgba(226, 232, 240, var(--tw-border-opacity)); } -.mt-12 { - margin-top: 3rem; +.border-blueGray-300 { + --tw-border-opacity: 1; + border-color: rgba(203, 213, 225, var(--tw-border-opacity)); } -.mb-12 { - margin-bottom: 3rem; +.border-blueGray-500 { + --tw-border-opacity: 1; + border-color: rgba(100, 116, 139, var(--tw-border-opacity)); } -.mt-16 { - margin-top: 4rem; +.border-blueGray-600 { + --tw-border-opacity: 1; + border-color: rgba(71, 85, 105, var(--tw-border-opacity)); } -.mt-20 { - margin-top: 5rem; +.bg-black { + --tw-bg-opacity: 1; + background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); } -.mt-24 { - margin-top: 6rem; +.bg-white { + --tw-bg-opacity: 1; + background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } -.mb-24 { - margin-bottom: 6rem; +.bg-pink-500 { + --tw-bg-opacity: 1; + background-color: rgba(236, 72, 153, var(--tw-bg-opacity)); } -.mt-32 { - margin-top: 8rem; +.bg-purple-200 { + --tw-bg-opacity: 1; + background-color: rgba(233, 213, 255, var(--tw-bg-opacity)); } -.mt-48 { - margin-top: 12rem; +.bg-purple-500 { + --tw-bg-opacity: 1; + background-color: rgba(168, 85, 247, var(--tw-bg-opacity)); } -.mr-auto { - margin-right: auto; +.bg-indigo-500 { + --tw-bg-opacity: 1; + background-color: rgba(99, 102, 241, var(--tw-bg-opacity)); } -.ml-auto { - margin-left: auto; +.bg-sky-200 { + --tw-bg-opacity: 1; + background-color: rgba(186, 230, 253, var(--tw-bg-opacity)); } -.-ml-4 { - margin-left: -1rem; +.bg-sky-300 { + --tw-bg-opacity: 1; + background-color: rgba(125, 211, 252, var(--tw-bg-opacity)); } -.-mt-20 { - margin-top: -5rem; +.bg-sky-400 { + --tw-bg-opacity: 1; + background-color: rgba(56, 189, 248, var(--tw-bg-opacity)); } -.-ml-20 { - margin-left: -5rem; +.bg-sky-500 { + --tw-bg-opacity: 1; + background-color: rgba(14, 165, 233, var(--tw-bg-opacity)); } -.-mt-24 { - margin-top: -6rem; +.bg-sky-600 { + --tw-bg-opacity: 1; + background-color: rgba(2, 132, 199, var(--tw-bg-opacity)); } -.-mt-32 { - margin-top: -8rem; +.bg-sky-800 { + --tw-bg-opacity: 1; + background-color: rgba(7, 89, 133, var(--tw-bg-opacity)); } -.-mt-48 { - margin-top: -12rem; +.bg-sky-900 { + --tw-bg-opacity: 1; + background-color: rgba(12, 74, 110, var(--tw-bg-opacity)); } -.-mt-64 { - margin-top: -16rem; +.bg-teal-200 { + --tw-bg-opacity: 1; + background-color: rgba(153, 246, 228, var(--tw-bg-opacity)); } -.last\:mr-0:last-child { - margin-right: 0px; +.bg-teal-500 { + --tw-bg-opacity: 1; + background-color: rgba(20, 184, 166, var(--tw-bg-opacity)); } -.hover\:-mt-4:hover { - margin-top: -1rem; +.bg-emerald-200 { + --tw-bg-opacity: 1; + background-color: rgba(167, 243, 208, var(--tw-bg-opacity)); } -.max-h-860-px { - max-height: 860px; +.bg-emerald-400 { + --tw-bg-opacity: 1; + background-color: rgba(52, 211, 153, var(--tw-bg-opacity)); } -.max-w-full { - max-width: 100%; +.bg-emerald-500 { + --tw-bg-opacity: 1; + background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); } -.max-w-100-px { - max-width: 100px; +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgba(234, 179, 8, var(--tw-bg-opacity)); } -.max-w-120-px { - max-width: 120px; +.bg-orange-200 { + --tw-bg-opacity: 1; + background-color: rgba(254, 215, 170, var(--tw-bg-opacity)); +} + +.bg-orange-500 { + --tw-bg-opacity: 1; + background-color: rgba(249, 115, 22, var(--tw-bg-opacity)); +} + +.bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgba(254, 202, 202, var(--tw-bg-opacity)); } -.max-w-150-px { - max-width: 150px; +.bg-red-400 { + --tw-bg-opacity: 1; + background-color: rgba(248, 113, 113, var(--tw-bg-opacity)); } -.max-w-180-px { - max-width: 180px; +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); } -.max-w-200-px { - max-width: 200px; +.bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgba(220, 38, 38, var(--tw-bg-opacity)); } -.max-w-210-px { - max-width: 210px; +.bg-red-700 { + --tw-bg-opacity: 1; + background-color: rgba(185, 28, 28, var(--tw-bg-opacity)); } -.max-w-580-px { - max-width: 580px; +.bg-blueGray-50 { + --tw-bg-opacity: 1; + background-color: rgba(248, 250, 252, var(--tw-bg-opacity)); } -.min-h-screen { - min-height: 100vh; +.bg-blueGray-100 { + --tw-bg-opacity: 1; + background-color: rgba(241, 245, 249, var(--tw-bg-opacity)); } -.min-h-screen-75 { - min-height: 75vh; +.bg-blueGray-200 { + --tw-bg-opacity: 1; + background-color: rgba(226, 232, 240, var(--tw-bg-opacity)); } -.min-w-0 { - min-width: 0px; +.bg-blueGray-600 { + --tw-bg-opacity: 1; + background-color: rgba(71, 85, 105, var(--tw-bg-opacity)); } -.min-w-48 { - min-width: 12rem; +.bg-blueGray-700 { + --tw-bg-opacity: 1; + background-color: rgba(51, 65, 85, var(--tw-bg-opacity)); } -.min-w-140-px { - min-width: 140px; +.bg-blueGray-800 { + --tw-bg-opacity: 1; + background-color: rgba(30, 41, 59, var(--tw-bg-opacity)); } -.opacity-50 { - opacity: 0.5; +.active\:bg-indigo-600:active { + --tw-bg-opacity: 1; + background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); } -.opacity-75 { - opacity: 0.75; +.active\:bg-sky-600:active { + --tw-bg-opacity: 1; + background-color: rgba(2, 132, 199, var(--tw-bg-opacity)); } -.opacity-80 { - opacity: .8; +.active\:bg-blueGray-50:active { + --tw-bg-opacity: 1; + background-color: rgba(248, 250, 252, var(--tw-bg-opacity)); } -.outline-none { - outline: 2px solid transparent; - outline-offset: 2px; +.active\:bg-blueGray-600:active { + --tw-bg-opacity: 1; + background-color: rgba(71, 85, 105, var(--tw-bg-opacity)); } -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; +.bg-cover { + background-size: cover; } -.overflow-hidden { - overflow: hidden; +.bg-full { + background-size: 100%; } -.overflow-x-auto { - overflow-x: auto; +.bg-center { + background-position: center; } -.overflow-y-auto { - overflow-y: auto; +.bg-no-repeat { + background-repeat: no-repeat; } -.overflow-x-hidden { - overflow-x: hidden; +.fill-current { + fill: currentColor; } .p-2 { @@ -1961,6 +2273,31 @@ select { padding-right: 0px; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-12 { + padding-left: 3rem; + padding-right: 3rem; +} + .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -1971,31 +2308,16 @@ select { padding-bottom: 0.5rem; } -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - .py-4 { padding-top: 1rem; padding-bottom: 1rem; } -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; @@ -2006,21 +2328,11 @@ select { padding-bottom: 1.5rem; } -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } -.px-12 { - padding-left: 3rem; - padding-right: 3rem; -} - .py-16 { padding-top: 4rem; padding-bottom: 4rem; @@ -2045,10 +2357,6 @@ select { padding-top: 0px; } -.pb-0 { - padding-bottom: 0px; -} - .pt-1 { padding-top: 0.25rem; } @@ -2057,66 +2365,26 @@ select { padding-top: 0.5rem; } -.pb-2 { - padding-bottom: 0.5rem; -} - -.pl-3 { - padding-left: 0.75rem; -} - -.pr-4 { - padding-right: 1rem; -} - -.pb-4 { - padding-bottom: 1rem; -} - -.pl-4 { - padding-left: 1rem; -} - .pt-6 { padding-top: 1.5rem; } -.pb-6 { - padding-bottom: 1.5rem; -} - .pt-8 { padding-top: 2rem; } -.pl-10 { - padding-left: 2.5rem; -} - .pt-12 { padding-top: 3rem; } -.pr-12 { - padding-right: 3rem; -} - .pt-16 { padding-top: 4rem; } -.pb-16 { - padding-bottom: 4rem; -} - .pt-20 { padding-top: 5rem; } -.pb-20 { - padding-bottom: 5rem; -} - .pt-24 { padding-top: 6rem; } @@ -2125,218 +2393,173 @@ select { padding-top: 8rem; } -.pb-32 { - padding-bottom: 8rem; -} - -.pb-40 { - padding-bottom: 10rem; -} - .pt-48 { padding-top: 12rem; } -.pb-48 { - padding-bottom: 12rem; -} - -.pb-64 { - padding-bottom: 16rem; -} - -.placeholder-blueGray-300::-webkit-input-placeholder { - --tw-placeholder-opacity: 1; - color: rgba(203, 213, 225, var(--tw-placeholder-opacity)); -} - -.placeholder-blueGray-300:-ms-input-placeholder { - --tw-placeholder-opacity: 1; - color: rgba(203, 213, 225, var(--tw-placeholder-opacity)); -} - -.placeholder-blueGray-300::placeholder { - --tw-placeholder-opacity: 1; - color: rgba(203, 213, 225, var(--tw-placeholder-opacity)); -} - -.pointer-events-none { - pointer-events: none; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; +.pr-4 { + padding-right: 1rem; } -.relative { - position: relative; +.pr-12 { + padding-right: 3rem; } -.top-0 { - top: 0px; +.pb-0 { + padding-bottom: 0px; } -.right-0 { - right: 0px; +.pb-2 { + padding-bottom: 0.5rem; } -.bottom-0 { - bottom: 0px; +.pb-4 { + padding-bottom: 1rem; } -.left-0 { - left: 0px; +.pb-6 { + padding-bottom: 1.5rem; } -.top-auto { - top: auto; +.pb-16 { + padding-bottom: 4rem; } -.bottom-auto { - bottom: auto; +.pb-20 { + padding-bottom: 5rem; } -.left-auto { - left: auto; +.pb-32 { + padding-bottom: 8rem; } -.-right-100 { - right: -100%; +.pb-40 { + padding-bottom: 10rem; } -.-top-225-px { - top: -225px; +.pb-48 { + padding-bottom: 12rem; } -.-top-160-px { - top: -160px; +.pb-64 { + padding-bottom: 16rem; } -.-top-150-px { - top: -150px; +.pl-3 { + padding-left: 0.75rem; } -.-top-94-px { - top: -94px; +.pl-4 { + padding-left: 1rem; } -.-left-50-px { - left: -50px; +.pl-10 { + padding-left: 2.5rem; } -.-top-29-px { - top: -29px; +.text-left { + text-align: left; } -.-left-20-px { - left: -20px; +.text-center { + text-align: center; } -.top-25-px { - top: 25px; +.text-right { + text-align: right; } -.left-40-px { - left: 40px; +.align-middle { + vertical-align: middle; } -.top-95-px { - top: 95px; +.text-55 { + font-size: 55rem; } -.left-145-px { - left: 145px; +.text-xs { + font-size: 0.75rem; + line-height: 1rem; } -.left-195-px { - left: 195px; +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; } -.top-210-px { - top: 210px; +.text-base { + font-size: 1rem; + line-height: 1.5rem; } -.left-260-px { - left: 260px; +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; } -* { - --tw-shadow: 0 0 #0000; +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; } -.shadow { - --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; } -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; } -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; } -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.text-5xl { + font-size: 3rem; + line-height: 1; } -.shadow-2xl { - --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.font-light { + font-weight: 300; } -.shadow-none { - --tw-shadow: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.font-normal { + font-weight: 400; } -.hover\:shadow-md:hover { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.font-semibold { + font-weight: 600; } -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.font-bold { + font-weight: 700; } -* { - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; +.uppercase { + text-transform: uppercase; } -.focus\:ring:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +.leading-none { + line-height: 1; } -.fill-current { - fill: currentColor; +.leading-snug { + line-height: 1.375; } -.text-left { - text-align: left; +.leading-normal { + line-height: 1.5; } -.text-center { - text-align: center; +.leading-relaxed { + line-height: 1.625; } -.text-right { - text-align: right; +.tracking-wide { + letter-spacing: 0.025em; } .text-black { @@ -2354,22 +2577,22 @@ select { color: rgba(244, 114, 182, var(--tw-text-opacity)); } -.text-lightBlue-300 { +.text-sky-300 { --tw-text-opacity: 1; color: rgba(125, 211, 252, var(--tw-text-opacity)); } -.text-lightBlue-400 { +.text-sky-400 { --tw-text-opacity: 1; color: rgba(56, 189, 248, var(--tw-text-opacity)); } -.text-lightBlue-500 { +.text-sky-500 { --tw-text-opacity: 1; color: rgba(14, 165, 233, var(--tw-text-opacity)); } -.text-lightBlue-600 { +.text-sky-600 { --tw-text-opacity: 1; color: rgba(2, 132, 199, var(--tw-text-opacity)); } @@ -2434,7 +2657,7 @@ select { color: rgba(30, 41, 59, var(--tw-text-opacity)); } -.hover\:text-lightBlue-600:hover { +.hover\:text-sky-600:hover { --tw-text-opacity: 1; color: rgba(2, 132, 199, var(--tw-text-opacity)); } @@ -2459,10 +2682,6 @@ select { color: rgba(30, 41, 59, var(--tw-text-opacity)); } -.uppercase { - text-transform: uppercase; -} - .no-underline { text-decoration: none; } @@ -2472,92 +2691,115 @@ select { -moz-osx-font-smoothing: grayscale; } -.tracking-wide { - letter-spacing: 0.025em; -} - -.align-middle { - vertical-align: middle; -} - -.whitespace-nowrap { - white-space: nowrap; +.placeholder-blueGray-300::-webkit-input-placeholder { + --tw-placeholder-opacity: 1; + color: rgba(203, 213, 225, var(--tw-placeholder-opacity)); } -.break-words { - overflow-wrap: break-word; +.placeholder-blueGray-300::placeholder { + --tw-placeholder-opacity: 1; + color: rgba(203, 213, 225, var(--tw-placeholder-opacity)); } -.w-5 { - width: 1.25rem; +.opacity-50 { + opacity: 0.5; } -.w-8 { - width: 2rem; +.opacity-75 { + opacity: 0.75; } -.w-10 { - width: 2.5rem; +.opacity-80 { + opacity: 0.8; } -.w-12 { - width: 3rem; +*, +::before, +::after { + --tw-shadow: 0 0 #0000; } -.w-16 { - width: 4rem; +.shadow { + --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-auto { - width: auto; +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-1\/2 { - width: 50%; +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-6\/12 { - width: 50%; +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-10\/12 { - width: 83.333333%; +.shadow-2xl { + --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-full { - width: 100%; +.shadow-none { + --tw-shadow: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.z-2 { - z-index: 2; +.hover\:shadow-md:hover { + --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.z-3 { - z-index: 3; +.hover\:shadow-lg:hover { + --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.z-10 { - z-index: 10; +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; } -.z-40 { - z-index: 40; +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; } -.z-50 { - z-index: 50; +*, +::before, +::after { + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; } -.transform { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.focus\:ring:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); } .transition-all { @@ -2566,121 +2808,90 @@ select { transition-duration: 150ms; } +.duration-150 { + transition-duration: 150ms; +} + .ease-linear { transition-timing-function: linear; } -.duration-150 { - transition-duration: 150ms; -} +@media (min-width: 640px) { + .sm\:mt-0 { + margin-top: 0px; + } -@-webkit-keyframes spin { - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + .sm\:mr-2 { + margin-right: 0.5rem; } -} -@keyframes spin { - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + .sm\:ml-1 { + margin-left: 0.25rem; } -} -@-webkit-keyframes ping { - 75%, 100% { - -webkit-transform: scale(2); - transform: scale(2); - opacity: 0; + .sm\:block { + display: block; } -} -@keyframes ping { - 75%, 100% { - -webkit-transform: scale(2); - transform: scale(2); - opacity: 0; + .sm\:w-6\/12 { + width: 50%; } -} -@-webkit-keyframes pulse { - 50% { - opacity: .5; + .sm\:pt-0 { + padding-top: 0px; } } -@keyframes pulse { - 50% { - opacity: .5; +@media (min-width: 768px) { + .md\:fixed { + position: fixed; } -} -@-webkit-keyframes bounce { - 0%, 100% { - -webkit-transform: translateY(-25%); - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); + .md\:relative { + position: relative; } - 50% { - -webkit-transform: none; - transform: none; - -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); + .md\:top-0 { + top: 0px; } -} -@keyframes bounce { - 0%, 100% { - -webkit-transform: translateY(-25%); - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); + .md\:bottom-0 { + bottom: 0px; } - 50% { - -webkit-transform: none; - transform: none; - -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); + .md\:left-0 { + left: 0px; } -} -@media (min-width: 640px) { - .sm\:block { - display: block; + .md\:mt-0 { + margin-top: 0px; } - .sm\:mt-0 { - margin-top: 0px; + .md\:mt-4 { + margin-top: 1rem; } - .sm\:ml-1 { - margin-left: 0.25rem; + .md\:mt-40 { + margin-top: 10rem; } - .sm\:mr-2 { - margin-right: 0.5rem; + .md\:mt-64 { + margin-top: 16rem; } - .sm\:pt-0 { - padding-top: 0px; + .md\:mb-4 { + margin-bottom: 1rem; } - .sm\:w-6\/12 { - width: 50%; + .md\:ml-64 { + margin-left: 16rem; } -} -@media (min-width: 768px) { .md\:block { display: block; } .md\:flex { - display: -webkit-flex; display: flex; } @@ -2688,75 +2899,60 @@ select { display: none; } - .md\:flex-row { - -webkit-flex-direction: row; - flex-direction: row; - } - - .md\:flex-col { - -webkit-flex-direction: column; - flex-direction: column; - } - - .md\:flex-nowrap { - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; + .md\:min-h-full { + min-height: 100%; } - .md\:items-stretch { - -webkit-align-items: stretch; - align-items: stretch; + .md\:w-64 { + width: 16rem; } - .md\:justify-start { - -webkit-justify-content: flex-start; - justify-content: flex-start; + .md\:w-4\/12 { + width: 33.333333%; } - .md\:justify-end { - -webkit-justify-content: flex-end; - justify-content: flex-end; + .md\:w-5\/12 { + width: 41.666667%; } - .md\:justify-between { - -webkit-justify-content: space-between; - justify-content: space-between; + .md\:w-6\/12 { + width: 50%; } - .md\:mt-0 { - margin-top: 0px; + .md\:w-8\/12 { + width: 66.666667%; } - .md\:mt-4 { - margin-top: 1rem; + .md\:min-w-full { + min-width: 100%; } - .md\:mb-4 { - margin-bottom: 1rem; + .md\:flex-row { + flex-direction: row; } - .md\:mt-40 { - margin-top: 10rem; + .md\:flex-col { + flex-direction: column; } - .md\:mt-64 { - margin-top: 16rem; + .md\:flex-nowrap { + flex-wrap: nowrap; } - .md\:ml-64 { - margin-left: 16rem; + .md\:items-stretch { + align-items: stretch; } - .md\:min-h-full { - min-height: 100%; + .md\:justify-start { + justify-content: flex-start; } - .md\:min-w-full { - min-width: 100%; + .md\:justify-end { + justify-content: flex-end; } - .md\:opacity-100 { - opacity: 1; + .md\:justify-between { + justify-content: space-between; } .md\:overflow-hidden { @@ -2781,71 +2977,76 @@ select { padding-top: 0px; } - .md\:pb-2 { - padding-bottom: 0.5rem; + .md\:pt-32 { + padding-top: 8rem; } .md\:pr-12 { padding-right: 3rem; } - .md\:pt-32 { - padding-top: 8rem; + .md\:pb-2 { + padding-bottom: 0.5rem; } - .md\:fixed { - position: fixed; + .md\:text-left { + text-align: left; } - .md\:relative { - position: relative; + .md\:opacity-100 { + opacity: 1; } - .md\:top-0 { - top: 0px; + .md\:shadow-none { + --tw-shadow: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +} - .md\:bottom-0 { - bottom: 0px; +@media (min-width: 1024px) { + .lg\:static { + position: static; } - .md\:left-0 { - left: 0px; + .lg\:order-1 { + order: 1; } - .md\:shadow-none { - --tw-shadow: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + .lg\:order-2 { + order: 2; } - .md\:text-left { - text-align: left; + .lg\:order-3 { + order: 3; } - .md\:w-64 { - width: 16rem; + .lg\:mt-16 { + margin-top: 4rem; } - .md\:w-4\/12 { - width: 33.333333%; + .lg\:-mt-64 { + margin-top: -16rem; } - .md\:w-5\/12 { - width: 41.666667%; + .lg\:mr-1 { + margin-right: 0.25rem; } - .md\:w-6\/12 { - width: 50%; + .lg\:mr-4 { + margin-right: 1rem; } - .md\:w-8\/12 { - width: 66.666667%; + .lg\:mb-0 { + margin-bottom: 0px; } -} -@media (min-width: 1024px) { - .lg\:bg-opacity-0 { - --tw-bg-opacity: 0; + .lg\:ml-auto { + margin-left: auto; + } + + .lg\:-ml-16 { + margin-left: -4rem; } .lg\:block { @@ -2857,7 +3058,6 @@ select { } .lg\:flex { - display: -webkit-flex; display: flex; } @@ -2865,78 +3065,60 @@ select { display: none; } - .lg\:flex-row { - -webkit-flex-direction: row; - flex-direction: row; - } - - .lg\:self-center { - -webkit-align-self: center; - align-self: center; - } - - .lg\:justify-start { - -webkit-justify-content: flex-start; - justify-content: flex-start; - } - - .lg\:order-1 { - -webkit-order: 1; - order: 1; + .lg\:w-auto { + width: auto; } - .lg\:order-2 { - -webkit-order: 2; - order: 2; + .lg\:w-3\/12 { + width: 25%; } - .lg\:order-3 { - -webkit-order: 3; - order: 3; + .lg\:w-4\/12 { + width: 33.333333%; } - .lg\:mb-0 { - margin-bottom: 0px; + .lg\:w-6\/12 { + width: 50%; } - .lg\:mr-1 { - margin-right: 0.25rem; + .lg\:w-8\/12 { + width: 66.666667%; } - .lg\:mr-4 { - margin-right: 1rem; + .lg\:w-9\/12 { + width: 75%; } - .lg\:mt-16 { - margin-top: 4rem; + .lg\:flex-row { + flex-direction: row; } - .lg\:ml-auto { - margin-left: auto; + .lg\:justify-start { + justify-content: flex-start; } - .lg\:-ml-16 { - margin-left: -4rem; + .lg\:self-center { + align-self: center; } - .lg\:-mt-64 { - margin-top: -16rem; + .lg\:bg-opacity-0 { + --tw-bg-opacity: 0; } .lg\:p-10 { padding: 2.5rem; } - .lg\:py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } + .lg\:py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .lg\:pt-0 { padding-top: 0px; } @@ -2957,15 +3139,6 @@ select { padding-bottom: 16rem; } - .lg\:static { - position: static; - } - - .lg\:shadow-none { - --tw-shadow: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } - .lg\:text-left { text-align: left; } @@ -2989,28 +3162,10 @@ select { color: rgba(226, 232, 240, var(--tw-text-opacity)); } - .lg\:w-auto { - width: auto; - } - - .lg\:w-3\/12 { - width: 25%; - } - - .lg\:w-4\/12 { - width: 33.333333%; - } - - .lg\:w-6\/12 { - width: 50%; - } - - .lg\:w-8\/12 { - width: 66.666667%; - } - - .lg\:w-9\/12 { - width: 75%; + .lg\:shadow-none { + --tw-shadow: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } diff --git a/src/components/Cards/CardProfile.js b/src/components/Cards/CardProfile.js index 6dc1a94a1..9a9a42642 100644 --- a/src/components/Cards/CardProfile.js +++ b/src/components/Cards/CardProfile.js @@ -5,34 +5,34 @@ import React from "react"; export default function CardProfile() { return ( <> -
+
-
+
...
-
-
-
- +
+
+
+ 22 Friends
-
- +
+ 10 Photos
-
- +
+ 89 Comments @@ -40,26 +40,26 @@ export default function CardProfile() {
-
-

+
+

Jenna Stones

-
- {" "} +
+ {" "} Los Angeles, California
-
- +
+ Solution Manager - Creative Tim Officer
- + University of Computer Science
-
+
-
+

An artist of considerable range, Jenna the name taken by Melbourne-raised, Brooklyn-based Nick Murphy writes, performs @@ -69,7 +69,7 @@ export default function CardProfile() {

e.preventDefault()} > Show more diff --git a/src/components/Cards/CardSettings.js b/src/components/Cards/CardSettings.js index 4f6eef44a..25fa47923 100644 --- a/src/components/Cards/CardSettings.js +++ b/src/components/Cards/CardSettings.js @@ -10,7 +10,7 @@ export default function CardSettings() {
My account

+ +
+
+
+
+
+ Or sign in with credentials +
+
+
+ +
-
-
+
+ +
+ +
-
-
-
-
- Or sign in with credentials -
- -
- - -
- -
- - -
-
- -
- -
- -
- -
+
- +
- +
); } diff --git a/src/views/auth/Register.js b/src/views/auth/Register.js index 5461f52e5..6eae8975e 100644 --- a/src/views/auth/Register.js +++ b/src/views/auth/Register.js @@ -3,19 +3,19 @@ import React from "react"; export default function Register() { return ( <> -
-
-
-
-
-
-
+
+
+
+
+
+
+
Sign up with
-
+
-
-
+
+
Or sign up with credentials
@@ -91,13 +91,13 @@ export default function Register() { I agree with the{" "} e.preventDefault()} > Privacy Policy @@ -106,9 +106,9 @@ export default function Register() {
-
+