From 395a3e45f67a1ee5792ef39463cf92745cddb6cd Mon Sep 17 00:00:00 2001 From: evazion Date: Tue, 11 Oct 2022 17:31:19 -0500 Subject: [PATCH] css: add more utility classes. --- app/javascript/src/styles/common/utilities.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss index 3be0ac551..8e236eed1 100644 --- a/app/javascript/src/styles/common/utilities.scss +++ b/app/javascript/src/styles/common/utilities.scss @@ -24,7 +24,9 @@ $spacer: 0.25rem; /* 4px */ .flex { display: flex; } .grid { display: grid; } +.text-left { text-align: left; } .text-center { text-align: center; } +.text-right { text-align: right; } .text-muted { color: var(--muted-text-color); } .text-xxs { font-size: var(--text-xxs); } @@ -43,6 +45,8 @@ $spacer: 0.25rem; /* 4px */ white-space: nowrap; } +.overflow-auto { overflow: auto; } + .break-all { word-break: break-all; } .whitespace-nowrap { white-space: nowrap; } @@ -56,6 +60,7 @@ $spacer: 0.25rem; /* 4px */ .absolute { position: absolute; } .relative { position: relative; } +.sticky { position: sticky; } .top-0\.5 { top: 0.5 * $spacer; } .bottom-0\.5 { bottom: 0.5 * $spacer; } @@ -136,7 +141,9 @@ $spacer: 0.25rem; /* 4px */ .w-sm { width: 24rem; } .w-md { width: 28rem; } .w-1\/4 { width: 25%; } +.w-1\/2 { width: 50%; } .w-full { width: 100%; } +.w-48px { width: 48px; } .w-150px { width: 150px; } .w-180px { width: 180px; } .w-225px { width: 225px; } @@ -144,8 +151,10 @@ $spacer: 0.25rem; /* 4px */ .w-360px { width: 360px; } .max-w-full { max-width: 100%; } +.max-h-full { max-height: 100%; } -.h-auto { height: auto; } +.h-auto { height: auto; } +.h-inherit { height: inherit; } .h-1 { height: 1 * $spacer; } .h-3 { height: 3 * $spacer; } .h-4 { height: 4 * $spacer; } @@ -193,6 +202,7 @@ $spacer: 0.25rem; /* 4px */ .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } +.items-stretch { align-items: stretch; } .justify-items-center { justify-items: center; } .justify-center { justify-content: center; } @@ -200,6 +210,8 @@ $spacer: 0.25rem; /* 4px */ .justify-end { justify-content: flex-end; } .self-start { align-self: flex-start; } +.self-center { align-self: center; } +.self-stretch { align-self: stretch; } .float-right { float: right; }