├── tamia ├── modules │ ├── spinner │ │ ├── example.html │ │ ├── spinner.gif │ │ ├── Readme.md │ │ ├── script.js │ │ └── index.styl │ ├── rouble │ │ ├── example.html │ │ ├── fonts │ │ │ └── rouble-arial-regular.woff │ │ ├── Readme.md │ │ └── index.styl │ ├── fade │ │ ├── example.html │ │ ├── mask.svg │ │ ├── Readme.md │ │ ├── mask_src.svg │ │ └── index.styl │ ├── tooltip │ │ ├── example.html │ │ ├── Readme.md │ │ └── index.styl │ ├── code │ │ ├── example.html │ │ ├── Readme.md │ │ ├── index.styl │ │ └── tomorrow.styl │ ├── checkbox │ │ ├── radio.svg │ │ ├── check.svg │ │ ├── Readme.md │ │ ├── example.html │ │ └── index.styl │ ├── select │ │ ├── arrow.svg │ │ ├── example.html │ │ ├── Readme.md │ │ ├── script.js │ │ └── index.styl │ ├── text │ │ ├── example.html │ │ ├── Readme.md │ │ └── index.styl │ ├── password │ │ ├── example.html │ │ ├── Readme.md │ │ ├── index.styl │ │ └── script.js │ ├── list │ │ ├── example.html │ │ ├── Readme.md │ │ └── index.styl │ ├── media │ │ ├── example.html │ │ ├── index.styl │ │ └── Readme.md │ ├── flippable │ │ ├── example.html │ │ ├── Readme.md │ │ ├── script.js │ │ └── index.styl │ ├── table │ │ ├── Readme.md │ │ ├── example.html │ │ └── index.styl │ ├── print │ │ ├── Readme.md │ │ └── index.styl │ ├── preload │ │ ├── Readme.md │ │ └── script.js │ ├── switcher │ │ ├── example.html │ │ ├── Readme.md │ │ └── index.styl │ ├── modal │ │ ├── example.html │ │ ├── index.styl │ │ ├── Readme.md │ │ └── script.js │ ├── toggle │ │ ├── index.styl │ │ ├── example.html │ │ ├── Readme.md │ │ └── script.js │ ├── form │ │ ├── example.html │ │ ├── Readme.md │ │ ├── script.js │ │ └── index.styl │ └── richtypo │ │ ├── Readme.md │ │ └── index.styl ├── tamia │ ├── functions.styl │ ├── classes.styl │ ├── index.styl │ ├── mediaqueries.styl │ ├── images.styl │ ├── bootstrap.styl │ ├── misc.styl │ ├── component.js │ ├── links.styl │ ├── opor.js │ ├── layout.styl │ └── tamia.js └── vendor │ └── transition-events.js ├── .gitignore ├── .travis.yml ├── app ├── alt.js ├── app.js ├── actions │ └── locationactions.js ├── components │ ├── weathericon.js │ ├── footer.js │ ├── application.js │ ├── header.js │ ├── intervalselect.js │ ├── dashboard.js │ ├── dashboardcontainer.js │ ├── locationform.js │ ├── select.js │ └── weatherwidget.js ├── stores │ └── locations.js └── utils │ └── weatherdata.js ├── styles ├── blocks │ ├── footer.styl │ ├── header.styl │ ├── weather-icon.styl │ ├── dashboard.styl │ ├── location-form.styl │ └── weather-widget.styl ├── styles.styl └── index.styl ├── .editorconfig ├── bower.json ├── index.html ├── package.json ├── icons ├── sw-03.svg ├── sw-04.svg ├── sw-11.svg ├── sw-09.svg ├── sw-01.svg ├── sw-02.svg ├── sw-50.svg ├── sw-10.svg └── sw-13.svg ├── License.md ├── webpack.config.js ├── Readme.md ├── .eslintrc └── gulpfile.js /tamia/modules/spinner/example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | dist 4 | .publish 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | - "0.12" 5 | -------------------------------------------------------------------------------- /tamia/modules/rouble/example.html: -------------------------------------------------------------------------------- 1 |

499 Р

2 | -------------------------------------------------------------------------------- /tamia/modules/fade/example.html: -------------------------------------------------------------------------------- 1 |

2 | -------------------------------------------------------------------------------- /app/alt.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import Alt from 'alt'; 4 | export default new Alt(); 5 | -------------------------------------------------------------------------------- /tamia/modules/tooltip/example.html: -------------------------------------------------------------------------------- 1 | +7 495 212-85-06 2 | -------------------------------------------------------------------------------- /tamia/modules/code/example.html: -------------------------------------------------------------------------------- 1 | 
alert('Hello world!');
2 | -------------------------------------------------------------------------------- /tamia/modules/spinner/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sapegin/react-weather/HEAD/tamia/modules/spinner/spinner.gif -------------------------------------------------------------------------------- /styles/blocks/footer.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | .footer { 4 | font-size:12px; 5 | opacity:.5; 6 | } 7 | -------------------------------------------------------------------------------- /styles/blocks/header.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | .header { 4 | space(4); 5 | font-size:32px; 6 | } 7 | -------------------------------------------------------------------------------- /tamia/modules/checkbox/radio.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tamia/modules/select/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tamia/modules/text/example.html: -------------------------------------------------------------------------------- 1 |
2 |

3 |

4 |

