summaryrefslogtreecommitdiff
path: root/assets/sass/_mixins.sass
blob: 62642d394666c6697efc5a70ebf1773b97acbfe3 (plain)
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
@import variables

@mixin custom-device($width)
  @media (max-width: #{$width})
    @content

@mixin xs-device
  @media (max-width: #{$xs-device-width})
    @content

@mixin sm-device
  @media (max-width: #{$sm-device-width})
    @content

@mixin md-device
  @media (min-width: #{$sm-device-width}) and (max-width: #{$md-device-width})
    @content

@mixin grid($columns: 0)
  box-sizing: border-box
  display: flex
  flex-wrap: wrap
  > *
    box-sizing: border-box
  > *
    width: (1/$columns) * 100%

@mixin grid_width($width)
  width: $width * 100%

@mixin placeholder
  &::-webkit-input-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

@mixin col-x($n)
  @for $i from 1 through $n
    .column-#{$i}
      width: $i * 1%

=appearance
  -webkit-appearance: none
  -moz-appearance: none

=display-flex
  display: -webkit-flex
  display: flex

=flex-direction($direction)
  -webkit-flex-direction: $direction
  flex-direction: $direction

=flex-wrap
  -webkit-flex-wrap: wrap
  flex-wrap: wrap

=align-content($position)
  -webkit-align-items: $position
  align-items: $position

=justify-content($position)
  -webkit-justify-content: $position
  justify-content: $position