dmitru

$themes: (
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
    buttonTextColor: #408bbd,
    buttonTextTransform: none,
    buttonTextHoverColor: #61b0e7,
    buttonColor: #fff,
    buttonBorder: 2px solid #fff,
  ),

dmitru

<main id="app-root">
  <div class="app-container">
    <h1 class="title">A title</h1>
    <button class="button">A button</button>
  </div>
</main>

dmitru

<main id="app-root" class="theme-dark">
  ...
</main>

dmitru

@import 'themes.scss';

.app-container {
  @include themify($themes) {
    color: themed('textColor');  
    background-color: themed('backgroundColor');  
  }

  .title {
    font-family: sans-serif;

dmitru

.app-container .title {
  font-family: sans-serif;
  font-weight: lighter;
}
.theme-light .app-container {
  color: #408bbd;
  background-color: white;
}
.theme-dark .app-container {
  color: #ddd;

dmitru

@import 'themes.scss';

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;

dmitru

'use strict';

function setupMap() {

  var titles = [
    'Большая уютная квартира',
    'Маленькая неуютная квартира',
    'Огромный прекрасный дворец',
    'Маленький ужасный дворец',
    'Красивый гостевой домик',

dmitru

'use strict';
/* global utils */

(function () {
  var filteredList = [];
  var filterContainer = document.querySelector('.tokyo__filters-container');
  var filterHousing = filterContainer.querySelector('#housing_type');
  var filterPrice = filterContainer.querySelector('#housing_price');
  var filterRoomNumber = filterContainer.querySelector('#housing_room-number');
  var filterGuestsNumber = filterContainer.querySelector('#housing_guests-number');

dmitru

js/forms.js:12:  var syncValues = function (element, value) {  // TODO: make it a normal function instead of "var foo = function" expression
js/forms.js:16:  var syncValueWithMin = function (element, value) { // TODO: make it a normal function instead of "var foo = function" expression
js/filter.js:11:  var checkboxNames = ['wifi', 'dishwasher', 'parking', 'washer', 'elevator', 'conditioner'];  // TODO: Name constants LIKE_THIS
js/filter.js:81:  window.filter = function (offerList) { // TODO: move assignment to window outside of the module
js/load.js:8:    var onError = function (errorMessage) { // TODO: make it a normal function instead of "var foo = function" expression, name it as an event handler
js/load.js:29:    xhr.timeout = 10000; // 10s TODO: Name a constant LIKE_THAT
js/map.js:5:  var updatePins = function (offers) { // TODO: make it a normal function instead of "var foo = function" expression
js/map.js:9:  var onLoad = function (data) {  // TODO: make it a normal function instead of "var foo = func

dmitru

'use strict';

(function () {
  var pins;
  var type;
  var price;
  var roomNumbers;
  var guestNumbers;
  var featuresSets = [];
  var housingType = document.querySelector('#housing_type');