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

Split CSS into base, components, and utilities

Browse source
This commit is contained in:
Oliver Davies 2021-05-05 22:14:20 +01:00
parent 43773b2182
commit 32d09a98db
4 changed files with 160 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
web/themes/custom/opdavies/assets/css/base.pcss Normal file
View file

@ -0,0 +1,61 @@
@layer base {
h1, h2, h3 {
@apply font-bold
}
h1 {
@apply text-3xl leading-normal
}
h2 {
@apply text-2xl leading-normal
}
a {
@apply text-blue-700 no-underline hover:underline
}
img {
@apply max-w-full h-auto
}
iframe {
@apply max-w-full
}
form {
@apply space-y-5
}
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
select,
textarea {
@apply border-gray-400 rounded-lg w-full
}
.form-item,
.form-wrapper {
@apply max-w-md
}
.js-form-type-email,
.js-form-type-password,
.js-form-type-textarea,
.js-form-type-textfield {
label {
@apply block
}
}
}

81
web/themes/custom/opdavies/assets/css/components.pcss Normal file
View file

@ -0,0 +1,81 @@
@layer components {
.sidebar .block {
@apply p-6 rounded bg-gray-100
}
.media--type-image .field--type-image img {
@apply border border-gray-200
}
.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
}
}
.container {
@apply w-full max-w-5xl px-4 mx-auto
}
p.lead {
@apply md:text-lg
}
#block-opdavies-branding img {
@apply h-8 md:h-12
}
.note {
@apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
p a {
@apply underline hover:no-underline
}
}
.recommendation {
.photo img {
@apply rounded-full
}
}
.table {
@apply w-full;
th {
@apply bg-gray-200 text-left
}
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
}
}
.widget {
@apply block mb-6
}
.wrap {
@apply w-full max-w-3xl mx-auto;
&.is-wide {
@apply max-w-5xl
}
}
.hljs {
@apply p-0 bg-inherit
}
}

161
web/themes/custom/opdavies/assets/css/tailwind.pcss
View file

@ -2,162 +2,7 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer base {
h1, h2, h3 {
@apply font-bold
}
@import './base.pcss';
@import './components.pcss';
@import './utilities.pcss';
h1 {
@apply text-3xl leading-normal
}
h2 {
@apply text-2xl leading-normal
}
a {
@apply text-blue-700 no-underline hover:underline
}
img {
@apply max-w-full h-auto
}
iframe {
@apply max-w-full
}
form {
@apply space-y-5
}
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
select,
textarea {
@apply border-gray-400 rounded-lg w-full
}
.form-item,
.form-wrapper {
@apply max-w-md
}
.js-form-type-email,
.js-form-type-password,
.js-form-type-textarea,
.js-form-type-textfield {
label {
@apply block
}
}
}
@layer components {
.sidebar .block {
@apply p-6 rounded bg-gray-100
}
.media--type-image .field--type-image img {
@apply border border-gray-200
}
.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
}
}
.container {
@apply w-full max-w-5xl px-4 mx-auto
}
p.lead {
@apply md:text-lg
}
#block-opdavies-branding img {
@apply h-8 md:h-12
}
.note {
@apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
p a {
@apply underline hover:no-underline
}
}
.recommendation {
.photo img {
@apply rounded-full
}
}
.table {
@apply w-full;
th {
@apply bg-gray-200 text-left
}
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
}
}
.widget {
@apply block mb-6
}
.wrap {
@apply w-full max-w-3xl mx-auto;
&.is-wide {
@apply max-w-5xl
}
}
.hljs {
@apply p-0 bg-inherit
}
}
@layer utilities {
.no-js .js-hidden {
@apply hidden
}
[x-cloak] {
@apply hidden
}
@responsive {
.first-of-type\:mt-0:first-of-type {
@apply mt-0 !important
}
}
}

15
web/themes/custom/opdavies/assets/css/utilities.pcss Normal file
View file

@ -0,0 +1,15 @@
@layer utilities {
.no-js .js-hidden {
@apply hidden
}
[x-cloak] {
@apply hidden
}
@responsive {
.first-of-type\:mt-0:first-of-type {
@apply mt-0 !important
}
}
}