init repo

OfficeWeb/apps/common/mobile/resources/sass/_common-settingspanel.scss

@@ -0,0 +1,109 @@
+@mixin common-settings-panel {
+  .x-panel.x-panel-settings {
+    @include background-gradient($base-color, color_stops(lighten($base-color, 13%), $base-color));
+    @include box-shadow(lighten($base-color, 100%) 0 1px 0 inset, rgba(0, 0, 0, .3) 0 .2em .6em);
+    border: 1px solid darken($base-color, 32%);
+
+    .x-anchor-top {
+      $anchor-height: .7em;
+      $anchor-width: $anchor-height * 2.33;
+
+      background-color: darken($base-color, 32%);
+      margin-top: -$anchor-height + 0.02em + 0.06em;
+      @include box-shadow(lighten($base-color, 100%) 0 -1px 0 0 inset);
+
+      &:after {
+        content: '';
+        position: absolute;
+        width: $anchor-width;
+        height: $anchor-height;
+        -webkit-mask: 0 0 theme_image($theme-name, "tip_top.png") no-repeat;
+        -webkit-mask-size: $anchor-width $anchor-height;
+        @include background-gradient($base-color, color_stops(lighten($base-color, 15%), lighten($base-color, 13%)));
+        top: 1px !important;
+      }
+    }
+
+    .x-anchor-bottom {
+      $anchor-height: .7em;
+      $anchor-width: $anchor-height * 2.33;
+
+      height: $anchor-height + .1em;
+      background-color: darken($base-color, 32%);
+      margin-top: -0.15em;
+      @include box-shadow(lighten($base-color, 100%) 0 -1px 0 0 inset);
+
+      &:after {
+        content: '';
+        position: absolute;
+        width: $anchor-width;
+        height: $anchor-height + .1em;
+        -webkit-mask: 0 0 theme_image($theme-name, "tip_bottom.png") no-repeat;
+        -webkit-mask-size: $anchor-width $anchor-height;
+        @include background-gradient($base-color, color_stops($base-color, darken($base-color, 5%)));
+        top: -1px !important;
+      }
+    }
+
+    .x-panel-inner {
+      background: transparent;
+    }
+
+    .x-navigation-bar {
+      border-bottom: none;
+      margin-top: -6px;
+      background: transparent;
+      overflow: hidden;
+
+      .x-title {
+        color: darken($base-color, 60%);
+        text-shadow: lighten($base-color, 50%) 0 .08em 0;
+      }
+    }
+
+
+    .x-navigationview.plain {
+      .x-navigationview-inner {
+        background: transparent;
+        @include border-radius(0);
+        &:after {
+          content: none;
+        }
+      }
+    }
+
+    .x-navigationview-inner {
+      background-color: lighten($base-color, 14%);
+      @include border-radius($panel-border-radius);
+      &:after {
+        @include insertion(100%, 100%);
+        pointer-events: none;
+        @include border-radius($panel-border-radius);
+        @include single-box-shadow(darken($base-color, 1%), 0, 1px, 2px, 2px, inset);
+        border: 1px solid darken($base-color, 32%);
+      }
+    }
+  }
+
+  .x-label.info .x-innerhtml {
+    color: darken($base-color, 30%);
+    text-shadow: 0 1px 0 lighten($base-color, 50%);
+    text-align: center;
+  }
+
+  .btn-input-image input[type="file"] {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  // custom mask
+  .x-mask.transparent {
+    background: transparent;
+  }
+
+  .round {
+    @include border-radius($panel-border-radius);
+  }
+}