5 |
6 | -------------------------------------------------------------------------------- /styles/blocks/weather-icon.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | .weather-icon { 4 | width:80px; 5 | height:auto; 6 | } 7 | -------------------------------------------------------------------------------- /tamia/modules/password/example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /tamia/modules/rouble/fonts/rouble-arial-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sapegin/react-weather/HEAD/tamia/modules/rouble/fonts/rouble-arial-regular.woff -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import Application from './components/application'; 4 | 5 | React.render(React.createElement(Application), document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /tamia/modules/list/example.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /tamia/modules/media/example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 |
5 | -------------------------------------------------------------------------------- /tamia/modules/checkbox/check.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tamia/modules/rouble/Readme.md: -------------------------------------------------------------------------------- 1 | # Rouble ß 2 | 3 | Russian Rouble sign. 4 | 5 | 6 | ## Markup 7 | 8 |

100 Р

9 | 10 | 11 | ## Caveats 12 | 13 | * IE9+. 14 | * Only one font (Arial) is available now. 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /styles/blocks/dashboard.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | .dashboard { 4 | space(4); 5 | display:flex; 6 | justify-content:space-between; 7 | flex-wrap:wrap; 8 | margin-side:-(spacer); 9 | 10 | &__placeholder { 11 | margin-side:spacer; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "deliveryhero-test", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "dependencies": { 7 | "alt": "~0.14.4", 8 | "react": "~0.13.1", 9 | "fetch": "~0.7.0", 10 | "moment": "~2.9.0", 11 | "bem-cn": "~0.0.3" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tamia/modules/fade/mask.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tamia/modules/flippable/example.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /tamia/modules/fade/Readme.md: -------------------------------------------------------------------------------- 1 | # Fade 2 | 3 | Fading text. 4 | 5 | 6 | ## Markup 7 | 8 |
Very long text
9 | 10 | 11 | ## Caveats 12 | 13 | Works best in Webkits (via `mask-image`). Works acceptable in Firefox (via SVG mask): fade width is fixed. Fades with ellipsis in any IE. 14 | 15 | -------------------------------------------------------------------------------- /tamia/modules/table/Readme.md: -------------------------------------------------------------------------------- 1 | # Tables 2 | 3 | Basic tables styles. 4 | 5 | 6 | ## Markup 7 | 8 | 9 | 10 | 11 | 12 | ... 13 | 14 | 15 | 16 | 17 | 18 | ... 19 | 20 | ... 21 | 22 |
Header
Data
23 | -------------------------------------------------------------------------------- /tamia/modules/print/Readme.md: -------------------------------------------------------------------------------- 1 | # Print 2 | 3 | Print stylesheet. 4 | 5 | 6 | ## Configuration 7 | 8 | ### site_domain 9 | 10 | Type: String. 11 | 12 | Site domain (for example, `example.com`) that will be printed. 13 | 14 | 15 | ## Caveats 16 | 17 | Use `.no-print` class to hide elements in print version and `.print` to show (hidden on screen). 18 | -------------------------------------------------------------------------------- /tamia/modules/tooltip/Readme.md: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | 3 | Simple tooltips. 4 | 5 | 6 | ## Markup 7 | 8 |
I’m tooltip!
9 | 10 | +7 495 212-85-06 11 | 12 | 13 | ## Skin 14 | 15 | Set `tooltip_default_skin` or `modules_default_skin` to `true` to enable default skin. 16 | -------------------------------------------------------------------------------- /tamia/modules/select/example.html: -------------------------------------------------------------------------------- 1 |
2 | 9 |
10 | -------------------------------------------------------------------------------- /tamia/modules/preload/Readme.md: -------------------------------------------------------------------------------- 1 | # Preload 2 | 3 | Image preload. 4 | 5 | 6 | ## Usage 7 | 8 | preload( 9 | [ 10 | '../images/homepage-iphone.png', 11 | '../images/homepage-iphone-screenshot.png' 12 | ], 13 | function(err) { 14 | // `err` contains array of not loaded images or null 15 | console.log('Images preloaded. Errors:', err); 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /app/actions/locationactions.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import alt from '../alt'; 6 | 7 | class LocationActions { 8 | constructor() { 9 | this.generateActions( 10 | 'remove' 11 | ); 12 | } 13 | 14 | create(name, interval) { 15 | this.dispatch({name, interval}); 16 | } 17 | } 18 | 19 | export default alt.createActions(LocationActions); 20 | -------------------------------------------------------------------------------- /styles/styles.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | body { 4 | background:bg_color; 5 | color:base_color; 6 | line-height:1.5; 7 | padding:spacer*2; 8 | font-size:16px; 9 | if (max_width) { 10 | max-width:max_width; 11 | margin-left:auto; 12 | margin-right:auto; 13 | } 14 | } 15 | 16 | 17 | // Fonts 18 | 19 | body { font-family:"Helvetica Neue", Arial, sans-serif; } 20 | -------------------------------------------------------------------------------- /styles/blocks/location-form.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | .location-form { 4 | &__field { 5 | width:20em; 6 | display:inline-block; 7 | margin-right:spacer; 8 | vertical-align:middle; 9 | } 10 | 11 | &__interval { 12 | width:6em; 13 | display:inline-block; 14 | margin-right:spacer; 15 | vertical-align:middle; 16 | } 17 | 18 | &__submit { 19 | width:10em; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tamia/modules/media/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Media object 3 | // Based on https://github.com/csswizardry/inuit.css/blob/master/objects/_media.scss 4 | 5 | .media 6 | clearfix() 7 | display: block 8 | 9 | &__img 10 | float: left 11 | margin-right: spacer 12 | &__img_rev 13 | float: right 14 | margin-right: 0 15 | margin-left: spacer 16 | 17 | &__body 18 | overflow: hidden 19 | -------------------------------------------------------------------------------- /tamia/tamia/functions.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Functions 3 | 4 | // White color with transparency. 5 | // 6 | // opacity - Opacity value (0—1). 7 | // 8 | // Returns color. 9 | white(opacity) 10 | rgba(255, 255, 255, opacity) 11 | 12 | // Black color with transparency. 13 | // 14 | // opacity - Opacity value (0—1). 15 | // 16 | // Returns color. 17 | black(opacity) 18 | rgba(0, 0, 0, opacity) 19 | -------------------------------------------------------------------------------- /app/components/weathericon.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | export default React.createClass({ 6 | displayName: 'WeatherIcon', 7 | propTypes: { 8 | icon: React.PropTypes.string.isRequired 9 | }, 10 | 11 | render: function() { 12 | let src = `icons/sw-${this.props.icon}.svg`; 13 | return ( 14 | 15 | ); 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /tamia/modules/fade/mask_src.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /tamia/modules/fade/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Fading text 3 | // Based on http://mir.aculo.us/2012/09/16/masking-html-elements-with-gradient-based-fadeouts/ + thanks to @kizu 4 | 5 | .fade 6 | display: block 7 | overflow: hidden 8 | white-space: nowrap 9 | mask: embedurl("mask.svg#fade-mask") // Firefox 10 | -webkit-mask: -webkit-linear-gradient(right, transparent 0, #000 3em) // Webkit 11 | -ms-text-overflow: ellipsis // IE 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Weather 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /tamia/tamia/classes.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2015 Artem Sapegin http://sapegin.me 2 | // Helper classes 3 | 4 | // Element is hidden. 5 | .is-hidden 6 | display: none !important 7 | 8 | // Element is invisible (but occupies place on page). 9 | .is-invisible 10 | visibility: hidden 11 | 12 | /// Element is in transit between hidden (.is-hidden) and visible. 13 | .is-transit 14 | display: block !important 15 | &.l-center 16 | display: table !important 17 | 18 | // Clearfix. 19 | .group 20 | clearfix() 21 | -------------------------------------------------------------------------------- /tamia/modules/rouble/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Russian Rouble sign ß 3 | 4 | // IE9+ 5 | // Details: http://artgorbunov.ru/bb/soviet/20120223/ 6 | // Fonts from http://www.artlebedev.ru/kovodstvo/sections/159/ 7 | 8 | @font-face 9 | font-family: 'ALSRubl-Arial' 10 | src: embedurl('fonts/rouble-arial-regular.woff') format('woff') 11 | font-weight: normal 12 | font-style: normal 13 | 14 | .rub, 15 | .rub_arial 16 | font-family: 'ALSRubl-Arial' 17 | line-height: normal 18 | -------------------------------------------------------------------------------- /tamia/modules/select/Readme.md: -------------------------------------------------------------------------------- 1 | # Select 2 | 3 | Select with custom design 4 | 5 | 6 | ## Markup 7 | 8 |
9 | 16 |
17 | 18 | 19 | ## Skin 20 | 21 | Set `select_default_skin` or `modules_default_skin` to `true` to enable default skin. 22 | -------------------------------------------------------------------------------- /app/components/footer.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | export default React.createClass({ 6 | displayName: 'Footer', 7 | 8 | render: function() { 9 | return ( 10 | 15 | ); 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /styles/index.styl: -------------------------------------------------------------------------------- 1 | /* Author: Artem Sapegin, http://sapegin.me, 2015 */ 2 | 3 | max_width = 1600px; 4 | sticky_footer_height = 22px; 5 | spacer = 10px; 6 | bg_color = #fff; 7 | base_color = #111; 8 | light_color = #ccc; 9 | error_color = #e80b0b; 10 | link_style = "underline"; 11 | link_color = base_color; 12 | visited_color = base_color; 13 | hover_color = #f58720; 14 | 15 | @import "tamia"; 16 | @import "modules/select"; 17 | @import "modules/form"; 18 | @import "modules/spinner"; 19 | @import "styles"; 20 | 21 | @import "blocks/*"; 22 | -------------------------------------------------------------------------------- /tamia/modules/switcher/example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /app/components/application.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import Header from './header'; 6 | import Footer from './footer'; 7 | import DashboardContainer from './dashboardcontainer'; 8 | import LocationForm from './locationform'; 9 | 10 | export default React.createClass({ 11 | displayName: 'Application', 12 | 13 | render: function() { 14 | return ( 15 |
16 |
17 | 18 | 19 |
21 | ); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /app/components/header.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import moment from 'moment'; 6 | 7 | export default React.createClass({ 8 | displayName: 'Header', 9 | 10 | weekdays: [ 11 | 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' 12 | ], 13 | 14 | render: function() { 15 | let weekday = this.weekdays[moment().weekday()]; 16 | let date = moment().format('MMMM D'); 17 | return ( 18 |
{weekday}, {date}
19 | ); 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /tamia/modules/modal/example.html: -------------------------------------------------------------------------------- 1 |
Open popup
2 | 15 | -------------------------------------------------------------------------------- /tamia/modules/password/Readme.md: -------------------------------------------------------------------------------- 1 | # Password field 2 | 3 | Password field with toggle to show characters. 4 | 5 | 6 | ## Markup 7 | 8 |
9 | 10 |
11 | 12 | 13 | ## States 14 | 15 | ### .password.is-ok 16 | 17 | Browser is supported. 18 | 19 | ### .password.is-unlocked 20 | 21 | Password characters are visible. 22 | 23 | 24 | ## Caveats 25 | 26 | IE9+. 27 | 28 | 29 | ## Skin 30 | 31 | Set `password_default_skin` or `modules_default_skin` to `true` to enable default skin. 32 | -------------------------------------------------------------------------------- /tamia/modules/table/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | -------------------------------------------------------------------------------- /tamia/modules/toggle/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Toggle 3 | 4 | toggle_transition_time ?= .3s 5 | 6 | .toggle-element 7 | transition: all toggle_transition_time ease-in-out-cubic 8 | 9 | &.is-hidden 10 | opacity: 0 11 | 12 | &.is-transit 13 | display: block 14 | transform: translateZ(0) 15 | 16 | &.toggle-transition-slide 17 | transition: all toggle_transition_time linear 18 | backface-visibility: hidden 19 | 20 | &.toggle-transition-slide.is-hidden 21 | opacity: 1 22 | transform: translateZ(0) rotateX(90deg) 23 | 24 | .toggle-crossfade-wrapper 25 | & > * 26 | position: absolute 27 | -------------------------------------------------------------------------------- /app/components/intervalselect.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import Select from './select'; 6 | 7 | const MSECS_IN_MIN = 60000; 8 | 9 | export default React.createClass({ 10 | displayName: 'IntervalSelect', 11 | 12 | getDefaultProps: function() { 13 | return { 14 | items: { 15 | '30 sec': MSECS_IN_MIN / 2, 16 | '1 min': MSECS_IN_MIN, 17 | '5 min': 5 * MSECS_IN_MIN, 18 | '10 min': 10 * MSECS_IN_MIN 19 | } 20 | }; 21 | }, 22 | 23 | getValue: function() { 24 | return this.refs.select.getValue(); 25 | }, 26 | 27 | render: function() { 28 | return ( 29 | 4 | 5 |
6 | 7 |
8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 |
Thank you!
16 |
Are you sure?
17 |
Not enough cheese
18 | 19 |
20 | 21 | 22 |
23 | -------------------------------------------------------------------------------- /tamia/modules/switcher/Readme.md: -------------------------------------------------------------------------------- 1 | # Switcher 2 | 3 | Nice looking radio buttons group. 4 | 5 | 6 | ## Markup 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | ## Skin 19 | 20 | Set `switcher_default_skin` or `modules_default_skin` to `true` to enable default skin. 21 | -------------------------------------------------------------------------------- /tamia/modules/media/Readme.md: -------------------------------------------------------------------------------- 1 | # Media object 2 | 3 | Media object from OOCSS. 4 | 5 | 6 | ## Markup 7 | 8 |
9 | 10 |

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”

11 |
12 | 13 | 14 | ## Modifiers 15 | 16 | ### .media__img.media__img_rev 17 | 18 | Reversed image location (right instead of left). 19 | 20 | ```html 21 | 22 | ``` 23 | -------------------------------------------------------------------------------- /tamia/modules/code/Readme.md: -------------------------------------------------------------------------------- 1 | # Code blocks 2 | 3 | Nice code examples with highlighting. 4 | 5 | 6 | ## Markup 7 | 8 | 
alert 'Hello world!'
9 | 10 |
11 | 
alert 'Hello world!'
12 |
13 | 14 | 15 | ## Skin 16 | 17 | Set `code_default_skin` or `modules_default_skin` to `true` to enable default skin. 18 | 19 | 20 | ## Configuration 21 | 22 | ### code_class_prefix 23 | 24 | Type: String. Default: `hljs-`. 25 | 26 | Prefix for color scheme classes. 27 | 28 | 29 | ## Tools 30 | 31 | * [highlight.js](http://softwaremaniacs.org/soft/highlight/en/). 32 | * [docpad-plugin-highlightjs](https://github.com/docpad/docpad-plugin-highlightjs) for DocPad. 33 | -------------------------------------------------------------------------------- /tamia/modules/flippable/Readme.md: -------------------------------------------------------------------------------- 1 | # Flippable pane 2 | 3 | Vertical or horizontal flippable pane. With 3D animation. 4 | 5 | 6 | # Markup 7 | 8 |
9 |
Front
10 |
Back
11 |
12 | 13 | 14 | ## Modifiers 15 | 16 | ### .flippable.flippable_vertical 17 | 18 | Vertical rotation (horizontal by default). 19 | 20 | 21 | ## States 22 | 23 | ### .flippable.is-flipped 24 | 25 | Back side is visible. 26 | 27 | 28 | ## Events 29 | 30 | ### flip.tamia 31 | 32 | Flips pane. 33 | 34 | ### flipped.tamia 35 | 36 | Fires on every flip. Argument will be `true` if back side is visible. 37 | 38 | 39 | ## JS Hooks 40 | 41 | ### .js-flip 42 | 43 | Element that flips pane when clicked. 44 | -------------------------------------------------------------------------------- /tamia/modules/toggle/example.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | 13 |
14 |
15 |
16 |
Forgot password?
17 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /tamia/modules/flippable/script.js: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Flippable pane 3 | 4 | /*global tamia:false*/ 5 | ;(function(window, $, undefined) { 6 | 'use strict'; 7 | 8 | tamia.Flippable = tamia.extend(tamia.Component, { 9 | displayName: 'tamia.Flippable', 10 | binded: 'toggle', 11 | 12 | init: function() { 13 | if (this.elem.hasClass('js-flip')) { 14 | this.elem.on('click', this.toggle_); 15 | } 16 | else { 17 | this.elem.on('click', '.js-flip', this.toggle_); 18 | } 19 | 20 | this.elem.on('flip.tamia', this.toggle_); 21 | }, 22 | 23 | toggle: function() { 24 | this.elem.toggleState('flipped'); 25 | this.elem.trigger('flipped.tamia', this.elem.hasState('flipped')); 26 | } 27 | }); 28 | 29 | tamia.initComponents({flippable: tamia.Flippable}); 30 | 31 | }(window, jQuery)); 32 | -------------------------------------------------------------------------------- /tamia/modules/flippable/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Flippable pane 3 | 4 | .flippable 5 | no-select() 6 | position: relative 7 | perspective: 600px 8 | cursor: default 9 | 10 | &__front, 11 | &__back 12 | position: absolute 13 | top: 0 14 | left: 0 15 | width: inherit 16 | height: inherit 17 | transform-style: preserve-3d 18 | backface-visibility: hidden 19 | transition: all .4s ease-out-back 20 | &__front 21 | z-index: 900 22 | transform: rotateY(0deg) rotateX(0deg) 23 | &__back 24 | z-index:800; 25 | transform: rotateY(-180deg) 26 | &_vertical &__back 27 | transform: rotateX(-180deg) 28 | 29 | &.is-flipped &__front 30 | transform: rotateY(180deg) 31 | &_vertical.is-flipped &__front 32 | transform: rotateX(180deg) 33 | 34 | .is-flipped &__back 35 | transform: rotateY(0deg) rotateX(0deg) 36 | 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "deliveryhero-test", 3 | "version": "0.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "babel-core": "~4.7.16", 7 | "babel-loader": "~4.2.0", 8 | "bower": "~1.3.12", 9 | "bower-webpack-plugin": "~0.1.6", 10 | "browser-sync": "~2.3.1", 11 | "eslint": "~0.17.1", 12 | "eslint-loader": "~0.7.0", 13 | "gulp": "~3.8.11", 14 | "gulp-copy": "0.0.2", 15 | "gulp-gh-pages": "~0.5.0", 16 | "gulp-plumber": "~1.0.0", 17 | "gulp-stylus": "~2.0.1", 18 | "gulp-util": "~3.0.4", 19 | "node-notifier": "~4.1.2", 20 | "stylobuild": "~0.7.0", 21 | "webpack": "~1.7.3" 22 | }, 23 | "scripts": { 24 | "postinstall": "bower install", 25 | "test": "gulp", 26 | "build": "NODE_ENV=production gulp", 27 | "server": "gulp watch" 28 | }, 29 | "author": "Artem Sapegin", 30 | "license": "MIT" 31 | } 32 | -------------------------------------------------------------------------------- /app/components/dashboard.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import Block from 'bem-cn'; 6 | import WeatherWidget from './weatherwidget'; 7 | 8 | let b = new Block('dashboard'); 9 | 10 | export default React.createClass({ 11 | displayName: 'Dashboard', 12 | propTypes: { 13 | locations: React.PropTypes.array.isRequired 14 | }, 15 | 16 | render: function() { 17 | let locations = this.props.locations; 18 | let widgets; 19 | if (locations.length) { 20 | widgets = locations.map(function(location) { 21 | return ( 22 | 23 | ); 24 | }); 25 | } 26 | else { 27 | widgets = ( 28 |
Add the first location below ↓
29 | ); 30 | } 31 | return ( 32 |
33 | {widgets} 34 |
35 | ); 36 | } 37 | }); 38 | -------------------------------------------------------------------------------- /app/components/dashboardcontainer.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import LocationsStore from '../stores/locations'; 6 | import Dashboard from './dashboard'; 7 | 8 | export default React.createClass({ 9 | displayName: 'DashboardContainer', 10 | 11 | getInitialState: function() { 12 | return this._getStateFromStores(); 13 | }, 14 | 15 | componentDidMount: function() { 16 | LocationsStore.listen(this._onChange); 17 | }, 18 | 19 | componentWillUnmount: function() { 20 | LocationsStore.unlisten(this._onChange); 21 | }, 22 | 23 | _onChange: function() { 24 | this.setState(this._getStateFromStores()); 25 | }, 26 | 27 | _getStateFromStores: function() { 28 | return { 29 | locations: LocationsStore.getLocations() 30 | }; 31 | }, 32 | 33 | render: function() { 34 | return ( 35 | 36 | ); 37 | } 38 | }); 39 | -------------------------------------------------------------------------------- /tamia/modules/text/Readme.md: -------------------------------------------------------------------------------- 1 | # Basic text styles 2 | 3 | Headings, paragraphs, etc. 4 | 5 | 6 | ## Markup 7 | 8 |
9 |

