From 590cc51ec888c541235127f9a049f72ebb3f5803 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Sat, 25 Feb 2023 22:43:11 -0800 Subject: [PATCH] Migrate some CSS to nested --- .../(posts)/components/tabs/tabs.module.css | 14 +++---- .../formatting-icons.module.css | 27 +++++-------- .../new/components/title/title.module.css | 4 +- .../(drift)/admin/components/table.module.css | 6 +-- .../components/sections/api-keys.module.css | 30 +++++++------- src/app/components/card/card.module.css | 11 +++--- src/app/components/layout/page.module.css | 12 +++--- .../components/post-list/list-item.module.css | 39 ++++++++++--------- .../components/post-list/post-list.module.css | 33 ++++++++-------- 9 files changed, 82 insertions(+), 94 deletions(-) diff --git a/src/app/(drift)/(posts)/components/tabs/tabs.module.css b/src/app/(drift)/(posts)/components/tabs/tabs.module.css index 903d44d7..fdcd6b78 100644 --- a/src/app/(drift)/(posts)/components/tabs/tabs.module.css +++ b/src/app/(drift)/(posts)/components/tabs/tabs.module.css @@ -8,6 +8,12 @@ flex-direction: row; justify-content: space-between; align-items: center; + + @media (max-width: 600px) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } } .list { @@ -52,11 +58,3 @@ color: var(--darkest-gray); box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor; } - -@media (max-width: 600px) { - .listWrapper { - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - } -} \ No newline at end of file diff --git a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css index 22ecdd48..029f62ec 100644 --- a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css +++ b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css @@ -1,23 +1,16 @@ .actionWrapper { position: relative; - z-index: 1; -} + z-index: 1; -.actionWrapper .actions { + .actions { + /* small screens, top: 0 */ + @media (max-width: 767px) { + top: 0; + } -} - -/* small screens, top: 0 */ -@media (max-width: 767px) { - .actionWrapper .actions { - top: 0; - } -} - - -@media (max-width: 768px) { - .actionWrapper .actions { - position: relative; - margin-left: 0 !important; + @media (max-width: 768px) { + position: relative; + margin-left: 0 !important; + } } } diff --git a/src/app/(drift)/(posts)/new/components/title/title.module.css b/src/app/(drift)/(posts)/new/components/title/title.module.css index 4d1ec8f6..4710d75f 100644 --- a/src/app/(drift)/(posts)/new/components/title/title.module.css +++ b/src/app/(drift)/(posts)/new/components/title/title.module.css @@ -4,10 +4,8 @@ align-items: center; justify-content: space-between; gap: inherit; -} -@media screen and (max-width: 650px) { - .title { + @media screen and (max-width: 650px) { align-items: flex-start; flex-direction: column; } diff --git a/src/app/(drift)/admin/components/table.module.css b/src/app/(drift)/admin/components/table.module.css index 03d85ffa..2bdc29de 100644 --- a/src/app/(drift)/admin/components/table.module.css +++ b/src/app/(drift)/admin/components/table.module.css @@ -2,10 +2,10 @@ width: 100%; display: block; white-space: nowrap; -} -.table thead th { - font-weight: bold; + thead th { + font-weight: bold; + } } .id { diff --git a/src/app/(drift)/settings/components/sections/api-keys.module.css b/src/app/(drift)/settings/components/sections/api-keys.module.css index 36cbffc5..534c982f 100644 --- a/src/app/(drift)/settings/components/sections/api-keys.module.css +++ b/src/app/(drift)/settings/components/sections/api-keys.module.css @@ -4,22 +4,22 @@ gap: var(--gap); max-width: 350px; margin-top: var(--gap); -} + /* fieldset contains an input and button. I want button to be small next to input */ -/* fieldset contains an input and button. I want button to be small next to input */ -.form .fieldset { - display: flex; - flex-direction: row; - gap: var(--gap); - border: none; - padding: 0; - margin: 0; -} + .fieldset { + display: flex; + flex-direction: row; + gap: var(--gap); + border: none; + padding: 0; + margin: 0; + } -.tokens { - margin-top: var(--gap); -} + .tokens { + margin-top: var(--gap); -.tokens table thead th { - text-align: left; + table thead th { + text-align: left; + } + } } diff --git a/src/app/components/card/card.module.css b/src/app/components/card/card.module.css index 75c50b2d..21c3d3b3 100644 --- a/src/app/components/card/card.module.css +++ b/src/app/components/card/card.module.css @@ -5,11 +5,10 @@ border: 1px solid var(--light-gray); width: 100%; height: 100%; -} - -.card .content { - padding: var(--gap); - width: 100%; - height: auto; + .content { + padding: var(--gap); + width: 100%; + height: auto; + } } diff --git a/src/app/components/layout/page.module.css b/src/app/components/layout/page.module.css index 313e3708..894e203b 100644 --- a/src/app/components/layout/page.module.css +++ b/src/app/components/layout/page.module.css @@ -6,15 +6,13 @@ width: 100%; height: auto; margin: 0 auto; + + /* 55rem == --main-content */ + @media screen and (max-width: 55rem) { + padding: 0 1rem; + } } .forSites { margin-top: var(--gap); } - -/* 55rem == --main-content */ -@media screen and (max-width: 55rem) { - .page { - padding: 0 1rem; - } -} diff --git a/src/app/components/post-list/list-item.module.css b/src/app/components/post-list/list-item.module.css index c24274b2..ff8dc82b 100644 --- a/src/app/components/post-list/list-item.module.css +++ b/src/app/components/post-list/list-item.module.css @@ -46,26 +46,27 @@ } } -.files li { - display: flex; - align-items: center; - gap: var(--gap); - padding: var(--gap-quarter); -} +.files { + li { + display: flex; + align-items: center; + gap: var(--gap); + padding: var(--gap-quarter); + } -.files li a { - display: flex; - align-items: center; - gap: var(--gap); - color: var(--darker-gray); -} + li a { + display: flex; + align-items: center; + gap: var(--gap); + color: var(--darker-gray); + } -.files li a:hover { - color: var(--link); - text-decoration: none; -} + li a:hover { + color: var(--link); + text-decoration: none; + } -.files li a svg { - color: inherit; + li a svg { + color: inherit; + } } - diff --git a/src/app/components/post-list/post-list.module.css b/src/app/components/post-list/post-list.module.css index d59f02e4..d5df334d 100644 --- a/src/app/components/post-list/post-list.module.css +++ b/src/app/components/post-list/post-list.module.css @@ -1,15 +1,22 @@ -.container ul { - list-style: none; - padding: 0; - margin: 0; -} +.container { + ul { + list-style: none; + padding: 0; + margin: 0; + margin-top: 0.5rem; -.container > * { - width: 100%; -} + @media (max-width: 768px) { + padding: 0 var(--gap); + } + } -.container ul li { - padding: 0.5rem 0; + ul li { + padding: 0.5rem 0; + } + + > * { + width: 100%; + } } .postHeader { @@ -31,9 +38,3 @@ gap: var(--gap-half); margin-bottom: var(--gap); } - -@media (max-width: 768px) { - .container ul { - padding: 0 var(--gap); - } -}