opdavies/oliverdavies.uk-drupal-old
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Wrap all custom components in layers

Browse source
This commit is contained in:
Oliver Davies 2020-12-17 01:51:53 +00:00
parent 4cfc932f77
commit 9fba0b7292
11 changed files with 70 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/themes/custom/opdavies/assets/css/components/block.pcss
View file

@ -1,3 +1,5 @@
.sidebar .block {
@apply p-6 rounded bg-gray-100 dark:bg-gray-750
@layer components {
.sidebar .block {
@apply p-6 rounded bg-gray-100 dark:bg-gray-750
}
}

16
web/themes/custom/opdavies/assets/css/components/button.pcss
View file

@ -1,10 +1,12 @@
.button {
@apply py-2 px-3 inline-block border border-blue-600;
@apply text-sm text-white no-underline bg-blue-600 rounded;
@layer components {
.button {
@apply py-2 px-3 inline-block border border-blue-600;
@apply text-sm text-white no-underline bg-blue-600 rounded;
&:active,
&:focus,
&:hover {
@apply bg-white text-blue-600
&:active,
&:focus,
&:hover {
@apply bg-white text-blue-600
}
}
}

6
web/themes/custom/opdavies/assets/css/components/container.pcss
View file

@ -1,3 +1,5 @@
.container {
@apply w-full max-w-5xl px-4 mx-auto
@layer components {
.container {
@apply w-full max-w-5xl px-4 mx-auto
}
}

6
web/themes/custom/opdavies/assets/css/components/lead.pcss
View file

@ -1,5 +1,5 @@
p.lead {
@screen md {
@apply text-lg
@layer components {
p.lead {
@apply md:text-lg
}
}

8
web/themes/custom/opdavies/assets/css/components/logo.pcss
View file

@ -1,7 +1,5 @@
#block-opdavies-branding img {
@apply h-8;
@screen md {
@apply h-12
@layer components {
#block-opdavies-branding img {
@apply h-8 md:h-12
}
}

16
web/themes/custom/opdavies/assets/css/components/note.pcss
View file

@ -1,11 +1,13 @@
.note {
@apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark;
@layer components {
.note {
@apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark;
* {
@apply dark:text-gray-700
}
* {
@apply dark:text-gray-700
}
p a {
@apply underline hover:no-underline
p a {
@apply underline hover:no-underline
}
}
}

8
web/themes/custom/opdavies/assets/css/components/recommendation.pcss
View file

@ -1,5 +1,7 @@
.recommendation {
.photo img {
@apply rounded-full
@layer components {
.recommendation {
.photo img {
@apply rounded-full
}
}
}

28
web/themes/custom/opdavies/assets/css/components/table.pcss
View file

@ -1,18 +1,20 @@
.table {
@apply w-full;
@layer components {
.table {
@apply w-full;
th {
@apply bg-gray-200 text-left
th {
@apply bg-gray-200 text-left
}
th,
td {
@apply px-4 py-2 border border-solid border-gray-200
}
}
th,
td {
@apply px-4 py-2 border border-solid border-gray-200
}
}
table.is-striped {
tbody > tr:not(:nth-child(odd)) td {
@apply bg-gray-100
table.is-striped {
tbody > tr:not(:nth-child(odd)) td {
@apply bg-gray-100
}
}
}

14
web/themes/custom/opdavies/assets/css/components/video.pcss
View file

@ -1,9 +1,11 @@
.video-full {
@apply w-full relative;
padding-top: 56.25%;
@layer components {
.video-full {
@apply w-full relative;
padding-top: 56.25%;
iframe,
embed {
@apply absolute h-full left-0 top-0 w-full
iframe,
embed {
@apply absolute h-full left-0 top-0 w-full
}
}
}

6
web/themes/custom/opdavies/assets/css/components/widget.pcss
View file

@ -1,3 +1,5 @@
.widget {
@apply block mb-6
@layer components {
.widget {
@apply block mb-6
}
}

10
web/themes/custom/opdavies/assets/css/components/wrap.pcss
View file

@ -1,7 +1,9 @@
.wrap {
@apply w-full max-w-3xl mx-auto;
@layer components {
.wrap {
@apply w-full max-w-3xl mx-auto;
&.is-wide {
@apply max-w-5xl
&.is-wide {
@apply max-w-5xl
}
}
}