-
Notifications
You must be signed in to change notification settings - Fork 1
/
s-grid-3-style.html
73 lines (61 loc) · 2.59 KB
/
s-grid-3-style.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
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
65
66
67
68
69
70
71
72
73
<!--
@license
Copyright (c) 2017 The StartPolymer Project Authors. All rights reserved.
This code may only be used under the MIT License found at https://github.com/StartPolymer/license
The complete set of authors may be found at https://github.com/StartPolymer/authors
The complete set of contributors may be found at https://github.com/StartPolymer/contributors
-->
<link rel="import" href="../polymer/polymer.html">
<!--
@group App Elements
@pseudoElement s-grid-3
@demo demo/index.html
-->
<dom-module id="s-grid-3-style">
<template>
<style>
:host,
:host ::content {
/* The width for an item is: (100% - subPixelAdjustment - gutter * columns) / columns */
--s-grid-3-total-right-gutter: (var(--s-grid-3-gutter, 0px) * var(--s-grid-3-items, 1));
--s-grid-3-item-width: calc((100% - 0.1px - var(--s-grid-3-total-right-gutter)) / var(--s-grid-3-items, 1));
/**
* The width for the expandible item is:
* ((100% - subPixelAdjustment) / columns * itemColumns - gutter
*
* - subPixelAdjustment: 0.1px (Required for IE 11)
* - gutter: var(--s-grid-3-gutter)
* - columns: var(--s-grid-3-items)
* - itemColumn: var(--s-grid-3-expandible-item-items)
*/
--s-grid-3-expandible-item-width: calc((100% - 0.1px) / var(--s-grid-3-items, 1) * var(--s-grid-3-expandible-item-items, 1) - var(--s-grid-3-gutter, 0px));
--s-grid-3-expandible-item: {
-webkit-flex-basis: var(--s-grid-3-expandible-item-width) !important;
flex-basis: var(--s-grid-3-expandible-item-width) !important;
max-width: var(--s-grid-3-expandible-item-width) !important;
};
}
.s-grid-3,
:host ::content .s-grid-3 {
-ms-flex-direction: var(--s-grid-3-direction, row);
-webkit-flex-direction: var(--s-grid-3-direction, row);
flex-direction: var(--s-grid-3-direction, row);
padding-top: var(--s-grid-3-gutter, 0px);
padding-left: var(--s-grid-3-gutter, 0px);
}
.s-grid-3 > *,
:host ::content .s-grid-3 > * {
-webkit-flex-basis: var(--s-grid-3-item-width);
flex-basis: var(--s-grid-3-item-width);
max-width: var(--s-grid-3-item-width);
height: var(--s-grid-3-item-height, auto);
margin-bottom: var(--s-grid-3-gutter, 0px);
margin-right: var(--s-grid-3-gutter, 0px);
}
.s-grid-3[has-aspect-ratio] > *::before,
:host ::content .s-grid-3[has-aspect-ratio] > *::before {
padding-top: var(--s-grid-3-item-height, 100%);
}
</style>
</template>
</dom-module>