grid-element/grid-col.html at master · charbelrami/grid-element · GitHub

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!--
@license
Copyright (c) 2015-2016 Charbel Rami. All rights reserved.
MIT
-->
<dom-module id="grid-col">
  <template>
    <style>
      :host([match]) {
        min-width: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
      }
      :host([center][match]) {
        -ms-flex-item-align: center;
        align-self: center;
      }
      :host([start][match]) {
        -ms-flex-item-align: start;
        align-self: flex-start;
      }
      :host([end][match]) {
        -ms-flex-item-align: end;
        align-self: flex-end;
      }
      :host([stretch][match]) {
        -ms-flex-item-align: stretch;
        align-self: stretch;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'grid-col',
      properties: {
        /**
         * column stretching factor
         *
         * @default '1'
         */
        s: {
          type: Number,
          value: 1
        }
      },
      ready: function() {
        this.style.WebkitBoxFlex = this.s;
        this.style.MsFlexPositive = this.s;
        this.style.flexGrow = this.s;
        var self = this;
        Polymer.dom(this).parentNode.addEventListener('mq-match', function(e) {
          if (e.detail.match) {
            Polymer.dom(self).setAttribute('match', '');
          } else {
            Polymer.dom(self).removeAttribute('match');
          }
        })
      }
    });
  </script>
</dom-module>