feat: refactor Calendar component to match Fiori 3 specs (#506)

* Change Calendar component to follow fiori3 requuirements. Add compact mode * Add test image ref * Add weekends to docs * Styled according to Fiori3 except additionall states | Needs test update * feat(calendar) suit playground example to new class structure * feat(calendar) Update documentation * feat(calendar) introduce mobile mode for calendar * feat(calendar) Introduce special days and disabled calendar item * feat(calendar) Update mobile view to new documentation * feat(calendar) use mixins to create calendar states selectors * fix the settings area in the playground * feat(core) Flatten calendar selectors structure * feat(core) update grid elements sizing * feat(core) Change grid-cells sizing | Move special-day markers to pseudo-element | Move inner border to pseudo-element * feat(core) update navigation button sizing * feat(core) Update the documentation and tests * feat(core) update mobile sizing * update to new documentation * Create separate classes for mobile device orientation | Fix IE11 * extend documentation class description * add test examples * Add IE11 fix for no active state on grid element click * Change navigation panel width on mobile devices in landscape orientaton * Update calendar years example * Remove styling of navigation buttons * Update Reference images, remove wrong test template styles * Add RTL support | Fix minor issues | Update documentation and test examples * Add spacing visualizing the space that should be created with extended clickable area of the button * Change Calendar component to follow fiori3 requuirements. Add compact mode * Add test image ref * Add weekends to docs * Styled according to Fiori3 except additionall states | Needs test update * feat(calendar) suit playground example to new class structure * feat(calendar) Update documentation * feat(calendar) introduce mobile mode for calendar * feat(calendar) Introduce special days and disabled calendar item * feat(calendar) Update mobile view to new documentation * feat(calendar) use mixins to create calendar states selectors * fix the settings area in the playground * feat(core) Flatten calendar selectors structure * feat(core) update grid elements sizing * feat(core) Change grid-cells sizing | Move special-day markers to pseudo-element | Move inner border to pseudo-element * feat(core) update navigation button sizing * feat(core) Update the documentation and tests * feat(core) update mobile sizing * update to new documentation * Create separate classes for mobile device orientation | Fix IE11 * extend documentation class description * add test examples * Add IE11 fix for no active state on grid element click * Change navigation panel width on mobile devices in landscape orientaton * Update calendar years example * Remove styling of navigation buttons * Update Reference images, remove wrong test template styles * Add RTL support | Fix minor issues | Update documentation and test examples * Add spacing visualizing the space that should be created with extended clickable area of the button * Update calendar examples | Fix calendar grid elements spacing * chore: update visual test images Co-authored-by: salarenko <salarenko@users.noreply.github.com> Co-authored-by: deno <mladen.droshev@sap.com>
SAP · Mar 4, 2020 · fce05c4 · fce05c4
1 parent 6d5eb97
commit fce05c4
Show file tree

Hide file tree

Showing 13 changed files with 1,916 additions and 1,291 deletions.
diff --git a/docs/_includes/display-component.html b/docs/_includes/display-component.html
@@ -3,6 +3,8 @@
 		{{ include.component }}
 	</div>
 </div>
+<div style="overflow-y: auto; max-height: 500px;">
 {% highlight html %}
 {{ include.component}}
 {% endhighlight %}
+</div>
diff --git a/docs/_sass/_docs-display-component.scss b/docs/_sass/_docs-display-component.scss
@@ -47,14 +47,6 @@
         }
     }
 
-    .fd-docs-date-picker {
-        .fd-popover {
-            &__body {
-                padding: 0 12px;
-            }
-        }
-    }
-
     .fd-product-menu {
         .fd-popover__body--right {
             right: -10px;
@@ -95,7 +87,7 @@
         }
 
         &.fd-dialog__content,
-        .fd-dialog__content{
+        .fd-dialog__content {
             position: static;
             transform: translate(0%, 0%);
             width: 30rem;
@@ -107,6 +99,24 @@
         }
     }
 
+    .fd-calendar-mobile-docs-static {
+        &--landscape {
+            .fd-dialog__content {
+                width: 640px;
+                height: 360px;
+            }
+            .fd-calendar__navigation--main {
+                padding-right: calc(640px - 360px - 2rem);
+            }
+        }
+        &--portrait {
+            .fd-dialog__content {
+                height: 500px;
+                width: 360px;
+            }
+        }
+    }
+
     &__app {
         height: 500px;
         color: fd-color(text, 5);