sysadminix/rentalcalculator
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RC-7: correct theme styles

Browse Source
This commit is contained in:
evgeniywas
2023-08-06 15:26:52 +01:00
parent 09d5bac9a7
commit d944147a77
3 changed files with 122 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
public/assets/tailwind-base.css
View File

@@ -1,4 +1,3 @@
/** /**
* HEY HO * HEY HO
*/ */
@@ -14,15 +13,15 @@
*, *,
::before, ::before,
::after { ::after {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */ border-width: 0; /* 2 */
border-style: solid; /* 2 */ border-style: solid; /* 2 */
border-color: #EEEEEE; /* 2 */ border-color: #eeeeee; /* 2 */
} }
::before, ::before,
::after { ::after {
--tw-content: ''; --tw-content: '';
} }
/* /*
@@ -33,10 +32,12 @@
*/ */
html { html {
line-height: 1.5; /* 1 */ line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */ tab-size: 4; /* 3 */
font-family: Inter var, Roboto, -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"; /* 4 */ font-family: Inter var, Roboto, -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'; /* 4 */
} }
/* /*
@@ -45,8 +46,8 @@ html {
*/ */
body { body {
margin: 0; /* 1 */ margin: 0; /* 1 */
line-height: inherit; /* 2 */ line-height: inherit; /* 2 */
} }
/* /*
@@ -56,9 +57,9 @@ body {
*/ */
hr { hr {
height: 0; /* 1 */ height: 0; /* 1 */
color: inherit; /* 2 */ color: inherit; /* 2 */
border-top-width: 1px; /* 3 */ border-top-width: 1px; /* 3 */
} }
/* /*
@@ -66,7 +67,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
*/ */
abbr:where([title]) { abbr:where([title]) {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
/* /*
@@ -79,8 +80,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
/* /*
@@ -88,8 +89,8 @@ Reset links to optimize for opt-in styling instead of opt-out.
*/ */
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
} }
/* /*
@@ -98,7 +99,7 @@ Add the correct font weight in Edge and Safari.
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
/* /*
@@ -110,8 +111,9 @@ code,
kbd, kbd,
samp, samp,
pre { pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
font-size: 1em; /* 2 */ 'Courier New', monospace; /* 1 */
font-size: 1em; /* 2 */
} }
/* /*
@@ -119,7 +121,7 @@ Add the correct font size in all browsers.
*/ */
small { small {
font-size: 80%; font-size: 80%;
} }
/* /*
@@ -128,18 +130,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
/* /*
@@ -149,9 +151,9 @@ sup {
*/ */
table { table {
text-indent: 0; /* 1 */ text-indent: 0; /* 1 */
border-color: inherit; /* 2 */ border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */ border-collapse: collapse; /* 3 */
} }
/* /*
@@ -165,12 +167,12 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: inherit; /* 1 */ font-family: inherit; /* 1 */
font-size: 100%; /* 1 */ font-size: 100%; /* 1 */
line-height: inherit; /* 1 */ line-height: inherit; /* 1 */
color: inherit; /* 1 */ color: inherit; /* 1 */
margin: 0; /* 2 */ margin: 0; /* 2 */
padding: 0; /* 3 */ padding: 0; /* 3 */
} }
/* /*
@@ -179,7 +181,7 @@ Remove the inheritance of text transform in Edge and Firefox.
button, button,
select { select {
text-transform: none; text-transform: none;
} }
/* /*
@@ -191,9 +193,9 @@ button,
[type='button'], [type='button'],
[type='reset'], [type='reset'],
[type='submit'] { [type='submit'] {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */ background-color: transparent; /* 2 */
background-image: none; /* 2 */ background-image: none; /* 2 */
} }
/* /*
@@ -201,7 +203,7 @@ Use the modern Firefox focus style for all focusable elements.
*/ */
:-moz-focusring { :-moz-focusring {
outline: auto; outline: auto;
} }
/* /*
@@ -209,7 +211,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
*/ */
:-moz-ui-invalid { :-moz-ui-invalid {
box-shadow: none; box-shadow: none;
} }
/* /*
@@ -217,7 +219,7 @@ Add the correct vertical alignment in Chrome and Firefox.
*/ */
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
/* /*
@@ -226,7 +228,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
::-webkit-inner-spin-button, ::-webkit-inner-spin-button,
::-webkit-outer-spin-button { ::-webkit-outer-spin-button {
height: auto; height: auto;
} }
/* /*
@@ -235,8 +237,8 @@ Correct the cursor style of increment and decrement buttons in Safari.
*/ */
[type='search'] { [type='search'] {
-webkit-appearance: textfield; /* 1 */ -webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px; /* 2 */
} }
/* /*
@@ -244,7 +246,7 @@ Remove the inner padding in Chrome and Safari on macOS.
*/ */
::-webkit-search-decoration { ::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
/* /*
@@ -253,8 +255,8 @@ Remove the inner padding in Chrome and Safari on macOS.
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button; /* 1 */
font: inherit; /* 2 */ font: inherit; /* 2 */
} }
/* /*
@@ -262,7 +264,7 @@ Add the correct display in Chrome and Safari.
*/ */
summary { summary {
display: list-item; display: list-item;
} }
/* /*
@@ -282,24 +284,24 @@ hr,
figure, figure,
p, p,
pre { pre {
margin: 0; margin: 0;
} }
fieldset { fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
legend { legend {
padding: 0; padding: 0;
} }
ol, ol,
ul, ul,
menu { menu {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* /*
@@ -307,7 +309,7 @@ Prevent resizing textareas horizontally by default.
*/ */
textarea { textarea {
resize: vertical; resize: vertical;
} }
/* /*
@@ -317,8 +319,8 @@ textarea {
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
opacity: 1; /* 1 */ opacity: 1; /* 1 */
color: #BDBDBD; /* 2 */ color: #bdbdbd; /* 2 */
} }
/* /*
@@ -326,8 +328,8 @@ Set the default cursor for buttons.
*/ */
button, button,
[role="button"] { [role='button'] {
cursor: pointer; cursor: pointer;
} }
/* /*
@@ -335,7 +337,7 @@ Make sure disabled buttons don't get the pointer cursor.
*/ */
:disabled { :disabled {
cursor: default; cursor: default;
} }
/* /*
@@ -352,8 +354,8 @@ audio,
iframe, iframe,
embed, embed,
object { object {
display: block; /* 1 */ display: block; /* 1 */
vertical-align: middle; /* 2 */ vertical-align: middle; /* 2 */
} }
/* /*
@@ -362,8 +364,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
img, img,
video { video {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/* /*
@@ -371,50 +373,52 @@ Ensure the default browser behavior of the `hidden` attribute.
*/ */
[hidden] { [hidden] {
display: none; display: none;
} }
*, ::before, ::after { *,
--tw-translate-x: 0; ::before,
--tw-translate-y: 0; ::after {
--tw-rotate: 0; --tw-translate-x: 0;
--tw-skew-x: 0; --tw-translate-y: 0;
--tw-skew-y: 0; --tw-rotate: 0;
--tw-scale-x: 1; --tw-skew-x: 0;
--tw-scale-y: 1; --tw-skew-y: 0;
--tw-pan-x: ''; --tw-scale-x: 1;
--tw-pan-y: ''; --tw-scale-y: 1;
--tw-pinch-zoom: ''; --tw-pan-x: '';
--tw-scroll-snap-strictness: proximity; --tw-pan-y: '';
--tw-ordinal: ''; --tw-pinch-zoom: '';
--tw-slashed-zero: ''; --tw-scroll-snap-strictness: proximity;
--tw-numeric-figure: ''; --tw-ordinal: '';
--tw-numeric-spacing: ''; --tw-slashed-zero: '';
--tw-numeric-fraction: ''; --tw-numeric-figure: '';
--tw-ring-inset: ''; --tw-numeric-spacing: '';
--tw-ring-offset-width: 0px; --tw-numeric-fraction: '';
--tw-ring-offset-color: #fff; --tw-ring-inset: '';
--tw-ring-color: rgb(33 150 243 / 0.5); --tw-ring-offset-width: 0px;
--tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-color: #fff;
--tw-ring-shadow: 0 0 #0000; --tw-ring-color: rgb(33 150 243 / 0.5);
--tw-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000; --tw-ring-shadow: 0 0 #0000;
--tw-blur: ''; --tw-shadow: 0 0 #0000;
--tw-brightness: ''; --tw-shadow-colored: 0 0 #0000;
--tw-contrast: ''; --tw-blur: '';
--tw-grayscale: ''; --tw-brightness: '';
--tw-hue-rotate: ''; --tw-contrast: '';
--tw-invert: ''; --tw-grayscale: '';
--tw-saturate: ''; --tw-hue-rotate: '';
--tw-sepia: ''; --tw-invert: '';
--tw-drop-shadow: ''; --tw-saturate: '';
--tw-backdrop-blur: ''; --tw-sepia: '';
--tw-backdrop-brightness: ''; --tw-drop-shadow: '';
--tw-backdrop-contrast: ''; --tw-backdrop-blur: '';
--tw-backdrop-grayscale: ''; --tw-backdrop-brightness: '';
--tw-backdrop-hue-rotate: ''; --tw-backdrop-contrast: '';
--tw-backdrop-invert: ''; --tw-backdrop-grayscale: '';
--tw-backdrop-opacity: ''; --tw-backdrop-hue-rotate: '';
--tw-backdrop-saturate: ''; --tw-backdrop-invert: '';
--tw-backdrop-sepia: ''; --tw-backdrop-opacity: '';
--tw-backdrop-saturate: '';
--tw-backdrop-sepia: '';
} }

2
src/styles/app-base.css
View File

@@ -24,7 +24,7 @@ html {
body { body {
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: normal;
overflow-x: hidden; overflow-x: hidden;
font-feature-settings: 'salt'; font-feature-settings: 'salt';
} }

3
tailwind.config.js
View File

@@ -53,6 +53,7 @@ module.exports = {
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
'home-welcome': 'url(/src/assets/images/welcome-background.webp)',
}, },
backgroundOpacity: ({ theme }) => theme('opacity'), backgroundOpacity: ({ theme }) => theme('opacity'),
backgroundPosition: { backgroundPosition: {
@@ -130,6 +131,7 @@ module.exports = {
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
none: 'none', none: 'none',
light: '1px 1px 5px 0px rgba(0, 0, 0, 0.1)',
active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)', active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)',
hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)', hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)',
0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)', 0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)',
@@ -1258,6 +1260,7 @@ module.exports = {
'5xl': '102.4rem', '5xl': '102.4rem',
'6xl': '115.2rem', '6xl': '115.2rem',
'7xl': '128rem', '7xl': '128rem',
'8xl': '142rem',
px: '1px', px: '1px',
0: '0px', 0: '0px',
0.5: '0.05rem', 0.5: '0.05rem',