FlexBoxLessMixins/StyleSheet.less at master · Smartforce/FlexBoxLessMixins · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.flex() {
    display: -webkit-box;
    display: -moz-box;
    display:-webkit-flex;
    display: -ms-flexbox;
    display:flex;
}

.flex-justify(@justifyStyle) {

    .ms-flex-justify(@justifyStyle);
    -webkit-justify-content: @justifyStyle;
    justify-content: @justifyStyle;
}

.flex-direction(@direction) {
  -ms-flex-direction:@direction;
 -webkit-flex-direction:@direction;
  flex-direction:@direction;
}

.flex-align-items(@alignStyle) {
    -ms-flex-align:@alignStyle;
    -webkit-align-items:@alignStyle;
     align-items: @alignStyle;
}

.flex-align-self(@selfAlignStyle) {
  .ms-flex-align-self(@selfAlignStyle);
  -webkit-align-self:@selfAlignStyle;
  align-self: @selfAlignStyle;
}

.flex-order(@order) {
  -ms-flex-order:@order;
  -webkit-order:@order;
  order:@order;
}

.flex-wrap(@wrap) {
  -ms-flex-wrap:@wrap;
  -webkit-flex-wrap:@wrap;
   flex-wrap:@wrap;
}


/* These are the conditional mixins for the different syntax for IE10 Flexbox*/
.ms-flex-justify(@msJustify) when (@msJustify = space-between)  {
    -ms-flex-pack:justify;
}

.ms-flex-justify(@msJustify) when (@msJustify = space-around) {
    -ms-flex-pack:distribute;
}

.ms-flex-justify(@msJustify) when (@msJustify = flex-end) {
    -ms-flex-pack:end;
}

.ms-flex-justify(@msJustify) when (@msJustify = flex-start) {
    -ms-flex-pack:start;
}

.ms-flex-justify(@msJustify) when (@msJustify = center) {
    -ms-flex-pack:center;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = flex-end) {
    -ms-flex-item-align: end;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = flex-start) {
    -ms-flex-item-align: start;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = auto), (@msSelfAlign = center),(@msSelfAlign = baseline), (@msSelfAlign = stretch) {
    -ms-flex-item-align: @msSelfAlign;
}


/* These are the styles for the sheet. You don't need
these. You need the stuff above. Though these show how to call what's above. */
section {
  background-color:#CCCCCC;
  .flex();
  .flex-justify(space-around);
  .flex-align-items(center);
  .flex-direction(row);
   height:200px;

  div {
    width:100px;
    min-height:100px;
    background-color:#555555;
    color:white;

    &#one {

      .flex-align-self(stretch);
    }

    &#two {
       .flex-order(2);
      .flex-align-self(flex-start);
    }

    &#three {
       .flex-order(3);

    }
    }
}