Down the Rabbit-Hole

10 |

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”

11 |

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

12 |
13 | 14 | 15 | ## Configuration 16 | 17 | ### text_default_headings 18 | 19 | Type: Boolean. Default: `true`. 20 | 21 | Enables default headings (H1—H5) styles. 22 | -------------------------------------------------------------------------------- /tamia/modules/checkbox/Readme.md: -------------------------------------------------------------------------------- 1 | # Checkbox and radio button 2 | 3 | Checkbox and radio button with custom design. 4 | 5 | 6 | ## Markup 7 | 8 | Checkbox: 9 | 10 |
11 | 12 | 16 |
17 | 18 | Radio button: 19 | 20 |
21 | 22 | 26 |
27 | 28 | 29 | ## Skin 30 | 31 | Set `checkbox_default_skin` or `modules_default_skin` to `true` to enable default skin. 32 | -------------------------------------------------------------------------------- /tamia/modules/preload/script.js: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Image preload 3 | 4 | /*global tamia:false*/ 5 | ;(function(window, $, undefined) { 6 | 'use strict'; 7 | 8 | var preload = function (images, callback) { 9 | var done = function() { 10 | counter--; 11 | if (counter === 0) { 12 | callback(errors.length ? errors : null); 13 | } 14 | }; 15 | var error = function() { 16 | errors.push(this.src); 17 | done(); 18 | }; 19 | 20 | images = parse(images); 21 | var counter = images.length; 22 | var errors = []; 23 | for (var imageIdx = 0; imageIdx < images.length; imageIdx++) { 24 | var img = new Image(); 25 | img.onload = done; 26 | img.onerror = error; 27 | img.src = images[imageIdx]; 28 | } 29 | }; 30 | 31 | var parse = function(images) { 32 | if (!$.isArray(images)) images = [images]; 33 | // TODO: img.attr('src') 34 | return images; 35 | }; 36 | 37 | tamia.preload = preload; 38 | 39 | }(window, jQuery)); 40 | -------------------------------------------------------------------------------- /tamia/modules/list/Readme.md: -------------------------------------------------------------------------------- 1 | # Lists 2 | 3 | Unordered list with dashes (—) as bullets and basic ordered list. 4 | 5 | 6 | ## Markup 7 | 8 | 14 | 15 |
    16 |
  1. Dog
    2. 17 |
  2. Cat
    3. 18 |
  3. Mouse
    4. 19 |
  4. Moose
    5. 20 |
