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

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

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

@ -1,3 +1,5 @@
.sidebar .block { @layer components {
@apply p-6 rounded bg-gray-100 dark:bg-gray-750 .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 { @layer components {
@apply py-2 px-3 inline-block border border-blue-600; .button {
@apply text-sm text-white no-underline bg-blue-600 rounded; @apply py-2 px-3 inline-block border border-blue-600;
@apply text-sm text-white no-underline bg-blue-600 rounded;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
@apply bg-white text-blue-600 @apply bg-white text-blue-600
}
} }
} }

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

@ -1,3 +1,5 @@
.container { @layer components {
@apply w-full max-w-5xl px-4 mx-auto .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 { @layer components {
@screen md { p.lead {
@apply text-lg @apply md:text-lg
} }
} }

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

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

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

@ -1,11 +1,13 @@
.note { @layer components {
@apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark; .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 { p a {
@apply underline hover:no-underline @apply underline hover:no-underline
}
} }
} }

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

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

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

@ -1,18 +1,20 @@
.table { @layer components {
@apply w-full; .table {
@apply w-full;
th { th {
@apply bg-gray-200 text-left @apply bg-gray-200 text-left
}
th,
td {
@apply px-4 py-2 border border-solid border-gray-200
}
} }
th, table.is-striped {
td { tbody > tr:not(:nth-child(odd)) td {
@apply px-4 py-2 border border-solid border-gray-200 @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 { @layer components {
@apply w-full relative; .video-full {
padding-top: 56.25%; @apply w-full relative;
padding-top: 56.25%;
iframe, iframe,
embed { embed {
@apply absolute h-full left-0 top-0 w-full @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 { @layer components {
@apply block mb-6 .widget {
@apply block mb-6
}
} }

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

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