web-apps/apps/common/mobile/resources/sass/_common-settingspanel.scss
2016-09-15 17:14:43 +03:00

122 lines
3.4 KiB
SCSS

@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($form-fieldset-radius);
}
// Hide group header
.x-list-header-wrap {
@include border-top-radius($form-fieldset-radius !important);
.x-innerhtml {
@include border-top-radius($form-fieldset-radius !important);
}
}
.x-list-header {
display: none;
}
}