21 | 22 | 23 | ## Modifiers 24 | 25 | ### .list.list_inside / .list-num.list-num_inside 26 | 27 | Places bullets inside container. 28 | 29 | 30 | ## Configuration 31 | 32 | ### list_inside 33 | 34 | Type: Boolean, default: `false`. 35 | 36 | If `true` places bullets inside container (by default bullets are outside). 37 | 38 | 39 | ## Caveats 40 | 41 | 1. If `list_inside` is `false` (default) automatically places bullets inside container (like `list_inside = true` does) when window width is less than `max_width` or `content_max_width` global variable. 42 | 43 | 2. `UL`s inside `.text` class are treated as `.list`. `OL`s inside `.text` class are treated as `.list-num`. 44 | -------------------------------------------------------------------------------- /tamia/modules/code/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2015 Artem Sapegin http://sapegin.me 2 | // Code blocks 3 | 4 | modules_default_skin ?= true 5 | code_default_skin ?= false 6 | code_class_prefix ?= 'hljs-' 7 | 8 | .code, 9 | .text code, 10 | .text kbd, 11 | .text pre, 12 | .text pre * 13 | font-family: Consolas, "Lucida Console", Monaco, "DejaVu Sans Mono", monospace 14 | 15 | .code 16 | display: block 17 | white-space: pre-wrap 18 | -moz-tab-size: 4 19 | -o-tab-size: 4 20 | tab-size: 4 21 | -webkit-text-size-adjust: none 22 | 23 | code 24 | display: block 25 | font-size: 14px 26 | line-height: 1.3 27 | 28 | .indent 29 | display: inline-block 30 | width: 2.2em 31 | 32 | if modules_default_skin or code_default_skin 33 | 34 | @import 'tomorrow' 35 | 36 | code 37 | padding: spacer 38 | background: #fff 39 | background: white(.7) 40 | border-radius: 3px 41 | border: 1px solid #ccc 42 | border-color: black(.2) 43 | 44 | @media print 45 | border: 0 46 | 47 | // Enable code in .text blocks 48 | .text pre 49 | @extend .code 50 | -------------------------------------------------------------------------------- /tamia/tamia/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Configuration 3 | 4 | /// Debug mode. 5 | DEBUG ?= false 6 | 7 | // Default spacer (default: 10px). 8 | spacer ?= 10px; 9 | 10 | // Max page with. 11 | max_width ?= null; 12 | 13 | // Max content block (.content) with. 14 | content_max_width ?= null; 15 | 16 | // Sticky footer height (default: no sticky footer). 17 | // 18 | // Example: 19 | //
20 | //
21 | // Footer content 22 | //
23 | //
24 | sticky_footer_height ?= null; 25 | 26 | // Background color (default: white). 27 | bg_color ?= #fff; 28 | 29 | // Base text color (default: #111). 30 | base_color ?= #111; 31 | 32 | // Form focus outline color (default: hsl(204,68%,69%)). 33 | form_focus_color ?= hsl(204, 68%, 69%) 34 | 35 | // Form border radius (default: .15em). 36 | form_border_radius ?= .15em 37 | 38 | 39 | @import "./misc" 40 | @import "./functions" 41 | @import "./layout" 42 | @import "./mediaqueries" 43 | @import "./images" 44 | @import "./bootstrap" 45 | @import "./classes" 46 | @import "./links" 47 | -------------------------------------------------------------------------------- /icons/sw-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 13 | 14 | -------------------------------------------------------------------------------- /tamia/modules/table/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Table 3 | // Based on https://github.com/twbs/bootstrap/blob/master/less/tables.less 4 | 5 | table_border_color ?= #ddd 6 | 7 | 8 | .table 9 | space(2) 10 | width: 100%; 11 | font-size: .8em 12 | font-size: .8rem 13 | 14 | th 15 | text-align: left 16 | 17 | // Cells 18 | > thead, 19 | > tbody, 20 | > tfoot 21 | > tr 22 | > th, 23 | > td 24 | padding: 8px 25 | vertical-align: top 26 | border-top: 1px solid table_border_color 27 | > th:first-child, 28 | > td:first-child 29 | padding-left: 0 30 | > th:last-child, 31 | > td:last-child 32 | padding-right: 0 33 | 34 | // Bottom align for column headings 35 | > thead > tr > th 36 | vertical-align: bottom 37 | border-bottom: 2px solid table_border_color 38 | 39 | // Remove top border from thead by default 40 | > caption + thead, 41 | > colgroup + thead, 42 | > thead:first-child 43 | > tr:first-child 44 | > th, 45 | > td 46 | border-top: 0 47 | 48 | // Account for multiple tbody instances 49 | > tbody + tbody 50 | border-top: 2px solid table_border_color 51 | -------------------------------------------------------------------------------- /tamia/modules/spinner/Readme.md: -------------------------------------------------------------------------------- 1 | # Spinner 2 | 3 | Loading indicator (spinner) with animation. 4 | 5 | 6 | ## Markup 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | `.loader` is the same as `.spinner` but it’s hidden by default. It’s visible only when `.is-loading` state is set on ancestor element. 15 | 16 | ## Modifiers 17 | 18 | ### .spinner.spinner_big 19 | 20 | Bigger size. 21 | 22 | 23 | ## More sizes 24 | 25 | You can set any spinner size changing `font-size` property. 26 | 27 | .spinner_huge 28 | font-size: 64px 29 | 30 | 31 | 32 | 33 | ## Component loading indicator 34 | 35 | $('.pony').trigger('loading-start.tamia'); // Show loader 36 | $('.pony').trigger('loading-stop.tamia'); // Hide loader 37 | 38 | That will blocks all container’s content with a semi transparent layer and shows spinner in the middle. 39 | 40 | To change shade layer’s color set `loader_shade_color` variable. 41 | 42 | 43 | ## IE 8—9 callback 44 | 45 | Copy `spinner.gif` to your images folder and set `spinner_fallback_gif` variable to its URL. 46 | -------------------------------------------------------------------------------- /app/components/locationform.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | import Block from 'bem-cn'; 6 | import LocationActions from '../actions/locationactions'; 7 | import IntervalSelect from './intervalselect'; 8 | 9 | let b = new Block('location-form'); 10 | 11 | export default React.createClass({ 12 | displayName: 'LocationForm', 13 | 14 | _handleSubmit: function(event) { 15 | event.preventDefault(); 16 | let element = this.refs.location.getDOMNode(); 17 | let location = element.value.trim(); 18 | if (!location) { 19 | return; 20 | } 21 | 22 | let interval = this.refs.interval.getValue(); 23 | LocationActions.create(location, interval); 24 | element.value = ''; 25 | element.focus(); 26 | }, 27 | 28 | render: function() { 29 | return ( 30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | ); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /tamia/modules/list/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2015 Artem Sapegin http://sapegin.me 2 | // Unordered list with dashes (—) as bullets and basic ordered list 3 | 4 | // Place bullets inside container (by default bullets are outside). 5 | list_inside ?= false 6 | 7 | _margin = 1.3em 8 | 9 | .list 10 | > li 11 | position: relative 12 | padding-left: _margin 13 | margin-left: -(_margin) unless list_inside 14 | &_inside > li 15 | margin-left: 0 16 | > li:before 17 | position: absolute 18 | left: 0 19 | content: "\2014\a0" 20 | 21 | ul, 22 | ol 23 | margin-left: _margin 24 | 25 | li > ul, 26 | li > ol 27 | margin-bottom: 0 28 | 29 | .list-num 30 | unless list_inside 31 | padding-left: 0 32 | &_inside 33 | padding-left: _margin 34 | 35 | .text 36 | ul 37 | @extend .list 38 | ol 39 | @extend .list-num 40 | 41 | list_max_width ?= max_width or content_max_width or max_width 42 | 43 | if not list_inside and list_max_width 44 | +below(list_max_width) 45 | .list > li, 46 | .text ul > li 47 | margin-left: 0 48 | padding-left: 0 49 | &:before 50 | position: static 51 | .list-num, 52 | .text ol 53 | list-style-position: inside; 54 | padding-left: 0 55 | -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | =============== 3 | 4 | Copyright © 2015 Artem Sapegin (http://sapegin.me), contributors 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining 7 | a copy of this software and associated documentation files (the 8 | 'Software'), to deal in the Software without restriction, including 9 | without limitation the rights to use, copy, modify, merge, publish, 10 | distribute, sublicense, and/or sell copies of the Software, and to 11 | permit persons to whom the Software is furnished to do so, subject to 12 | the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 20 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 21 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 22 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 23 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 | -------------------------------------------------------------------------------- /tamia/tamia/mediaqueries.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Media queries 3 | 4 | /// Based on https://github.com/jenius/rupture 5 | 6 | // Media query shortcut: viewport width is greater than or equal to specified value. 7 | // 8 | // Example: 9 | // 10 | // .pony 11 | // color: #c0ffee 12 | // +above(320px) 13 | // color: #bada55 14 | // 15 | // min - Min width. 16 | above(min) 17 | condition = 'only screen and (min-width: %s)' % min 18 | @media condition 19 | {block} 20 | 21 | // Media query shortcut: viewport width is less than or equal to specified value. 22 | // 23 | // max - Max width. 24 | below(max) 25 | condition = 'only screen and (max-width: %s)' % max 26 | @media condition 27 | {block} 28 | 29 | // Media query shortcut: viewport width is in between specified values. 30 | // 31 | // min - Min width. 32 | // max - Max width. 33 | between(min, max) 34 | condition = 'only screen and (min-width: %s) and (max-width: %s)' % (min max) 35 | @media condition 36 | {block} 37 | 38 | // Media query shortcut: retina screen. 39 | retina() 40 | @media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) 41 | {block} 42 | -------------------------------------------------------------------------------- /tamia/modules/tooltip/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Tooltip 3 | 4 | // Bones 5 | 6 | .tooltip, 7 | .has-tooltip:before 8 | position: relative 9 | display: inline-block 10 | text-decoration: none 11 | white-space: nowrap 12 | 13 | .tooltip:after, 14 | .has-tooltip:before, 15 | .has-tooltip:after 16 | content: "" 17 | position: absolute 18 | left: 50% 19 | transform: translateX(-50%) 20 | 21 | .has-tooltip 22 | position: relative 23 | 24 | &:before 25 | content: attr(data-tooltip); 26 | 27 | &:before, 28 | &:after 29 | top: 100% 30 | display: none 31 | 32 | &:hover:before, 33 | &:hover:after 34 | display: block 35 | 36 | 37 | // Default skin 38 | 39 | modules_default_skin ?= true 40 | tooltip_default_skin ?= false 41 | 42 | if modules_default_skin or tooltip_default_skin 43 | 44 | _tooltip_arrow = 5px 45 | _tooltip_bg = black(0.9) 46 | 47 | .tooltip, 48 | .has-tooltip:before 49 | padding: .2em .5em 50 | background: _tooltip_bg 51 | color: #fff 52 | font-size: 14px 53 | border-radius: form_border_radius 54 | 55 | .tooltip:after, 56 | .has-tooltip:after 57 | triangle("up", _tooltip_arrow, _tooltip_bg) 58 | 59 | .tooltip:after 60 | top: (-(_tooltip_arrow)) 61 | 62 | .has-tooltip:before 63 | margin-top: _tooltip_arrow 64 | -------------------------------------------------------------------------------- /tamia/modules/password/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Password field with toggle to show characters 3 | // Dependencies: form 4 | 5 | // Bones 6 | 7 | .password 8 | position: relative 9 | display: block 10 | 11 | &_inline 12 | display: inline-block 13 | 14 | &__field 15 | position:relative; 16 | width: 100% 17 | z-index: 90 18 | 19 | &__toggle 20 | display: none 21 | &.is-ok &__toggle 22 | position: absolute 23 | display: block 24 | top: 0 25 | bottom: 0 26 | right: 0 27 | cursor: pointer 28 | z-index: 100 29 | &:before 30 | content: "" 31 | position: absolute 32 | top: 50% 33 | left: 50% 34 | transform: translate(-50%,-50%) 35 | 36 | &.is-disabled &__toggle 37 | opacity: .4 38 | 39 | // Hide IE10 password visibility toggle 40 | &::-ms-reveal 41 | size: 0 // Not display:none because: http://bit.ly/1h3UlAH 42 | 43 | 44 | // Default skin 45 | 46 | modules_default_skin ?= true 47 | password_default_skin ?= false 48 | 49 | if modules_default_skin or password_default_skin 50 | .password 51 | &.is-ok &__toggle 52 | width: 1.8em 53 | &:before 54 | tweak-inverted-text() 55 | content: "abc" 56 | font-size: .75em 57 | letter-spacing: .1ex 58 | &.is-ok.is-unlocked &__toggle:before 59 | content: "●●●" 60 | letter-spacing: 0 61 | -------------------------------------------------------------------------------- /tamia/modules/richtypo/Readme.md: -------------------------------------------------------------------------------- 1 | # Rich typograhy 2 | 3 | Classes and tweaks for better typography. 4 | 5 | 6 | ## Markup 7 | 8 | ### Abbreviations with spacing 9 | 10 |
11 |

