From 381aa88683dca4adb88af7d0aba80bc63fe62314 Mon Sep 17 00:00:00 2001
From: rohitn <rohitn@adobe.com>
Date: Sat, 2 Mar 2024 23:15:50 +0530
Subject: [PATCH] AF-DateInputField Component

---
 src/components/dateinput/_dateinput.scss | 104 +++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 src/components/dateinput/_dateinput.scss

diff --git a/src/components/dateinput/_dateinput.scss b/src/components/dateinput/_dateinput.scss
new file mode 100644
index 0000000..bbe25ff
--- /dev/null
+++ b/src/components/dateinput/_dateinput.scss
@@ -0,0 +1,104 @@
+/*******************************************************************************
+ * Copyright 2024 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+.cmp-adaptiveform-dateinput {
+  color: $dark-gray;
+  font-size: $font-md;
+  margin: 0.25rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.cmp-adaptiveform-dateinput__widget {
+  margin-top: $label-top-margin;
+  font-size: $font-md;
+  color: $dark-gray;
+  padding: 0 5px;
+  display: flex;
+  gap: $field-padding-left;
+}
+
+.cmp-adaptiveform-dateinput__widget > div {
+  display: flex;
+  flex-direction: column;
+}
+.cmp-adaptiveform-dateinput__label {
+}
+.cmp-adaptiveform-dateinput__label-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cmp-adaptiveform-dateinput__longdescription {
+  color: $light-gray;
+  background-color: $very-light-gray;
+  font-size: $font-sm;
+  margin-top: $label-top-margin;
+  margin-bottom: 5px;
+  padding: $field-padding-left;
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.cmp-adaptiveform-dateinput__shortdescription {
+  font-size: $font-sm;
+  margin-top: $label-top-margin;
+}
+
+.cmp-adaptiveform-dateinput__questionmark {
+  display: inline-block;
+  width: $font-md;
+  height: $font-md;
+  border-radius: 9px;
+  background: url(./resources/images/question.svg) center center / cover
+      no-repeat,
+    $light-gray;
+  cursor: pointer;
+  // below properties for backward compatibility
+  position: absolute;
+  right: 20px;
+}
+.cmp-adaptiveform-dateinput__errormessage {
+  color: $error;
+  font-size: $font-sm;
+  margin-top: $label-top-margin;
+}
+.cmp-adaptiveform-dateinput[data-cmp-valid="false"] {
+  background: rgb(235 60 54 / 5%);
+  border: 0 solid $error;
+  border-inline-start-width: 4px;
+  padding-inline-start: 5px;
+}
+.cmp-adaptiveform-dateinput[data-cmp-valid="true"] {
+  border: 0 solid $success;
+  border-inline-start-width: 4px;
+  padding-inline-start: 5px;
+}
+.textarea.cmp-adaptiveform-dateinput__widget {
+  height: 80px;
+}
+.cmp-adaptiveform-dateinputField__widget {
+  margin-top: 5px;
+  height: $field-height;
+  border-radius: 0.25rem;
+  border: 1px solid $dark-gray;
+  font-size: $font-md;
+  color: $dark-gray;
+  padding: 0 $field-padding-left;
+}