init repo
This commit is contained in:
nikolay ivanov
@@ -0,0 +1,138 @@
|
||||
// Basic
|
||||
$base-color : #cbcbcb;
|
||||
$active-color : #688AD2;
|
||||
$base-gradient : 'matte';
|
||||
$include-default-icons : false;
|
||||
$include-default-uis : false;
|
||||
|
||||
// Toolbar
|
||||
$toolbar-icon-size : 1.0em;
|
||||
|
||||
// Setting list
|
||||
$settinglist-icon-size : 24px;
|
||||
$settinglist-image-width : 72px;
|
||||
$settinglist-image-height : 48px;
|
||||
|
||||
// Image default icons
|
||||
$icons-default-size : 24px;
|
||||
$icons-default-image-width : 72px;
|
||||
$icons-default-image-height : 888px;
|
||||
|
||||
// Image bullet icons
|
||||
$bullet-icon-size : 24px;
|
||||
$bullet-icon-image-width : 48px;
|
||||
$bullet-icon-image-height : 168px;
|
||||
|
||||
// Image numbering icons
|
||||
$numbering-icon-size : 74px;
|
||||
$numbering-icon-image-width : 148px;
|
||||
$numbering-icon-image-height: 518px;
|
||||
|
||||
// Image outline icons
|
||||
$outline-icon-size : 74px;
|
||||
$outline-icon-image-width : 148px;
|
||||
$outline-icon-image-height : 222px;
|
||||
|
||||
@import 'sencha-touch/default/all';
|
||||
|
||||
@include sencha-panel;
|
||||
@include sencha-buttons;
|
||||
@include sencha-toolbar;
|
||||
@include sencha-toolbar-forms;
|
||||
@include sencha-indexbar;
|
||||
@include sencha-list;
|
||||
@include sencha-layout;
|
||||
@include sencha-form;
|
||||
@include sencha-msgbox;
|
||||
@include sencha-loading-spinner;
|
||||
|
||||
@import 'common-buttons';
|
||||
@import 'common-dataview';
|
||||
@import 'common-toolbar';
|
||||
@import 'common-settingspanel';
|
||||
@import 'common-planarspinner';
|
||||
@import 'common-settingslist';
|
||||
@import 'common-messagebox';
|
||||
|
||||
@import 'application-mixins';
|
||||
@import 'application-dataview';
|
||||
|
||||
@include common-settings-panel;
|
||||
@include common-planar-spinner;
|
||||
|
||||
@include common-toolbar-ui('edit', $base-color);
|
||||
@include common-toolbar-ui('search', $base-color);
|
||||
|
||||
@include application-icon-normal('save', 0);
|
||||
@include application-icon-normal('undo', 1);
|
||||
@include application-icon-normal('share', 2);
|
||||
@include application-icon-normal('font-style', 3);
|
||||
@include application-icon-normal('font-color', 4);
|
||||
@include application-icon-normal('bold', 5);
|
||||
@include application-icon-normal('italic', 6);
|
||||
@include application-icon-normal('underline', 7);
|
||||
@include application-icon-normal('align-left', 8);
|
||||
@include application-icon-normal('align-center', 9);
|
||||
@include application-icon-normal('align-right', 10);
|
||||
@include application-icon-normal('align-fill', 11);
|
||||
@include application-icon-normal('bullets', 12);
|
||||
@include application-icon-normal('spacing', 13);
|
||||
@include application-icon-normal('page-number', 14);
|
||||
@include application-icon-normal('insert', 15);
|
||||
@include application-icon-normal('search', 16);
|
||||
@include application-icon-normal('fullscreen', 17);
|
||||
@include application-icon-normal('spinner-down', 18);
|
||||
@include application-icon-normal('spinner-up', 19);
|
||||
@include application-icon-normal('superscript', 20);
|
||||
@include application-icon-normal('subscript', 21);
|
||||
@include application-icon-normal('table', 22);
|
||||
@include application-icon-normal('picture', 23);
|
||||
@include application-icon-normal('spacing', 24);
|
||||
@include application-icon-normal('indent-inc', 25);
|
||||
@include application-icon-normal('indent-dec', 26);
|
||||
@include application-icon-normal('numbering', 27);
|
||||
@include application-icon-normal('outline', 28);
|
||||
@include application-icon-normal('insert-row', 29);
|
||||
@include application-icon-normal('insert-column', 30);
|
||||
@include application-icon-normal('highlightcolor',31);
|
||||
@include application-icon-normal('textcolor', 32);
|
||||
@include application-icon-normal('textbigger', 33);
|
||||
@include application-icon-normal('textless', 34);
|
||||
@include application-icon-normal('spinner-prev', 35);
|
||||
@include application-icon-normal('spinner-next', 36);
|
||||
|
||||
|
||||
@include common-button-ui('base', $base-color);
|
||||
@include common-button-ui('light', lighten($base-color, 100%));
|
||||
@include common-button-ui('base-blue', $active-color, 'dark');
|
||||
@include common-button-ui('back', $base-color);
|
||||
|
||||
/*
|
||||
* unsupport
|
||||
*/
|
||||
|
||||
//TODO: need retina resolution
|
||||
.unsuported-view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url(../img/ios-only.png) no-repeat center #efefef;
|
||||
background-attachment: fixed;
|
||||
z-index: 90000;
|
||||
}
|
||||
|
||||
/*
|
||||
* Additional styles
|
||||
*/
|
||||
|
||||
.x-button.text-offset-12 {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.x-button.text-offset-30 {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
/*
|
||||
* Application dataview
|
||||
*/
|
||||
|
||||
@mixin iconview-create-icon($cls, $index, $iconsize) {
|
||||
.x-dataview-item .icon.#{$cls}-#{$index} {
|
||||
background-position: 0 -1 * $index * $iconsize;
|
||||
}
|
||||
|
||||
.x-dataview-item {
|
||||
&.x-item-selected,
|
||||
&.x-item-pressed {
|
||||
.icon.#{$cls}-#{$index} {
|
||||
background-position: -1 * $iconsize -1 * $index * $iconsize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bullet-icon($index) {
|
||||
@include iconview-create-icon(bullet, $index, $bullet-icon-size);
|
||||
}
|
||||
|
||||
@mixin numbering-icon($index) {
|
||||
@include iconview-create-icon(numbering, $index, $numbering-icon-size);
|
||||
}
|
||||
|
||||
@mixin outline-icon($index) {
|
||||
@include iconview-create-icon(outline, $index, $outline-icon-size);
|
||||
}
|
||||
|
||||
.x-dataview {
|
||||
&.icon-view {
|
||||
.x-dataview-inner.x-scroll-scroller {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
.x-dataview-container {
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.x-dataview-item {
|
||||
display: inline-block;
|
||||
|
||||
&.x-item-pressed,
|
||||
&.x-item-selected {
|
||||
.item-inner {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.item-inner {
|
||||
display: inline-block;
|
||||
width: 77px;
|
||||
height: 77px;
|
||||
border: 1px solid darken($base-color, 6%);
|
||||
background: lighten($base-color, 100%);
|
||||
margin: -1px;
|
||||
|
||||
&.top-left {
|
||||
@include border-top-left-radius($form-fieldset-radius);
|
||||
}
|
||||
|
||||
&.top-right {
|
||||
@include border-top-right-radius($form-fieldset-radius);
|
||||
}
|
||||
|
||||
&.bottom-left {
|
||||
@include border-bottom-left-radius($form-fieldset-radius);
|
||||
}
|
||||
|
||||
&.bottom-right {
|
||||
@include border-bottom-right-radius($form-fieldset-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bullets {
|
||||
@include bullet-icon(0);
|
||||
@include bullet-icon(1);
|
||||
@include bullet-icon(2);
|
||||
@include bullet-icon(3);
|
||||
@include bullet-icon(4);
|
||||
@include bullet-icon(5);
|
||||
@include bullet-icon(6);
|
||||
@include bullet-icon(7);
|
||||
|
||||
.item-inner {
|
||||
.text {
|
||||
margin-top: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $bullet-icon-size;
|
||||
height: $bullet-icon-size;
|
||||
margin: 1.4em auto;
|
||||
background-image: url($icons-bullets-image);
|
||||
background-size: $bullet-icon-image-width $bullet-icon-image-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.numbering {
|
||||
@include numbering-icon(0);
|
||||
@include numbering-icon(1);
|
||||
@include numbering-icon(2);
|
||||
@include numbering-icon(3);
|
||||
@include numbering-icon(4);
|
||||
@include numbering-icon(5);
|
||||
@include numbering-icon(6);
|
||||
@include numbering-icon(7);
|
||||
|
||||
.item-inner {
|
||||
.text {
|
||||
position: relative;
|
||||
top: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $numbering-icon-size;
|
||||
height: $numbering-icon-size;
|
||||
margin: 0 auto;
|
||||
background-image: url($icons-numbering-image);
|
||||
background-size: $numbering-icon-image-width $numbering-icon-image-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.outline {
|
||||
@include outline-icon(0);
|
||||
@include outline-icon(1);
|
||||
@include outline-icon(2);
|
||||
|
||||
.item-inner {
|
||||
.text {
|
||||
position: relative;
|
||||
top: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $outline-icon-size;
|
||||
height: $outline-icon-size;
|
||||
margin: 0 auto;
|
||||
background-image: url($icons-outline-image);
|
||||
background-size: $outline-icon-image-width $outline-icon-image-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@mixin application-icon-normal($name, $index) {
|
||||
.x-button-icon.#{$name},
|
||||
.list-icon.#{$name} {
|
||||
background-image: url($icons-default-path);
|
||||
background-color: transparent;
|
||||
background-position: 0 -1 * $index * $icons-default-size;
|
||||
background-size: $icons-default-image-width $icons-default-image-height;
|
||||
}
|
||||
|
||||
.x-button-pressing,
|
||||
.x-button-pressed,
|
||||
.x-button-active,
|
||||
.x-item-pressed {
|
||||
.x-button-icon.#{$name},
|
||||
.list-icon.#{$name} {
|
||||
background-position: -1 * $icons-default-size -1 * $index * $icons-default-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
$icons-default-path : '../img/icons/icons-normal.png';
|
||||
$icons-bullets-image : '../img/icons/bullets-normal.png';
|
||||
$icons-numbering-image : '../img/icons/numbering-normal.png';
|
||||
$icons-outline-image : '../img/icons/outline-normal.png';
|
||||
$icons-setting-list-image : '../img/icons/list-normal.png';
|
||||
|
||||
@import 'application-base';
|
||||
@@ -0,0 +1,7 @@
|
||||
$icons-default-path : '../img/icons/icons-retina.png';
|
||||
$icons-bullets-image : '../img/icons/bullets-retina.png';
|
||||
$icons-numbering-image : '../img/icons/numbering-retina.png';
|
||||
$icons-outline-image : '../img/icons/outline-retina.png';
|
||||
$icons-setting-list-image : '../img/icons/list-retina.png';
|
||||
|
||||
@import 'application-base';
|
||||
@@ -0,0 +1,14 @@
|
||||
# Get the directory that this configuration file exists in
|
||||
dir = File.dirname(__FILE__)
|
||||
|
||||
# Load the sencha-touch framework automatically.
|
||||
load File.join(dir, '..', '..', '..', '..', '..', '3rdparty', 'touch', 'resources', 'themes')
|
||||
|
||||
# Add include path for command styles
|
||||
add_import_path File.join(dir, '..', '..', '..', '..', '..', 'apps', 'common', 'mobile', 'resources', 'sass')
|
||||
|
||||
# Compass configurations
|
||||
sass_path = dir
|
||||
css_path = File.join(dir, "..", "css")
|
||||
environment = :development
|
||||
output_style = :expanded
|
||||
@@ -0,0 +1,14 @@
|
||||
# Get the directory that this configuration file exists in
|
||||
dir = File.dirname(__FILE__)
|
||||
|
||||
# Load the sencha-touch framework automatically.
|
||||
load File.join(dir, '..', '..', '..', '..', '..', '3rdparty', 'touch', 'resources', 'themes')
|
||||
|
||||
# Add include path for command styles
|
||||
add_import_path File.join(dir, '..', '..', '..', '..', '..', 'apps', 'common', 'mobile', 'resources', 'sass')
|
||||
|
||||
# Compass configurations
|
||||
sass_path = dir
|
||||
css_path = File.join(dir, "..", "css")
|
||||
environment = :production
|
||||
output_style = :compressed
|
||||
Reference in New Issue
Block a user