renaming css prefixes (#32)

Ulleri-Tech · Mar 1, 2023 · d4fe435 · d4fe435
1 parent 48758f0
commit d4fe435
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ulleritech/nepali-date-picker",
-	"version": "1.4.2",
+	"version": "1.4.3",
 	"description": "Nepali Date Picker",
 	"author": {
 		"name": "Ulleri Tech",

diff --git a/src/lib/ad-picker/CalendarAD.svelte b/src/lib/ad-picker/CalendarAD.svelte
@@ -116,9 +116,9 @@
 	}
 </script>
 
-<div class="main">
-	<div class="header">
-		<span class="header-wrapper">
+<div class="ut--div--main">
+	<div class="ut--header ">
+		<span class="ut--header-wrapper">
 			{new Date(selectedYear, selectedMonth - 1, 1).toLocaleString('en-ca', {
 				month: 'long',
 				year: 'numeric'
@@ -127,12 +127,12 @@
 		<ShiftAdMonth {restrictfuture} bind:selectedMonth bind:selectedYear {updateRows} />
 	</div>
 
-	<table class="calender-body">
+	<table class="ut--calender-body">
 		<thead>
 			<tr>
 				{#each shortDays as day}
 					<th>
-						<div class="text-day">
+						<div class="ut--p--text-day">
 							{day}
 						</div>
 					</th>
@@ -145,21 +145,22 @@
 					{#if isValidDate(value)}
 						{#each col as i}
 							<td>
-								<div class="month-days">
+								<div class="ut--div--month-days">
 									{#if i > 0 && i <= currentNumberOfDays}
 										{#if i === selectedDay && selectedMonth == new Date(value).getMonth() + 1}
 											<button
 												type="button"
 												on:click={() => {
 													selectDate(selectedYear, selectedMonth, i);
 												}}
-												class="selected-day"
+												class="ut--button--selected-day ut--button--basic"
 												class:font-extrabold={inCurrentMonth && currentDay === i}>{i}</button
 											>
 										{:else}
-											<p class="text-day">
+											<p class="ut--p--text-day">
 												<button
 													style="border-style: none;"
+													class="ut--button--basic"
 													style:font-weight={inCurrentMonth && currentDay === i ? '800' : '400'}
 													on:click={() => {
 														selectDate(selectedYear, selectedMonth, i);
@@ -170,9 +171,10 @@
 											</p>
 										{/if}
 									{:else}
-										<p class="text-day">
+										<p class="ut--p--text-day">
 											<button
 												type="button"
+												class="ut--button--basic"
 												style="border-style: none; color:gray;"
 												on:click={() => {
 													i < 0
@@ -193,18 +195,18 @@
 		</tbody>
 	</table>
 
-	<div class="button-wrapper">
-		<button class="select-today" on:click={() => selectToday()} type="button">
+	<div style="width:100%">
+		<button class="ut--button--select-today" on:click={() => selectToday()} type="button">
 			Select Today
 		</button>
 	</div>
 </div>
 
 <style>
-	.calender-body {
+	.ut--calender-body {
 		width: 240px;
 	}
-	.main {
+	.ut--div--main {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -217,7 +219,7 @@
 		padding: 0.5rem;
 		margin-top: 0.25rem;
 	}
-	button {
+	.ut--button--basic {
 		background-color: #ffffff;
 		color: inherit;
 		border: none;
@@ -226,25 +228,25 @@
 		font: inherit;
 		cursor: pointer;
 	}
-	.header {
+	.ut--header {
 		display: flex;
 		width: 100%;
 		padding: 0.5rem 0rem 0rem 0rem;
 		justify-content: space-between;
 	}
-	.header-wrapper {
+	.ut--header-wrapper {
 		color: #1f2937;
 		font-weight: 700;
 		padding: 0 0.5rem;
 	}
-	.text-day {
+	.ut--p--text-day {
 		color: #1f2937;
 		font-weight: 500;
 		text-align: center;
 		background-color: #ffffff;
 	}
 
-	.selected-day {
+	.ut--button--selected-day {
 		display: flex;
 		background-color: #4338ca;
 		color: #ffffff;
@@ -254,26 +256,23 @@
 		height: 1.5rem;
 		border-radius: 0.25rem;
 	}
-	.selected-day:hover {
+	.ut--button--selected-day:hover {
 		background-color: #6366f1;
 	}
-	.month-days {
+	.ut--div--month-days {
 		display: flex;
 		justify-content: center;
 		width: 100%;
 		cursor: pointer;
 		padding: 8px;
 	}
-	.select-today {
+	.ut--button--select-today {
 		background-color: #4338ca;
 		color: white;
 		width: 100%;
 		padding: 0.25rem 0;
 	}
-	.select-today:hover {
+	.ut--button--select-today:hover {
 		background-color: #6b62c7;
 	}
-	.button-wrapper {
-		width: 100%;
-	}
 </style>
diff --git a/src/lib/ad-picker/DatePicker.svelte b/src/lib/ad-picker/DatePicker.svelte
@@ -14,10 +14,10 @@
 	let selectedDate: string;
 </script>
 
-<main>
-	<div class="date-container">
+<main class="ut---main">
+	<div class="ut--date-container">
 		{#if !hidelabel}
-			<label for="date" class="date-label">{label}</label>
+			<label for="date" class="ut--date-label">{label}</label>
 		{/if}
 		<div
 			on:keydown={() => {
@@ -26,10 +26,16 @@
 			on:click={() => {
 				isOpenCalendar = !isOpenCalendar;
 			}}
-			class="date-select-box"
+			class="ut--date-select-box"
 		>
-			<input {placeholder} type="text" bind:value={selectedDate} class="dateInputText" disabled />
-			<div class="date-icon">
+			<input
+				{placeholder}
+				type="text"
+				bind:value={selectedDate}
+				class="ut--dateInputText"
+				disabled
+			/>
+			<div class="ut--date-icon">
 				<svg
 					width="14"
 					height="20"
@@ -54,7 +60,7 @@
 			style="position:relative; width:100px; z-index: {zIndex}"
 			style:visibility={isOpenCalendar ? 'visible' : 'hidden'}
 		>
-			<div class="calender">
+			<div class="ut--calender">
 				<CalendarAD
 					bind:open={isOpenCalendar}
 					bind:value
@@ -127,47 +133,49 @@
 			-webkit-border-vertical-spacing: 0;
 		}
 	}
-	main {
+	.ut---main {
 		width: 140px;
 	}
-	.dateInputText {
+	.ut--dateInputText {
 		width: 100px;
 		background-color: white;
 		color: #161616;
+		height: 2rem;
+		text-align: center;
+	}
+
+	.ut--dateInputText:focus {
+		outline: none;
+	}
+	.ut--dateInputText:disabled {
+		color: #161616;
 	}
-	.date-container {
+	.ut--date-container {
 		display: flex;
 		flex-direction: column;
 		background-color: white;
 	}
-	.date-label {
+	.ut--date-label {
 		text-align: left;
 		margin-bottom: 0.5rem;
 		height: 1rem;
 		font-weight: 600;
 	}
-	.date-select-box {
+	.ut--date-select-box {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 2.5rem;
 		background-color: white;
 		outline: 0.5px solid #6b7280;
+		outline-offset: -2px;
 	}
-	.date-icon {
+	.ut--date-icon {
 		padding-right: 0.75rem;
 		display: flex;
 	}
-	input {
-		background-color: transparent;
-		border: none;
-		height: 2rem;
-		text-align: center;
-	}
-	input:focus {
-		outline: none;
-	}
-	.calender {
+
+	.ut--calender {
 		position: absolute;
 		left: 0;
 	}

diff --git a/src/lib/ad-picker/ShiftADMonth.svelte b/src/lib/ad-picker/ShiftADMonth.svelte
@@ -30,7 +30,12 @@
 </script>
 
 <div>
-	<button class="chevron" type="button" on:click={previousMonth} aria-label="calendar backward">
+	<button
+		class="ut--button--chevron"
+		type="button"
+		on:click={previousMonth}
+		aria-label="calendar backward"
+	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			class="icon icon-tabler icon-tabler-chevron-left"
@@ -68,10 +73,10 @@
 </div>
 
 <style>
-	.chevron:hover {
+	.ut--button--chevron:hover {
 		color: gray;
 	}
-	.chevron:disabled {
+	.ut--button--chevron:disabled {
 		color: gray;
 	}
 </style>