magsdk theme architecture description

All themes for magcore platform apps should contains styles for magsdk components and special class styles.

###App background

Theme should set background to body tag to specify apps background, otherwise it will be transparent.

###Components

This revision of theme architecture standard should contains styles for components:

• mag-component-panel-set
• mag-component-panel
• mag-component-modal
• mag-component-list
• mag-component-layout-list
• mag-component-radio-list
• mag-component-check-list
• mag-component-value-list
• mag-component-footer
• stb-component-button
• spa-component-button
• spa-component-scrollbar
• stb-component-scrollbar
• spa-component-checkbox

All components should be 1.*.* version.

###Variables access

Since v1.3.0 themes should contains main.json file with exported color variables, that may be used in applications code.

###Special classes

Theme 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.

• .theme-focus - focus element (such as focus item, in list)
• .theme-color-text - special text color
• .theme-styled-text - special styled text color
• .theme-styled-background - special styled background color
• .theme-main - main part of some component (body html node of component)
• .theme-footer - class to separate footer from content @deprecated - use '-separator-' classes
• .theme-header - class to separate header from content @deprecated - use '-separator-' classes
• .theme-separator-top - top separator line
• .theme-separator-bottom - bottom separator line
• .theme-separator-left - left separator line
• .theme-separator-right - right separator line
• .theme-subhead-color - color of subhead text
• .theme-item-editable - mark some item as editable (e.g. pen icon in theme graphite)
• .theme-item-more - mark some item as possible to interact
• .theme-title-color - title color
• .theme-additional-text - additional text color
• .theme-color-warning - warning color (e.g. color of warning icon)
• .theme-color-success - success color (e.g. color of success icon)
• .theme-color-error - error color (e.g. color of error icon)
• .theme-icon - together with special icon class add this icon to html node as :before pseudo element
• .theme-text-disabled - text that reflects disabled element state
• .theme-text-password - password styles for text
• .theme-counter - class to draw item counter
• .theme-h2 - h2 heading
• .theme-border - special theme border style
• .theme-border-top - only top border
• .theme-border-bottom - only bottom border
• .theme-border-left - only left border
• .theme-border-right - only right border
• .theme-equalizer-animated - draw animated equalizer. Html element with this class must contain child div element

###Component dependent classes

#####Padded

All -component-list* items should have zero padding (padding:0;) by default and special class padded add paddings to items.

#####Width2x mag-component-modal have fixed width of 20% and if you want to make your modal 40% you should add width2x class.

###Special page layouts

####Progress layout Progress layout - is kind of typical page with big progressbar in center and some content. It is default html structure to create page with progress layout.

.theme-progress-layout - layout container
    .theme-progress-header - layout header
    .theme-progress-content - page content
    .theme-progressbar - add this class to `-component-scrollbar`
    .theme-progressbar-value - progressbar value

###Icons

List of icons:

