Add info circly styling

thegreenwebfoundation · Jul 28, 2023 · 1f39701 · 1f39701
1 parent 0b90f76
commit 1f39701
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/apps/theme/static_src/src/css/components.css b/apps/theme/static_src/src/css/components.css
@@ -90,4 +90,18 @@
 		@apply mt-1;
 		@apply mr-2;
 	}
+	.info-circle {
+		@apply relative;
+		@apply -top-0.5; 
+		@apply inline-block;
+		@apply leading-none;
+		@apply text-center;
+		@apply h-5;
+		@apply w-5;
+		@apply border-2;
+		@apply border-solid;
+		@apply border-neutral-300;
+		@apply text-neutral-300;
+		@apply rounded-3xl;
+	}
 }
diff --git a/apps/theme/static_src/src/css/custom/forms-custom.css b/apps/theme/static_src/src/css/custom/forms-custom.css
@@ -181,11 +181,25 @@ table[class^="form__table--"] label {
 	@apply text-base;
 }
 .form__directory select {
-	@apply text-neutral-400;
+	@apply text-white;
 	@apply sm:text-2xl;
 	@apply bg-neutral-900;
 	@apply border-green;
 	@apply h-16;
+
+	background-image:
+		linear-gradient(45deg, transparent 50%, white 50%),
+    	linear-gradient(135deg, white 50%, transparent 50%);
+	background-position:
+		calc(100% - 24px) calc(1em + 6px),
+		calc(100% - 16px) calc(1em + 6px);
+	background-size:
+		8px 8px,
+		8px 8px;
+	background-repeat: no-repeat;
+}
+.form__directory select:focus {
+	/* @apply border-neutral-400; */
 }
 .form__directory p {
 	@apply lg:col-span-2;

diff --git a/apps/theme/templates/greencheck/directory_index.html b/apps/theme/templates/greencheck/directory_index.html
@@ -15,7 +15,9 @@ <h1 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h1>
             </form>
 
 			<details class="prose mt-6 md:mt-8 lg:mt-0">
-				<summary class="uppercase text-green">What is this?</summary>
+				<summary class="uppercase text-green">What is this directory for? 
+					<span class="info-circle">&#x2139;</span>
+				</summary>
 				<p class="text-white mt-2">
 					The Green Web Directory is a searchable list which enables people to 
 					quickly find verified green hosting companies. These are organisations that offer