PNG, GIF (animated or not) and JPEG formats.

12 |
13 | 14 | ### The best ampersand 15 | 16 | Nuts & Bolts. 17 | 18 | ### Hanging punctuation 19 | 20 | Awesome Web Typography with “Richtypo”' 21 | 22 | 23 | ## Configuration 24 | 25 | ### richtypo_global_ligatures 26 | 27 | Type: Boolean. Default: `true`. 28 | 29 | Enables ligatures on body (just headers otherwise). 30 | 31 | ### richtypo_extra_features 32 | 33 | Type: Boolean or List. Default: `false`. 34 | 35 | Extra OpenType features, eg. `"ss01", "ss03", "salt"` (`richtypo_global_ligatures` should be enabled). 36 | 37 | ### richtypo_figures 38 | 39 | Type: String. Default: `proportional`. 40 | 41 | Figures type: `proportional`, `oldstyle` (`richtypo_global_ligatures` should be enabled). 42 | 43 | ### richtypo_proper_abbr 44 | 45 | Type: Boolean. Default: `true`. 46 | 47 | Enables small caps in abbreviations (if your font supports them). 48 | 49 | 50 | ## Tools 51 | 52 | * [richtypo.js](https://github.com/sapegin/richtypo.js) for Node.js. 53 | * [wp-typohelper](https://github.com/sapegin/wp-typohelper) for Wordpress. 54 | -------------------------------------------------------------------------------- /tamia/modules/select/script.js: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Select with custom design 3 | 4 | /*global tamia:false*/ 5 | ;(function(window, $, undefined) { 6 | 'use strict'; 7 | 8 | var _disabledState = 'disabled'; 9 | 10 | tamia.Select = tamia.extend(tamia.Component, { 11 | displayName: 'tamia.Select', 12 | binded: 'focus blur change', 13 | template: { 14 | block: 'select', 15 | node: 'root', 16 | content: [ 17 | { 18 | block: 'select', 19 | elem: 'box', 20 | link: 'boxElem' 21 | }, 22 | { 23 | block: 'select', 24 | elem: 'select', 25 | node: '.js-select', 26 | link: 'selectElem' 27 | } 28 | ] 29 | }, 30 | 31 | init: function() { 32 | this.selectElem.on({ 33 | focus: this.focus_, 34 | blur: this.blur_, 35 | change: this.change_ 36 | }); 37 | 38 | if (this.elem.hasState(_disabledState)) { 39 | this.selectElem.prop(_disabledState, true); 40 | } 41 | 42 | this.change(); 43 | }, 44 | 45 | focus: function() { 46 | this.toggleFocused(true); 47 | }, 48 | 49 | blur: function() { 50 | this.toggleFocused(false); 51 | }, 52 | 53 | toggleFocused: function(toggle) { 54 | this.elem.toggleState('focused', toggle); 55 | }, 56 | 57 | change: function() { 58 | this.boxElem.text(this.selectElem.find(':selected').text()); 59 | } 60 | }); 61 | 62 | tamia.initComponents({select: tamia.Select}); 63 | 64 | }(window, jQuery)); 65 | -------------------------------------------------------------------------------- /tamia/modules/text/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2015 Artem Sapegin http://sapegin.me 2 | // Basic text styles 3 | 4 | text_default_headings ?= true 5 | 6 | .text 7 | responsive-images() 8 | 9 | word-wrap: break-word 10 | hyphens: auto 11 | 12 | p, 13 | ul, 14 | ol, 15 | li, 16 | pre, 17 | blockquote 18 | space(2) 19 | 20 | blockquote 21 | font-size: .8em 22 | padding: 0 2em 23 | 24 | a 25 | @extend .link 26 | 27 | if text_default_headings 28 | .alpha, 29 | .text h1, 30 | .beta, 31 | .text h2, 32 | .gamma, 33 | .text h3, 34 | .delta, 35 | .text h4, 36 | .epsilon, 37 | .text h5 38 | margin-top: 4*spacer 39 | margin-bottom: 2*spacer 40 | line-height: 1.2 41 | font-weight: normal 42 | 43 | .alpha, 44 | .text h1 45 | heading-font-size: 44px 46 | 47 | .beta, 48 | .text h2 49 | heading-font-size: 34px 50 | 51 | .gamma, 52 | .text h3 53 | heading-font-size: 28px 54 | 55 | .delta, 56 | .text h4 57 | heading-font-size: 20px 58 | 59 | .epsilon, 60 | .text h5 61 | heading-font-size: 1em 62 | font-weight: bold 63 | 64 | // Collapse margin between headings and before first heading. 65 | .text h1 + h2, 66 | .text h2 + h3, 67 | .text h3 + h4, 68 | .text h4 + h5, 69 | .alpha + .beta, 70 | .beta + .gamma, 71 | .gamma + .delta, 72 | .delta + .epsilon, 73 | h1:first-child, 74 | h2:first-child, 75 | h3:first-child, 76 | h4:first-child, 77 | h5:first-child, 78 | .alpha:first-child, 79 | .beta:first-child, 80 | .gamma:first-child, 81 | .delta:first-child 82 | margin-top: 0 83 | -------------------------------------------------------------------------------- /app/stores/locations.js: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | 'use strict'; 4 | 5 | const STORE_ID = 'LocationsStore'; 6 | 7 | import alt from '../alt'; 8 | import LocationActions from '../actions/locationactions'; 9 | 10 | class LocationsStore { 11 | constructor() { 12 | this.bindAction(LocationActions.create, this.onAddLocation); 13 | this.bindAction(LocationActions.remove, this.onRemoveLocation); 14 | this._load(); 15 | } 16 | 17 | onAddLocation(location) { 18 | location.name = location.name.trim(); 19 | if (!location.name) { 20 | return false; 21 | } 22 | 23 | let id = this._getNewId(); 24 | location.id = id; 25 | location.interval = Number(location.interval); 26 | this.locations[id] = location; 27 | this._save(); 28 | } 29 | 30 | onRemoveLocation(id) { 31 | if (!id) { 32 | return; 33 | } 34 | 35 | delete this.locations[id]; 36 | this._save(); 37 | } 38 | 39 | _load() { 40 | let data = JSON.parse(localStorage.getItem(STORE_ID)); 41 | this.locations = data || {}; 42 | } 43 | 44 | _save() { 45 | localStorage.setItem(STORE_ID, JSON.stringify(this.locations)); 46 | } 47 | 48 | _getNewId() { 49 | return (+new Date() + Math.floor(Math.random() * 999999)).toString(36); 50 | } 51 | 52 | static getLocations() { 53 | let state = this.getState().locations; 54 | let locations = []; 55 | for (let id in state) { 56 | locations.push(state[id]); 57 | } 58 | return locations; 59 | } 60 | } 61 | 62 | export default alt.createStore(LocationsStore, STORE_ID); 63 | -------------------------------------------------------------------------------- /icons/sw-04.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var webpack = require('webpack'); 5 | var BowerWebpackPlugin = require('bower-webpack-plugin'); 6 | var bowerPath = path.join(__dirname, 'bower_components'); 7 | var nodePath = path.join(__dirname, 'node_modules'); 8 | 9 | var isDevelopment = process.env.NODE_ENV !== 'production'; 10 | 11 | var plugins = [ 12 | new BowerWebpackPlugin(), 13 | new webpack.ProvidePlugin({ 14 | React: 'react' 15 | }), 16 | new webpack.DefinePlugin({ 17 | DEBUG: isDevelopment 18 | }) 19 | ]; 20 | 21 | if (!isDevelopment) { 22 | plugins.push(new webpack.optimize.UglifyJsPlugin({ 23 | compress: { 24 | warnings: false 25 | }, 26 | output: { 27 | comments: false 28 | } 29 | })); 30 | } 31 | 32 | module.exports = { 33 | debug: isDevelopment, 34 | cache: isDevelopment, 35 | devtool: isDevelopment ? 'eval' : false, 36 | watch: false, 37 | entry: './app/app.js', 38 | stats: { 39 | colors: true, 40 | reasons: isDevelopment 41 | }, 42 | resolve: { 43 | root: [bowerPath] 44 | }, 45 | resolveLoader: { 46 | root: [nodePath] 47 | }, 48 | plugins: plugins, 49 | output: { 50 | path: path.join(__dirname, 'build/'), 51 | filename: 'bundle.js' 52 | }, 53 | module: { 54 | noParse: [ 55 | /\.min\.js/, 56 | bowerPath 57 | ], 58 | preLoaders: [ 59 | { 60 | test: /\.js$/, 61 | exclude: [bowerPath, nodePath], 62 | loader: 'eslint-loader' 63 | } 64 | ], 65 | loaders: [ 66 | { 67 | test: /\.js$/, 68 | exclude: bowerPath, 69 | loader: 'babel-loader' 70 | } 71 | ] 72 | } 73 | }; 74 | -------------------------------------------------------------------------------- /styles/blocks/weather-widget.styl: -------------------------------------------------------------------------------- 1 | // Author: Artem Sapegin, http://sapegin.me, 2015 2 | 3 | .weather-widget { 4 | position:relative; 5 | size:200px; 6 | margin-side:spacer; 7 | padding:spacer*.5 spacer; 8 | border:1px solid light_color; 9 | 10 | &__location { 11 | space(); 12 | ellipsis(); 13 | font-size:20px; 14 | color:light_color; 15 | } 16 | &:hover &__location { 17 | padding-right:10px; 18 | } 19 | 20 | &__city { 21 | display:inline; 22 | color:base_color; 23 | } 24 | 25 | &__country { 26 | display:none; 27 | margin-left:.3em; 28 | } 29 | &:hover &__country { 30 | display:inline; 31 | } 32 | 33 | &__temp { 34 | position:absolute; 35 | right:spacer; 36 | bottom:spacer*.5; 37 | font-size:32px; 38 | line-height:1.2; 39 | } 40 | 41 | &__icon { 42 | text-align:center; 43 | line-height:100px; 44 | vertical-align:middle; 45 | } 46 | 47 | &__details { 48 | display:none; 49 | } 50 | &:hover &__details { 51 | display:block; 52 | position:absolute; 53 | left:spacer; 54 | right:spacer; 55 | top:40px; 56 | height:100px; 57 | background:bg_color; 58 | font-size:15px; 59 | } 60 | 61 | &__remove { 62 | display:none; 63 | position:absolute; 64 | top:spacer*.5; 65 | right:spacer; 66 | } 67 | &:hover &__remove { 68 | display:block; 69 | } 70 | 71 | &__spinner { 72 | position:absolute; 73 | left:0; 74 | right:0; 75 | top:0; 76 | line-height:200px; 77 | text-align:center; 78 | } 79 | &__spinner-i { 80 | font-size:32px; 81 | vertical-align:middle; 82 | } 83 | 84 | &__error { 85 | color:error_color; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /icons/sw-11.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 12 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /tamia/modules/modal/index.styl: -------------------------------------------------------------------------------- 1 | // Tâmia © 2013 Artem Sapegin http://sapegin.me 2 | // Modal 3 | 4 | modal_shade_color ?= black(.4) 5 | 6 | // Body class to disable page scroll when modal is open 7 | .modal-opened 8 | overflow: hidden 9 | 10 | // Modal shade 11 | .modal-shade 12 | position fixed 13 | top: 0 14 | left: 0 15 | bottom: 0 16 | right: 0 17 | padding: 1em 18 | background: modal_shade_color 19 | z-index: 99999 20 | 21 | &.is-switching 22 | background: none 23 | 24 | .modal-shade, 25 | .modal 26 | transition: opacity .15s ease-out 27 | 28 | &.is-hidden 29 | opacity: 0 30 | 31 | 32 | // Bones 33 | .modal 34 | &_fluid 35 | width: 100% 36 | max-width: 800px 37 | 38 | .l-center & 39 | display: inline-block 40 | 41 | 42 | // Default skin 43 | 44 | modules_default_skin ?= true 45 | modal_default_skin ?= false 46 | 47 | if modules_default_skin or modal_default_skin 48 | .modal 49 | background: #fff 50 | border: 1px solid #ccc 51 | border-radius: .3em 52 | box-shadow: 0 0 3em black(.3) 53 | 54 | &__header, 55 | &__body, 56 | &__footer 57 | padding: 3*spacer 2*spacer 58 | border: 0 solid #ddd 59 | 60 | &__header 61 | position: relative 62 | padding-top: 1.5*spacer 63 | padding-bottom: @padding-top 64 | border-bottom-width: 1px 65 | 66 | &__body 67 | position: relative 68 | padding-bottom: 4*spacer 69 | 70 | &__footer 71 | text-align: right 72 | background: #fafafa 73 | border-top-width: 1px 74 | 75 | &__title 76 | margin-bottom: -.1em 77 | line-height: 1.2 78 | font-weight: normal 79 | font-size: 20px 80 | 81 | &__close 82 | position: absolute 83 | top: 1.5*spacer - 2px 84 | right: 2*spacer 85 | -------------------------------------------------------------------------------- /tamia/modules/spinner/script.js: -------------------------------------------------------------------------------- 1 | // Tâmia © 2014 Artem Sapegin http://sapegin.me 2 | // Spinner 3 | 4 | /*global tamia:false*/ 5 | ;(function(window, $, undefined) { 6 | 'use strict'; 7 | 8 | var _wrapperClass = 'loader-wrapper'; 9 | var _shadeSelector = '.loader-shade'; 10 | 11 | tamia.Loader = tamia.extend(tamia.Component, { 12 | displayName: 'tamia.Loader', 13 | template: { 14 | block: 'loader-shade', 15 | content: { 16 | block: 'l-center', 17 | content: { 18 | block: 'l-center', 19 | inner: true, 20 | content: { 21 | block: 'spinner', 22 | mods: 'big' 23 | } 24 | } 25 | } 26 | }, 27 | 28 | init: function() { 29 | tamia.delay(this.elem.addState, this.elem, 0, 'loading'); 30 | }, 31 | 32 | destroy: function() { 33 | tamia.delay(function() { 34 | this.elem.removeState('loading'); 35 | this.elem.find(_shadeSelector).afterTransition(function() { 36 | this.elem.removeClass(_wrapperClass); 37 | this.loader.remove(); 38 | }.bind(this)); 39 | }, this, 0); 40 | }, 41 | 42 | initHtml: function() { 43 | this.elem.addClass(_wrapperClass); 44 | this.loader = tamia.oporNode(this.template); 45 | this.elem.append(this.loader); 46 | } 47 | }); 48 | 49 | 50 | // Events 51 | tamia.registerEvents({ 52 | 'loading-start': function(elem) { 53 | var container = $(elem); 54 | if (container.data('loader')) return; 55 | container.data('loader', new tamia.Loader(elem)); 56 | }, 57 | 58 | 'loading-stop': function(elem) { 59 | var container = $(elem); 60 | var loader = container.data('loader'); 61 | if (!loader) return; 62 | loader.destroy(); 63 | container.removeData('loader'); 64 | }, 65 | }); 66 | 67 | }(window, jQuery)); 68 | -------------------------------------------------------------------------------- /tamia/modules/checkbox/example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 7 |
8 |
9 | 10 | 14 |
15 |
16 | 17 | 21 |
22 | 23 |
24 | 25 | 29 |
30 |
31 | 32 | 36 |
37 |
38 | 39 | 43 |
44 | -------------------------------------------------------------------------------- /tamia/modules/modal/Readme.md: -------------------------------------------------------------------------------- 1 | # Modal 2 | 3 | Modal popup. 4 | 5 | 6 | ## Markup 7 | 8 | 21 | 22 | To disable modal closing by click on a shade use `data-modal-close-on-shade="no"` attribute: 23 | 24 |