{
  "name": "magcore-theme",
  "version": "1.3.0",
  "description": "Mag theme architecture version description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@192.168.1.222:/web/magsdk/theme.git"
  },
  "keywords": [
    "theme"
  ],
  "author": {
    "name": "Infomir",
    "email": "support@infomir.eu"
  },
  "license": "GPL-3.0",
  "readme": "magsdk theme architecture description\n=====================================\n\nAll themes for magcore platform apps should contains styles for [magsdk](https://www.npmjs.com/package/magsdk) components and special class styles.\n\n###App background\n\nTheme should set background to `body` tag to specify apps background, otherwise it will be transparent.\n\n###Components\n\nThis revision of theme architecture standard should contains styles for components:\n\n* mag-component-panel-set\n* mag-component-panel\n* mag-component-modal\n* mag-component-list \n* mag-component-layout-list \n* mag-component-radio-list \n* mag-component-check-list\n* mag-component-value-list\n* mag-component-footer\n* stb-component-button \n* spa-component-button\n* spa-component-scrollbar\n* stb-component-scrollbar \n* spa-component-checkbox\n\nAll components should be `1.*.*` version.\n\n###Variables access\n\nSince v1.3.0 themes should contains `main.json` file with exported color variables, that may be used in applications code.\n\n###Special classes\n\nTheme should contains special classes for common things for components and developers, who wants to make they non magsdk components or styles looks like the same appearance.\n\n* `.theme-focus` - focus element (such as focus item, in list)\n* `.theme-color-text` - special text color\n* `.theme-main` - main part of some component (body html node of component)\n* `.theme-footer` - class to separate footer from content @deprecated - use '-separator-' classes\n* `.theme-header` - class to separate header from content @deprecated - use '-separator-' classes\n* `.theme-separator-top` - top separator line\n* `.theme-separator-bottom` - bottom separator line\n* `.theme-separator-left` - left separator line\n* `.theme-separator-right` - right separator line\n* `.theme-subhead-color` - color of subhead text\n* `.theme-item-editable` - mark some item as editable (e.g. pen icon in theme graphite)\n* `.theme-item-more` - mark some item as possible to interact\n* `.theme-title-color` - title color\n* `.theme-additional-text` - additional text color\n* `.theme-color-warning` - warning color (e.g. color of warning icon)\n* `.theme-color-success` - success color (e.g. color of success icon)\n* `.theme-color-error` - error color (e.g. color of error icon)\n* `.theme-icon` - together with special icon class add this icon to html node as `:before` pseudo element\n* `.theme-text-disabled` - text that reflects disabled element state\n* `.theme-counter` - class to draw item counter\n* `.theme-h2` - h2 heading\n* `.theme-border` - special theme border style\n* `.theme-border-top` - only top border\n* `.theme-border-bottom` - only bottom border\n* `.theme-border-left` - only left border\n* `.theme-border-right` - only right border\n\n###Component dependent classes\n\n#####Padded\n\nAll `-component-list*` items should have zero padding (`padding:0;`) by default and special class `padded` add paddings to items.\n\n\n#####Width2x\n`mag-component-modal` have fixed width of 20% and if you want to make your modal 40% you should add `width2x` class.\n\n###Special page layouts\n\n####Progress layout\n`Progress layout` - is kind of typical page with big progressbar in center and some content.\nIt is default html structure to create page with progress layout.\n```html\n.theme-progress-layout - layout container\n    .theme-progress-header - layout header\n    .theme-progress-content - page content\n    .theme-progressbar - add this class to `-component-scrollbar`\n    .theme-progressbar-value - progressbar value \n```\n\n###Icons\n\n List of icons:\n * `theme-icon-rc-f1`\n * `theme-icon-rc-f2`\n * `theme-icon-rc-f3`\n * `theme-icon-rc-f4`\n * `theme-icon-plus`\n * `theme-icon-rc-play-pause`\n * `theme-icon-rc-ok`\n * `theme-icon-rc-info`\n * `theme-icon-rc-menu`\n * `theme-icon-rc-back`\n * `theme-icon-rc-home`\n * `theme-icon-rc-vk`\n * `theme-icon-rc-stop`\n * `theme-icon-rc-previous`\n * `theme-icon-rc-next`\n * `theme-icon-rc-rewind`\n * `theme-icon-rc-forward`\n * `theme-icon-rc-settings`\n * `theme-icon-rc-volume-up`\n * `theme-icon-rc-volume-down`\n * `theme-icon-rc-mute`\n * `theme-icon-rc-aspect`\n * `theme-icon-rc-power`\n * `theme-icon-rc-app`\n * `theme-icon-rc-tv`\n * `theme-icon-rc-refresh`\n * `theme-icon-play`\n * `theme-icon-pause`\n * `theme-icon-previous`\n * `theme-icon-next`\n * `theme-icon-rewind`\n * `theme-icon-forward`\n * `theme-icon-exit`\n * `theme-icon-channel-minus`\n * `theme-icon-channel-plus`\n * `theme-icon-volume`\n * `theme-icon-pip`\n * `theme-icon-mute`\n * `theme-icon-favorite-active`\n * `theme-icon-favorite`\n * `theme-icon-timeshift`\n * `theme-icon-display`\n * `theme-icon-sound`\n * `theme-icon-aspect`\n * `theme-icon-menu`\n * `theme-icon-categories`\n * `theme-icon-equalizer`\n * `theme-icon-sort-az`\n * `theme-icon-search`\n * `theme-icon-settings`\n * `theme-icon-lock`\n * `theme-icon-radio`\n * `theme-icon-radio-active`\n * `theme-icon-sun`\n * `theme-icon-moon`\n * `theme-icon-cloud-sun`\n * `theme-icon-cloud-moon`\n * `theme-icon-rain`\n * `theme-icon-heavy-rain`\n * `theme-icon-snow`\n * `theme-icon-cloud`\n * `theme-icon-cloud-sun-2`\n * `theme-icon-equalizer-0`\n * `theme-icon-equalizer-1`\n * `theme-icon-equalizer-2`\n * `theme-icon-equalizer-3`\n * `theme-icon-equalizer-4`\n * `theme-icon-up`\n * `theme-icon-down`\n * `theme-icon-warning`\n * `theme-icon-filter`\n * `theme-icon-clock`\n * `theme-icon-ok`\n * `theme-icon-cancel`\n * `theme-icon-genres`\n * `theme-icon-teletext`\n * `theme-icon-sublitles`\n * `theme-icon-checkbox`\n * `theme-icon-checkbox-active`\n * `theme-icon-back`\n * `theme-icon-sd-card`\n * `theme-icon-hdd`\n * `theme-icon-usb`\n * `theme-icon-network`\n * `theme-icon-upnp`\n * `theme-icon-file`\n * `theme-icon-folder`\n * `theme-icon-workgroup`\n * `theme-icon-server`\n * `theme-icon-shared-folder`\n * `theme-icon-shortcut`\n * `theme-icon-audio`\n * `theme-icon-image`\n * `theme-icon-video`\n * `theme-icon-text`\n * `theme-icon-stream`\n * `theme-icon-record`\n * `theme-icon-dvb`\n * `theme-icon-iso`\n * `theme-icon-cue`\n * `theme-icon-playlist`\n * `theme-icon-select-all`\n * `theme-icon-move`\n * `theme-icon-edit`\n * `theme-icon-more`\n * `theme-icon-create-folder`\n * `theme-icon-not-allowed`\n * `theme-icon-home`\n * `theme-icon-refresh`\n * `theme-icon-internet`\n * `theme-icon-lan`\n * `theme-icon-stop`\n * `theme-icon-scale`\n * `theme-icon-virtual-mouse`\n * `theme-icon-navigate`\n * `theme-icon-download`\n * `theme-icon-avatar`\n * `theme-icon-monitor`\n * `theme-icon-support`\n * `theme-icon-slideshow`\n * `theme-icon-shuffle`\n * `theme-icon-repeat`\n * `theme-icon-rotate`\n * `theme-icon-rotate-back`\n * `theme-icon-toggle`\n * `theme-icon-toggle-active`\n * `theme-icon-timezone`\n * `theme-icon-ntp-server`\n * `theme-icon-languages`\n * `theme-icon-font-size`\n * `theme-icon-color`\n * `theme-icon-sand-clock`\n * `theme-icon-DVB`\n * `theme-icon-dvb-power-on`\n * `theme-icon-teletext-ratio`\n * `theme-icon-opacity`\n * `theme-icon-update`\n * `theme-icon-rc`\n * `theme-icon-standby`\n * `theme-icon-clear`\n * `theme-icon-reload`\n * `theme-icon-reboot`\n * `theme-icon-linked`\n * `theme-icon-wifi`\n * `theme-icon-multicast`\n * `theme-icon-interface`\n * `theme-icon-hdmi`\n * `theme-icon-screensaver`\n * `theme-icon-screensaver-interval`\n * `theme-icon-brightness`\n * `theme-icon-brightness-standby`\n * `theme-icon-portal`\n * 'theme-icon-beta'\n * 'theme-icon-alarm-clock'\n\n####Additional icons classes:\n`active` - add this class to set icon as active and add special color\n`disabled` - add this class to set icon as disabled add special color\n\n###App dependent classes\n\n####magcore-app-tv\n`magcore-app-tv` contains page with unique html page-proofs, so theme's, that want to support this app should contain's special classes for it.\nThis classes describes view of page with epg programs grid:\n\n* `.theme-epg-grid-main` - main part of epg grid view content\n* `.theme-epg-grid-date` - epg grid date background\n* `.theme-epg-grid-hourmark` - epg grid hourmark\n* `.theme-epg-grid-timeline` - timeline\n* `.theme-epg-grid-timemark` - epg timemark\n* `.theme-epg-grid-default` - default item in grid\n* `.theme-epg-grid-played` - played item in grid\n* `.theme-epg-grid-current` - current item in grid\n* `.theme-epg-grid-noData` - item with unknown data in grid\n* `.theme-epg-grid-focused` - focused item in grid\n* `.theme-epg-grid-timeshift` - item in grid with timeshift\n* `.theme-epg-grid-arrow-left` - navigate arrow left \n* `.theme-epg-grid-arrow-right` - navigate arrow right\n\n\nWatch icons example [here](https://github.com/magcore/theme-graphite/index.html) \n",
  "readmeFilename": "readme.md",
  "_id": "magcore-theme@1.3.0",
  "_from": "magcore-theme@1.3.0",
  "dist": {
    "shasum": "59b995452df2b70bb05d2776df8366736dd6a373"
  },
  "_resolved": "http://registry.npmjs.org/magcore-theme/-/magcore-theme-1.3.0.tgz"
}