import Sencha Touch 2.4.2 source

[sencha-touch.git] / src / resources / themes / stylesheets / sencha-touch / default / src / _Panel.scss

diff --git a/src/resources/themes/stylesheets/sencha-touch/default/src/_Panel.scss b/src/resources/themes/stylesheets/sencha-touch/default/src/_Panel.scss
new file mode 100644 (file)
index 0000000..88a2afe
--- /dev/null
+++ b/src/resources/themes/stylesheets/sencha-touch/default/src/_Panel.scss
@@ -0,0 +1,79 @@
+/**
+ * @class Ext.Panel
+ */
+
+// Private variables
+$anchor-height: .7em;
+$anchor-width: $anchor-height*2.33;
+
+@if $include-floating-panels {
+    .x-panel.x-floating,
+    .x-msgbox,
+    .x-form.x-floating {
+        @if $include-border-radius {
+            @include border-radius($panel-border-radius);
+        }
+        @include box-shadow(rgba(0,0,0,.8) 0 .2em .6em);
+        @include background-gradient(darken($base-color, 40%), 'flat');
+
+        &.x-floating-light {
+            @include background-gradient($base-color, 'flat');
+        }
+
+        .x-panel-inner,
+        > .x-body {
+            @if $include-border-radius {
+                @include border_radius($panel-border-radius);
+            }
+        }
+    }
+
+    .x-webkit .x-anchor {
+        position: absolute;
+        overflow: hidden;
+
+        &.x-anchor-top {
+            margin-top: -$anchor-height + 0.02em;
+            margin-left: -$anchor-width / 2;
+            width: $anchor-width;
+            height: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_top.png") no-repeat;
+            -webkit-mask-size: $anchor-width $anchor-height;
+            background-color: darken($base-color, 40%);
+        }
+
+        &.x-anchor-bottom {
+            margin-left: -$anchor-width / 2;
+            width: $anchor-width;
+            height: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_bottom.png") no-repeat;
+            -webkit-mask-size: $anchor-width $anchor-height;
+            background-color: darken($base-color, 40%);
+        }
+
+        &.x-anchor-left {
+            margin-left: -$anchor-width / 2 + 0.15em;
+            margin-top: -$anchor-height / 2;
+            height: $anchor-width;
+            width: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_left.png") no-repeat;
+            -webkit-mask-size: $anchor-height $anchor-width;
+            background-color: darken($base-color, 40%);
+        }
+
+        &.x-anchor-right {
+            margin-top: -$anchor-height / 2;
+            height: $anchor-width;
+            width: $anchor-height;
+            -webkit-mask: 0 0 theme_image('default', "tip_right.png") no-repeat;
+            -webkit-mask-size: $anchor-height $anchor-width;
+            background-color: darken($base-color, 40%);
+        }
+    }
+
+    .x-floating.x-panel-light {
+        &:after {
+            background-color: $base-color;
+        }
+    }
+}