Fix some vertical alignment issues, Safari style issues, select and checkbox now uses the primary color (#830)

* Remove unused rules

* Use primary variable

* Set border-radius 0 on input to fix issue on Safari where input id appeared rounded and fix the color picker to be rectangle instead of ovale on Safari

* Use custom checkbox style so it appears the same on Chrome, Firefox, Safari with the correct primary color

* Specify a .select__option--is-selected rule to use the correct primary color in camera select

* Fix vertical alignment issues with entityPrint and icons rendered in scene graph and sidebar header, fix search input to make the scene graph horizontal scroll disappear

* Increase font-weight for .propertyRowDefined to be more visible

Author: vincentfretin

src/style/components.styl

@@ -39,25 +39,6 @@
   font-size 13px
   &:hover
     background $bglighter
-/*
-.collapsible
-  &.collapsed
-    background-color $grayalt
-    .static,
-    .componentHeaderActions
-      color #dedede
-    &:hover
-      background-color $grayhover
-*/
-.collapsible .menu
-  text-align right
-
-.collapsible .menuafter
-  color #bbb
-  content '\2807'
-  font-size 12px
-  padding 5px
-  text-align right
 
 .collapsible .static
   margin 0
@@ -127,7 +108,7 @@
   input.string,
   input.number
     background $bgdark
-    color #1faaf2
+    color $primary
     min-height 26px
     padding-bottom 1px
     padding-left 5px
@@ -145,23 +126,17 @@
   input.string:focus
     box-shadow none
 
+  .color-widget *
+    vertical-align middle
+
   .color_value
     margin 0 0 0 5px
     width 68px
     letter-spacing 1px
 
 .propertyRowDefined .text
   color #FAFAFA
-  font-weight 500
-
-.components *
-  vertical-align middle
-
-span.subcomponent
-  color #999
-  float none !important
-  margin-left 10px
-  vertical-align top !important
+  font-weight 600
 
 #addComponentContainer
   align-items center
@@ -195,7 +170,7 @@ span.subcomponent
 
 #componentEntityHeader
   .collapsible-header
-    bottom 4px
+    bottom 5px
     position relative
   .collapse-button
     display none
@@ -206,7 +181,6 @@ span.subcomponent
     padding-left 5px
   .entityName
     max-width 160px
-    top 0
   .entityIcons
     color #FAFAFA
 
@@ -220,4 +194,4 @@ span.subcomponent
     width 120px
 
 #componentEntityHeader .gltfIcon img
-  top 0
+  top 4px

src/style/index.styl

@@ -174,13 +174,33 @@ body.aframe-inspector-opened
   input.number
     min-height 14px
     outline none
+    border-radius 0
 
   input[type="checkbox"]
-    appearance auto
+    appearance none
     cursor pointer
     margin 0
     height 18px
     width 18px
+    border 1px solid $white
+    border-radius 0
+    background transparent
+    position relative
+
+    &:checked
+        border 1px solid $primary
+        background $primary
+
+        &::after
+            content ''
+            position absolute
+            left 5px
+            top 1px
+            width 4px
+            height 9px
+            border solid white
+            border-width 0 2px 2px 0
+            transform rotate(45deg)
 
   input[type="checkbox"]:focus
     box-shadow none
@@ -195,7 +215,7 @@ body.aframe-inspector-opened
 
   input.string:focus,
   input.number:focus
-    border 1px solid #1faaf2
+    border 1px solid $primary
 
   input.error
     border 1px solid #a00
@@ -204,9 +224,6 @@ body.aframe-inspector-opened
     background $bg
     width 331px
 
-  #sidebar *
-    vertical-align middle
-
   input,
   textarea,
   select
@@ -235,6 +252,7 @@ body.aframe-inspector-opened
 
   input[type=color]::-webkit-color-swatch-wrapper
     padding 0  /* To remove the inner padding. */
+    border-radius 0  /* So it appears as rectangle instead of an ovale in Safari */
 
   input[type=color]::-moz-color-swatch
     border 0

src/style/scenegraph.styl

@@ -28,9 +28,13 @@
 
   .entity
     background $bg
+    box-sizing border-box
     cursor pointer
     display flex
+    gap 6px
     justify-content space-between
+    align-items center
+    line-height 1em
     padding 3px
     width 100%
     white-space nowrap
@@ -41,10 +45,10 @@
     &.active
       background-color #155373
       color #fff
-      .component:hover
-        color #1888c1
       .entityActions
-        display inline
+        align-items center
+        display flex
+        padding-right 2px
 
     &.novisible
       &.active
@@ -62,14 +66,13 @@
           color #626262
 
   .component:hover
-    color #1faaf2
+    color $primary
 
   .entityIcons
     margin-left 2px
 
   .entityActions
     display none
-    margin 0 14px
 
     .button
       color #fff
@@ -80,7 +83,8 @@
     color #CCC
 
   .toolbarActions svg:hover,
-  .entityActions svg:hover
+  .entityActions svg:hover,
+  .search a.button svg:hover
     color $primary
 
   .active svg
@@ -98,24 +102,22 @@
     text-align center
     width 14px
 
-  .fa-eye
-    color #bbb
-
   .icons a.button
     color #fff
 
   .search
     padding 5px
     font-size 16px
     position relative
+    display flex
 
     input
       color $white
       background $bgdark
-      border-radius 5px
-      height 22px
-      text-indent 10px
-      width 216px
+      border-radius 0
+      box-sizing border-box
+      padding 5px 10px
+      width 100%
 
     >svg, a.button
       position absolute
@@ -134,15 +136,3 @@
     overflow-y auto
     padding 0
     width 230px
-
-.scenegraph-bottom
-  background-color #323232
-  border-top 1px solid #111
-  bottom 10
-  height 40px
-  left 0
-  z-index 100
-
-  a
-    float right
-    margin 10px

src/style/select.styl

@@ -43,6 +43,10 @@
 .select__option--is-focused
   background #155373
 
+.select__option--is-selected
+  background $primary
+  color $white
+
 .select__value-container
   height 26px
   position static