Review and merge latest topic-core-css (#2183)

* New branch from topic-core-refactor to use as central point for common
CSS work

- Manually migrated changes from vue-toolbar, expect conflicts there and
 in vue-layout;

* Manually update constants-snow from vue-toolbar branch

* Update markup to use latest button classnames

- c-menu-button > c-button--menu;
- c-icon-button > c-click-icon;

* Various from vue-conductor-style

- Mods to input styling;
- Input[] styles moved to _controls;
- New/revised constants vals;

* Resolve bizarre merge conflict when applying stash

* Code cleanup

* Alias and type-icon fixes

- More robust approach to alias indicators;
- Added alias indication to tree-item.vue;
- TODO: wire up alias indication tree-item.vue;

* Accessibility mods, convert elements to <button>

- Better reset styles for htmlInputReset mixin to allow use of <button>
without browser default styling;
- Create button;
- BrowseBar action buttons;
- c-click-icons;
- Removed Preview button from BrowseBar.vue;

* Add copyright to .scss files; code cleanup

* Improved click area and draggable styling for tree-item

* Removed injection of domainObject

* Removed injection of domainObject

* Remove _constants-mobile.scss

- Moved used var to _constants;
- Normalize mobile detection approach in Layout.vue;

* Mobile styling for Time Conductor

- WIP!

* Mobile styling for Time Conductor

- New modalFullScreen mixin;
- Datepicker now a fullscreen modal element in body.phone;

src/plugins/timeConductor/DatePicker.vue

@@ -20,12 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-    <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" ref="calendarHolder">
+    <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
         <a class="c-click-icon icon-calendar"
            @click="togglePicker()"></a>
-        <div class="c-menu c-datetime-picker"
+        <div class="c-menu c-menu--mobile-modal c-datetime-picker"
              v-if="showPicker">
-            <div class="c-datetime-picker__month-year-pager c-pager l-month-year-pager">
+            <div class="c-datetime-picker__close-button">
+                <button class="c-click-icon icon-x-in-circle"
+                        @click="togglePicker()"></button>
+            </div>
+            <div class="c-datetime-picker__pager c-pager l-month-year-pager">
                 <div class="c-pager__prev c-click-icon icon-arrow-left"
                    @click="changeMonth(-1)"></div>
                 <div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
@@ -60,12 +64,24 @@
     .c-datetime-picker {
         @include userSelectNone();
         padding: $interiorMarginLg !important;
-        display: flex;
+        display: flex !important; // Override .c-menu display: block;
         flex-direction: column;
         > * + * {
-            border-top: 1px solid $colorInteriorBorder;
             margin-top: $interiorMargin;
         }
+
+        &__close-button {
+            display: none; // Only show when body.phone, see below.
+        }
+
+        &__pager {
+            flex: 0 0 auto;
+        }
+
+        &__calendar {
+            border-top: 1px solid $colorInteriorBorder;
+            flex: 1 1 auto;
+        }
     }
 
     .c-pager {
@@ -90,6 +106,7 @@
         grid-template-columns: repeat(7, min-content);
         grid-template-rows: auto;
         grid-gap: 1px;
+        height: 100%;
 
         $mutedOpacity: 0.7;
 
@@ -106,6 +123,7 @@
         li {
             display: flex;
             flex-direction: column;
+            justify-content: center !important;
             padding: $interiorMargin;
 
             &.is-in-month {
@@ -120,6 +138,24 @@
             }
         }
     }
+
+    /******************************************************** MOBILE */
+    body.phone {
+        .c-datetime-picker {
+            &.c-menu {
+                @include modalFullScreen();
+            }
+
+            &__close-button {
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+
+        .c-calendar {
+            grid-template-columns: repeat(7, auto);
+        }
+    }
 </style>
 
 <script>