[Mobile] IN PROGRESS: Styling on Create menu

open #74

platform/commonUI/general/res/css/theme-espresso.css

@@ -2999,6 +2999,40 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is 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.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 26, ../sass/mobile/controls/_menus.scss */
+  .menu-element .super-menu {
+    width: 250px;
+    height: 250px; }
+    /* line 32, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.left {
+      border-right: none;
+      padding-right: 0;
+      width: 100%; }
+    /* line 37, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.right {
+      display: none; } }
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;

platform/commonUI/general/res/sass/_main.scss

@@ -48,6 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
+@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";

platform/commonUI/general/res/sass/mobile/controls/_menus.scss

@@ -20,15 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Mobile hamburger icon is
+// Override the Create menu for mobile
-// sized according to the device
+@include phoneandtablet {
-.mobile-menu-icon {
+    .menu-element {
-    display: inline-block;
+        .super-menu {
-    @include phoneandtablet {
+            $d: 250px;
-        font-size: 21px;
+            width: $d;
-        //padding-top: $imageThumbPad;
+            height: $d;
-    }
+
-    @include desktop {
+            .pane {
-        display: none;
+                &.left {
+                    border-right: none;
+                    padding-right: 0;
+                    width: 100%;
+                }
+                &.right {
+                    display: none;
+                }
+            }
+        }
     }
 }