init repo
This commit is contained in:
nikolay ivanov
131
OfficeWeb/apps/common/mobile/resources/sass/_common-buttons.scss
Normal file
131
OfficeWeb/apps/common/mobile/resources/sass/_common-buttons.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
@mixin common-toolbar-button($bg-color, $type){
|
||||
&, .x-toolbar & {
|
||||
border: 1px solid darken($bg-color, 22%);
|
||||
border-top-color: darken($bg-color, 15%);
|
||||
min-height: 29px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@include border-radius(2px);
|
||||
@include box-shadow(rgba(#fff, .35) 0 1px 0);
|
||||
|
||||
@include color-by-background($bg-color);
|
||||
|
||||
.x-button-icon {
|
||||
width: $icons-default-size;
|
||||
height: $icons-default-size;
|
||||
}
|
||||
|
||||
// Fix Back/Forward buttons
|
||||
&.x-button-forward, &.x-button-back {
|
||||
&:before, &:after {
|
||||
$mask-height: $button-height;
|
||||
$mask-width: $mask-height/2.23;
|
||||
|
||||
-webkit-mask-size: $mask-width $mask-height - .05em;
|
||||
}
|
||||
}
|
||||
|
||||
& .x-button-label {
|
||||
@if $type == normal {
|
||||
color: darken($bg-color, 60%);
|
||||
text-shadow: lighten($bg-color, 50%) 0 .09em 0;
|
||||
} @else {
|
||||
color: lighten($bg-color, 80%);
|
||||
text-shadow: darken($bg-color, 22%) 0 -.09em 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.x-button-back:before, &.x-button-forward:before {
|
||||
background: darken($bg-color, 20%);
|
||||
}
|
||||
|
||||
&, &.x-button-back:after, &.x-button-forward:after {
|
||||
@include background-gradient($bg-color, color_stops(lighten($bg-color, 100%), lighten($bg-color, 13%) 3%, $bg-color));
|
||||
}
|
||||
|
||||
&.x-button-pressing, &.x-button-pressed, &.x-button-active {
|
||||
&, &:after {
|
||||
@if $type == normal {
|
||||
@include background-gradient(darken($bg-color, 40%), 'recessed');
|
||||
} @else {
|
||||
@include background-gradient(darken($bg-color, 10%), 'recessed');
|
||||
}
|
||||
}
|
||||
|
||||
& .x-button-label {
|
||||
@if $type == normal {
|
||||
color: lighten($bg-color, 80%);
|
||||
text-shadow: darken($bg-color, 50%) 0 .09em 0;
|
||||
} @else {
|
||||
text-shadow: darken($bg-color, 22%) 0 .09em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin common-button-ui($ui-label, $color, $type: 'normal') {
|
||||
|
||||
// Buttons
|
||||
|
||||
.x-button.x-button-#{$ui-label}{
|
||||
padding: .3em 8px;
|
||||
|
||||
@include common-toolbar-button($color, $type);
|
||||
|
||||
@if $ui-label == back {
|
||||
&, .x-toolbar & {
|
||||
@include border-radius(4px);
|
||||
@include border-top-left-radius(6px);
|
||||
@include border-bottom-left-radius(6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SegmentedButtons
|
||||
.x-segmentedbutton-base {
|
||||
&:not(.divided) {
|
||||
margin: 0 .2em;
|
||||
|
||||
.x-button-#{$ui-label} {
|
||||
margin: 0;
|
||||
|
||||
@include border-radius(0 !important);
|
||||
|
||||
&:not(.x-first) {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.divided {
|
||||
.x-button-#{$ui-label} {
|
||||
&:not(.x-first) {
|
||||
border-left: 1px solid darken($color, 22%);
|
||||
}
|
||||
|
||||
&:not(.x-last) {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.x-button-#{$ui-label} {
|
||||
&.x-first {
|
||||
@include border-left-radius(2px !important);
|
||||
}
|
||||
&.x-last {
|
||||
@include border-right-radius(2px !important);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Additional button styles
|
||||
|
||||
.x-button.border-radius-10 {
|
||||
@include border-radius(10px !important);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
* Color palette
|
||||
*/
|
||||
|
||||
.x-dataview {
|
||||
&.color {
|
||||
.x-dataview-inner.x-scroll-scroller {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
@include border-radius($panel-border-radius);
|
||||
|
||||
.x-dataview-container {
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.x-dataview-item {
|
||||
display: inline-block;
|
||||
|
||||
&.x-item-selected .item-inner{
|
||||
@include box-shadow(adjust-hue(saturate($active-color, 100%), -14deg) 0 0 0 4px);
|
||||
}
|
||||
|
||||
.item-inner {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid lighten($base-color, 5%);
|
||||
margin: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
.x-msgbox {
|
||||
@include background-gradient($base-color, color_stops(darken($base-color, 20%), darken($base-color, 40%) 10%, darken($base-color, 40%)));
|
||||
|
||||
.x-toolbar {
|
||||
&.x-docked-bottom .x-button .x-button-label {
|
||||
font-size: .9em;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.x-title {
|
||||
font-size: 1em;
|
||||
line-height: 1.4em;
|
||||
color: #ffffff;
|
||||
@include bevel-by-background($sheet-bg-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
@mixin common-planar-spinner {
|
||||
.x-spinner.planar-spinner {
|
||||
&.x-field-grouped-buttons {
|
||||
background: transparent;
|
||||
|
||||
&.x-field {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.x-form-label {
|
||||
background: transparent;
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.x-button {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
.x-form-label {
|
||||
padding: 0.16em;
|
||||
}
|
||||
|
||||
.x-field-input {
|
||||
@include box-shadow(darken($base-color, 10%) 0 3px 4px -2px inset);
|
||||
background: lighten($base-color, 100%);
|
||||
min-width: 2.3em;
|
||||
|
||||
.x-input-el{
|
||||
text-align: center;
|
||||
@include border-radius(0);
|
||||
//position: absolute;
|
||||
//bottom: 0;
|
||||
//top: 0;
|
||||
//padding: 0;
|
||||
padding: 3px 0 4px; //TODO: refactor it
|
||||
min-height: 0;
|
||||
border-top: 1px solid darken($base-color, 26%);
|
||||
border-bottom: 1px solid darken($base-color, 26%);
|
||||
}
|
||||
}
|
||||
|
||||
.x-spinner-button {
|
||||
width: auto;
|
||||
border: 1px solid darken($base-color, 22%) !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.x-spinner-button-down {
|
||||
margin-right: 0;
|
||||
@include border-top-right-radius(0);
|
||||
@include border-bottom-right-radius(0);
|
||||
}
|
||||
|
||||
.x-spinner-button-up {
|
||||
@include border-top-left-radius(0);
|
||||
@include border-bottom-left-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
.x-list.settings {
|
||||
$icon-size: 24px;
|
||||
@include border-radius($panel-border-radius);
|
||||
|
||||
&.x-list-round .x-scroll-view {
|
||||
@include border-radius($panel-border-radius);
|
||||
}
|
||||
|
||||
&.x-list-round.x-list-grouped {
|
||||
.x-list-header-wrap {
|
||||
.x-dock-horizontal {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.x-list-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.x-list-footer-wrap {
|
||||
&.x-list-item-last {
|
||||
.x-dock-horizontal {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.x-list-item {
|
||||
.x-dock-horizontal {
|
||||
border: 1px solid darken($base-color, 6%);
|
||||
border-width: 1px 1px 0 1px;
|
||||
background: lighten($base-color, 100%);
|
||||
|
||||
.x-innerhtml {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&.x-item-pressed {
|
||||
.x-dock-horizontal {
|
||||
//@include background-gradient($list-active-color, $list-active-gradient);
|
||||
@include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
|
||||
@include color-by-background($list-active-color);
|
||||
//@include bevel-by-background($list-active-color);
|
||||
|
||||
.disclosure {
|
||||
background-position: -1 * $settinglist-icon-size 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.x-item-selected {
|
||||
.x-dock-horizontal {
|
||||
color: inherit;
|
||||
|
||||
.x-list-item-body {
|
||||
padding-right: 1.2em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: $settinglist-icon-size;
|
||||
height: $settinglist-icon-size;
|
||||
position: absolute;
|
||||
top: ($global-list-height - $settinglist-icon-size) / 2;
|
||||
right: ($global-list-height - $settinglist-icon-size) / 2;
|
||||
background-image: url($icons-setting-list-image);
|
||||
background-size: $settinglist-image-width $settinglist-image-height;
|
||||
background-position: 0 -1 * $settinglist-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.x-item-pressed {
|
||||
.x-dock-horizontal {
|
||||
color: lighten($base-color, 100%);
|
||||
|
||||
&:after {
|
||||
background-position: -1 * $settinglist-icon-size -1 * $settinglist-icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// offset text from icom
|
||||
.icon-offset {
|
||||
margin-left: $icon-size + 6px;
|
||||
}
|
||||
|
||||
.disclosure {
|
||||
right: $icon-size / 2;
|
||||
background-image: url($icons-setting-list-image);
|
||||
background-size: $settinglist-image-width $settinglist-image-height;
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.x-list-header-wrap.x-list-footer-wrap {
|
||||
.x-dock-body {
|
||||
@include border-radius($form-fieldset-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.x-list-footer-wrap {
|
||||
.x-dock-horizontal {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding-bottom: $global-list-height * .3;
|
||||
|
||||
> .x-dock-body {
|
||||
border: 1px solid darken($base-color, 6%);
|
||||
background: lighten($base-color, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.x-item-pressed {
|
||||
.x-dock-horizontal {
|
||||
background: transparent;
|
||||
> .x-dock-body {
|
||||
@include border-bottom-radius($form-fieldset-radius);
|
||||
//@include background-gradient($list-active-color, $list-active-gradient);
|
||||
@include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
|
||||
@include color-by-background($list-active-color);
|
||||
//@include bevel-by-background($list-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
102
OfficeWeb/apps/common/mobile/resources/sass/_common-toolbar.scss
Normal file
102
OfficeWeb/apps/common/mobile/resources/sass/_common-toolbar.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
$shadow-width: .065em; // Space between tip and its shadow
|
||||
|
||||
/**
|
||||
* // SCSS
|
||||
* @include application-toolbar-ui('edit', $base-color);
|
||||
*/
|
||||
@mixin common-toolbar-ui($ui-label, $color) {
|
||||
|
||||
$toolbar-border-color: darken($color, 50%);
|
||||
$toolbar-button-color: darken($color, 5%);
|
||||
|
||||
.x-toolbar-#{$ui-label} {
|
||||
@if $ui-label == search {
|
||||
@include background-gradient($color, color_stops($color, lighten($color, 11%) 20%, lighten($color, 11%)));
|
||||
}
|
||||
@else {
|
||||
@include background-gradient($color, color_stops(lighten($color, 100%), lighten($color, 13%) 3%, $color));
|
||||
}
|
||||
border-color: $toolbar-border-color;
|
||||
|
||||
.x-title {
|
||||
@include color-by-background($color);
|
||||
@include bevel-by-background($color);
|
||||
}
|
||||
|
||||
&.x-docked-top {
|
||||
border-bottom: 1px solid darken($color, 22%);
|
||||
}
|
||||
|
||||
.x-button,
|
||||
.x-field-select .x-component-outer,
|
||||
.x-field-select .x-component-outer:before {
|
||||
@include toolbar-button($toolbar-button-color, matte);
|
||||
}
|
||||
|
||||
.x-label,
|
||||
.x-form-label {
|
||||
font-weight: normal;
|
||||
color: darken($color, 50%);
|
||||
text-shadow: 0 1px 0 lighten($color, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin common-shadow-iconmask($name, $url) {
|
||||
.x-tab .x-button-icon.#{$name},
|
||||
.x-button .x-button-icon.x-icon-mask.#{$name},
|
||||
.x-list-item .x-icon-mask.#{$name} {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
&:before, &:after {
|
||||
-webkit-mask-image: inline-image($url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* // SCSS
|
||||
* @include application-toolbar-iconmask('code3', '../../img/toolbar/code3.png');
|
||||
*/
|
||||
@mixin common-toolbar-iconmask($name) {
|
||||
.x-tab .x-button-icon.#{$name},
|
||||
.x-button .x-button-icon.x-icon-mask.#{$name} {
|
||||
//background-image: none;
|
||||
//background-color: transparent;
|
||||
$default-mask-offset: 0.15em;
|
||||
|
||||
&:before, &:after {
|
||||
@include insertion($toolbar-icon-size, $toolbar-icon-size, $button-stroke-weight, auto);
|
||||
z-index: 2;
|
||||
//-webkit-mask: 0 0 inline-image($url) no-repeat;
|
||||
-webkit-mask-size: $toolbar-icon-size;
|
||||
};
|
||||
|
||||
&:before {
|
||||
top: $default-mask-offset + $shadow-width;
|
||||
}
|
||||
&:after {
|
||||
top: $default-mask-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.x-tab .x-button-icon.#{$name},
|
||||
.x-button .x-button-icon.x-icon-mask.#{$name} {
|
||||
&:before {
|
||||
@include background-image(linear-gradient(color_stops(#ffffff, #f3f3f3)));
|
||||
}
|
||||
&:after {
|
||||
@include background-image(linear-gradient(color_stops(#292929, #646464)));
|
||||
}
|
||||
}
|
||||
|
||||
.x-button.x-button-pressing .x-button-icon.x-icon-mask.#{$name} {
|
||||
&:before {
|
||||
@include background-image(linear-gradient(color-stops(black, black)));
|
||||
}
|
||||
&:after {
|
||||
@include background-image(linear-gradient(color-stops(white, white)));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user