• theme-icon-rc-f1
• theme-icon-rc-f2
• theme-icon-rc-f3
• theme-icon-rc-f4
• theme-icon-plus
• theme-icon-rc-play-pause
• theme-icon-rc-ok
• theme-icon-rc-info
• theme-icon-rc-menu
• theme-icon-rc-back
• theme-icon-rc-home
• theme-icon-rc-vk
• theme-icon-rc-stop
• theme-icon-rc-previous
• theme-icon-rc-next
• theme-icon-rc-rewind
• theme-icon-rc-forward
• theme-icon-rc-settings
• theme-icon-rc-volume-up
• theme-icon-rc-volume-down
• theme-icon-rc-mute
• theme-icon-rc-aspect
• theme-icon-rc-power
• theme-icon-rc-app
• theme-icon-rc-tv
• theme-icon-rc-refresh
• theme-icon-play
• theme-icon-pause
• theme-icon-previous
• theme-icon-next
• theme-icon-rewind
• theme-icon-forward
• theme-icon-exit
• theme-icon-channel-minus
• theme-icon-channel-plus
• theme-icon-volume
• theme-icon-pip
• theme-icon-mute
• theme-icon-favorite-active
• theme-icon-favorite
• theme-icon-timeshift
• theme-icon-display
• theme-icon-sound
• theme-icon-aspect
• theme-icon-menu
• theme-icon-categories
• theme-icon-equalizer
• theme-icon-sort-az
• theme-icon-search
• theme-icon-settings
• theme-icon-lock
• theme-icon-radio
• theme-icon-radio-active
• theme-icon-sun
• theme-icon-moon
• theme-icon-cloud-sun
• theme-icon-cloud-moon
• theme-icon-rain
• theme-icon-heavy-rain
• theme-icon-snow
• theme-icon-cloud
• theme-icon-cloud-sun-2
• theme-icon-equalizer-0
• theme-icon-equalizer-1
• theme-icon-equalizer-2
• theme-icon-equalizer-3
• theme-icon-equalizer-4
• theme-icon-up
• theme-icon-down
• theme-icon-warning
• theme-icon-filter
• theme-icon-clock
• theme-icon-ok
• theme-icon-cancel
• theme-icon-genres
• theme-icon-teletext
• theme-icon-sublitles
• theme-icon-checkbox
• theme-icon-checkbox-active
• theme-icon-back
• theme-icon-sd-card
• theme-icon-hdd
• theme-icon-usb
• theme-icon-network
• theme-icon-upnp
• theme-icon-file
• theme-icon-folder
• theme-icon-workgroup
• theme-icon-server
• theme-icon-shared-folder
• theme-icon-shortcut
• theme-icon-audio
• theme-icon-image
• theme-icon-video
• theme-icon-text
• theme-icon-stream
• theme-icon-record
• theme-icon-dvb
• theme-icon-iso
• theme-icon-cue
• theme-icon-playlist
• theme-icon-select-all
• theme-icon-move
• theme-icon-edit
• theme-icon-more
• theme-icon-create-folder
• theme-icon-not-allowed
• theme-icon-home
• theme-icon-refresh
• theme-icon-internet
• theme-icon-lan
• theme-icon-stop
• theme-icon-scale
• theme-icon-virtual-mouse
• theme-icon-navigate
• theme-icon-download
• theme-icon-avatar
• theme-icon-monitor
• theme-icon-support
• theme-icon-slideshow
• theme-icon-shuffle
• theme-icon-repeat
• theme-icon-rotate
• theme-icon-rotate-back
• theme-icon-toggle
• theme-icon-toggle-active
• theme-icon-timezone
• theme-icon-ntp-server
• theme-icon-languages
• theme-icon-font-size
• theme-icon-color
• theme-icon-sand-clock
• theme-icon-DVB
• theme-icon-dvb-power-on
• theme-icon-teletext-ratio
• theme-icon-opacity
• theme-icon-update
• theme-icon-rc
• theme-icon-standby
• theme-icon-clear
• theme-icon-reload
• theme-icon-reboot
• theme-icon-linked
• theme-icon-wifi
• theme-icon-multicast
• theme-icon-interface
• theme-icon-hdmi
• theme-icon-screensaver
• theme-icon-screensaver-interval
• theme-icon-brightness
• theme-icon-brightness-standby
• theme-icon-portal
• 'theme-icon-beta'
• 'theme-icon-alarm-clock'
• 'theme-icon-hardware-acceleration'

####Additional icons classes: active - add this class to set icon as active and add special color disabled - add this class to set icon as disabled add special color

###App dependent classes

####magcore-app-tv 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. This classes describes view of page with epg programs grid:

• .theme-epg-grid-main - main part of epg grid view content
• .theme-epg-grid-date - epg grid date background
• .theme-epg-grid-hourmark - epg grid hourmark
• .theme-epg-grid-timeline - timeline
• .theme-epg-grid-timemark - epg timemark
• .theme-epg-grid-default - default item in grid
• .theme-epg-grid-played - played item in grid
• .theme-epg-grid-current - current item in grid
• .theme-epg-grid-noData - item with unknown data in grid
• .theme-epg-grid-focused - focused item in grid
• .theme-epg-grid-timeshift - item in grid with timeshift
• .theme-epg-grid-arrow-left - navigate arrow left
• .theme-epg-grid-arrow-right - navigate arrow right

Watch icons example here