@sankhyalabs/ezui 1.1.8 → 1.1.9

package/dist/collection/components/ez-calendar/ez-calendar.css

@@ -1,210 +1,210 @@
-:host {
-  --cal--font-family: var(--font-pattern, Arial);
-  --cal--color: var(--title--primary, #626e82);
-  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535,0 0 1px transparent);
-  
-  /* cal__body */
-  --cal__body--background-color: var(--background--xlight, #FFF);
-  --cal__body--padding: var(--space--medium, 12px);
-  --cal__body--border-radius: var(--border--radius-medium, 12px);
-  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
-  
-  /* cal__header */
-  --cal__header-line--stroke: 2px;
-  --cal__header-line--color: var(--color--strokes, #C0C0C0);
-  
-  /* nav buttons */
-  --cal__nav-btn--fill: var(--text--primary, #008561);
-  --cal__nav-btn--over--fill: var(--color--primary, #350404);
-  --cal__nav-btn--width: 10px;
-  --cal__nav-btn--height: 16px;
-  --cal__nav-btn--previous-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
-  --cal__nav-btn--next-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
-
-  /* cell */
-  --cal__cell--margin: 0px var(--space--small, 12px);
-  --cal__cell--width: var(--space--large, 24px);
-  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
-  --cal__cell--border-radius: var(--border--radius-small, 6px);
-  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
-  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
-  --cal__cell--selected--background-color: var(--color--primary, #008561);
-  --cal__cell--selected--color: var(--color--inverted, #FFF);
-
-  /* btn today */
-  --cal__btn-today--color: var(--color--primary);
-  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
-  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
-
-  /***************
-     host style  
-  ***************/
-  /*private*/
-  position: relative;
-  display: flex;
-  user-select: none;
-}
-
-.calendar{
-  /*private*/
-  z-index: var(--more-visible, 2);
-  display: flex;
-  flex-direction: column;
-  
-  /*public*/
-  background-color: var(--cal__body--background-color);
-  padding: var(--cal__body--padding);
-  border-radius: var(--cal__body--border-radius);
-  box-shadow: var(--cal__body--shadow);
-}
-
-.calendar__header{
-  /*private*/
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: var(--space--medium, 12px);
-  margin: var(--space--small, 6px) var(--space--, 12px);
-  
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
-}
-
-.calendar__btn-next, .calendar__btn-previous{
-  /*private*/
-  outline: none;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  padding: 0px;
-}
-
-.calendar__btn-next::after, .calendar__btn-previous::after{
-  /*private*/
-  content: '';
-  display: flex;
-
-  /*public*/
-  background-color: var(--cal__nav-btn--fill);/*parece estranho, mas o bg funciona como fill pq aplicaremos clip-path.*/
-  width: var(--cal__nav-btn--width);
-  height: var(--cal__nav-btn--height);
-}
-
-.calendar__btn-previous::after{
-  /*public*/
-  clip-path: var(--cal__nav-btn--previous-path);
-}
-
-.calendar__btn-next::after{
-  /*public*/
-  clip-path: var(--cal__nav-btn--next-path);
-}
-
-.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after{
-  /*public*/
-  background-color: var(--cal__nav-btn--over--fill);
-}
-
-.calendar__lbl-month{
-  /*private*/
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--medium, 16px);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-}
-
-.calendar__line{
-  /*private*/
-  display: flex;
-  padding: 0px;
-  margin: 0px;
-}
-
-.calendar__cell{
-  /*private*/
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  cursor: pointer;
-  font-size: var(--text--small, 12px);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  padding: var(--cal__cell--padding);
-  margin: var(--cal__cell--margin);
-  min-width: var(--cal__cell--width);
-  border-radius: var(--cal__cell--border-radius);
-}
-
-
-.calendar__cell:hover{
-  /*public*/
-  background-color: var(--cal__cell--over--background-color);
-}
-
-.calendar__cell--secondary{
-  /*public*/
-  color: var(--cal__cell--outset--color);
-}
-
-.calendar__cell--unselectable:hover{
-  /*private*/
-  background-color: unset;
-  border-radius: unset;
-  cursor: unset;
-}
-
-.calendar__cell--unselectable{
-  /*private*/
-  font-weight: var(--text-weight--large, 600);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-}
-
-.calendar__cell--selected, .calendar__cell--selected:hover{
-  /*public*/
-  background-color: var(--cal__cell--selected--background-color);
-  color: var(--cal__cell--selected--color);
-}
-
-.calendar__body {
-  /*private*/
-  padding: var(--space--small, 6px) 0px;
-}
-
-.calendar__footer{
-  /*private*/
-  display: flex;
-  flex-direction: column;
-}
-
-.calendar__btn-today{
-  /*private*/
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--small);
-  padding: var(--space--extra-small, 6px);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  text-shadow: var(--cal--text-shadow);
-  color: var(--cal__btn-today--color);
-  border-radius: var(--cal__btn-today--border-radius);
-}
-
-.calendar__btn-today:hover{
-  /*public*/
-  background-color: var(--cal__btn-today--hover--background-color);
-}
+:host {
+  --cal--font-family: var(--font-pattern, Arial);
+  --cal--color: var(--title--primary, #626e82);
+  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535,0 0 1px transparent);
+  
+  /* cal__body */
+  --cal__body--background-color: var(--background--xlight, #FFF);
+  --cal__body--padding: var(--space--medium, 12px);
+  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  
+  /* cal__header */
+  --cal__header-line--stroke: 2px;
+  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  
+  /* nav buttons */
+  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --cal__nav-btn--over--fill: var(--color--primary, #350404);
+  --cal__nav-btn--width: 10px;
+  --cal__nav-btn--height: 16px;
+  --cal__nav-btn--previous-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
+  --cal__nav-btn--next-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
+
+  /* cell */
+  --cal__cell--margin: 0px var(--space--small, 12px);
+  --cal__cell--width: var(--space--large, 24px);
+  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --cal__cell--selected--color: var(--color--inverted, #FFF);
+
+  /* btn today */
+  --cal__btn-today--color: var(--color--primary);
+  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  position: relative;
+  display: flex;
+  user-select: none;
+}
+
+.calendar{
+  /*private*/
+  z-index: var(--more-visible, 2);
+  display: flex;
+  flex-direction: column;
+  
+  /*public*/
+  background-color: var(--cal__body--background-color);
+  padding: var(--cal__body--padding);
+  border-radius: var(--cal__body--border-radius);
+  box-shadow: var(--cal__body--shadow);
+}
+
+.calendar__header{
+  /*private*/
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--space--medium, 12px);
+  margin: var(--space--small, 6px) var(--space--, 12px);
+  
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+}
+
+.calendar__btn-next, .calendar__btn-previous{
+  /*private*/
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 0px;
+}
+
+.calendar__btn-next::after, .calendar__btn-previous::after{
+  /*private*/
+  content: '';
+  display: flex;
+
+  /*public*/
+  background-color: var(--cal__nav-btn--fill);/*parece estranho, mas o bg funciona como fill pq aplicaremos clip-path.*/
+  width: var(--cal__nav-btn--width);
+  height: var(--cal__nav-btn--height);
+}
+
+.calendar__btn-previous::after{
+  /*public*/
+  clip-path: var(--cal__nav-btn--previous-path);
+}
+
+.calendar__btn-next::after{
+  /*public*/
+  clip-path: var(--cal__nav-btn--next-path);
+}
+
+.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after{
+  /*public*/
+  background-color: var(--cal__nav-btn--over--fill);
+}
+
+.calendar__lbl-month{
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--medium, 16px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+}
+
+.calendar__line{
+  /*private*/
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+}
+
+.calendar__cell{
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+  font-size: var(--text--small, 12px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+  padding: var(--cal__cell--padding);
+  margin: var(--cal__cell--margin);
+  min-width: var(--cal__cell--width);
+  border-radius: var(--cal__cell--border-radius);
+}
+
+
+.calendar__cell:hover{
+  /*public*/
+  background-color: var(--cal__cell--over--background-color);
+}
+
+.calendar__cell--secondary{
+  /*public*/
+  color: var(--cal__cell--outset--color);
+}
+
+.calendar__cell--unselectable:hover{
+  /*private*/
+  background-color: unset;
+  border-radius: unset;
+  cursor: unset;
+}
+
+.calendar__cell--unselectable{
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+}
+
+.calendar__cell--selected, .calendar__cell--selected:hover{
+  /*public*/
+  background-color: var(--cal__cell--selected--background-color);
+  color: var(--cal__cell--selected--color);
+}
+
+.calendar__body {
+  /*private*/
+  padding: var(--space--small, 6px) 0px;
+}
+
+.calendar__footer{
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar__btn-today{
+  /*private*/
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--small);
+  padding: var(--space--extra-small, 6px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  text-shadow: var(--cal--text-shadow);
+  color: var(--cal__btn-today--color);
+  border-radius: var(--cal__btn-today--border-radius);
+}
+
+.calendar__btn-today:hover{
+  /*public*/
+  background-color: var(--cal__btn-today--hover--background-color);
+}