styleguide/lib/responsive/index.styl at v4 · csseditor/styleguide · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
//
// Responsive Utility classes
// --------------------------------------------------


// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue https://github.com/twbs/bootstrap/issues/10497
// Docs http://getbootstrap.com/getting-started/#support-ie10-width
// Source http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport
  width device-width

// Visibility utilities
// Note Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg
  responsive-invisibility()

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block
  display none !important

.visible-xs
  @media (max-width $screen-xs-max)
    responsive-visibility()

.visible-xs-block
  @media (max-width $screen-xs-max)
    display block !important

.visible-xs-inline
  @media (max-width $screen-xs-max)
    display inline !important

.visible-xs-inline-block
  @media (max-width $screen-xs-max)
    display inline-block !important

.visible-sm
  @media (min-width $screen-sm-min) and (max-width $screen-sm-max)
    responsive-visibility()

.visible-sm-block
  @media (min-width $screen-sm-min) and (max-width $screen-sm-max)
    display block !important

.visible-sm-inline
  @media (min-width $screen-sm-min) and (max-width $screen-sm-max)
    display inline !important

.visible-sm-inline-block
  @media (min-width $screen-sm-min) and (max-width $screen-sm-max)
    display inline-block !important

.visible-md
  @media (min-width $screen-md-min) and (max-width $screen-md-max)
    responsive-visibility()

.visible-md-block
  @media (min-width $screen-md-min) and (max-width $screen-md-max)
    display block !important

.visible-md-inline
  @media (min-width $screen-md-min) and (max-width $screen-md-max)
    display inline !important

.visible-md-inline-block
  @media (min-width $screen-md-min) and (max-width $screen-md-max)
    display inline-block !important

.visible-lg
  @media (min-width $screen-lg-min)
    responsive-visibility()

.visible-lg-block
  @media (min-width $screen-lg-min)
    display block !important

.visible-lg-inline
  @media (min-width $screen-lg-min)
    display inline !important

.visible-lg-inline-block
  @media (min-width $screen-lg-min)
    display inline-block !important

.hidden-xs
  @media (max-width $screen-xs-max)
    responsive-invisibility()

.hidden-sm
  @media (min-width $screen-sm-min) and (max-width $screen-sm-max)
    responsive-invisibility()

.hidden-md
  @media (min-width $screen-md-min) and (max-width $screen-md-max)
    responsive-invisibility()

.hidden-lg
  @media (min-width $screen-lg-min)
    responsive-invisibility()


// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.

// Note Deprecated .visible-print as of v3.2.0
.visible-print
  responsive-invisibility()

  @media print
    responsive-visibility()

.visible-print-block
  display none !important

  @media print
    display block !important

.visible-print-inline
  display none !important

  @media print
    display inline !important

.visible-print-inline-block
  display none !important

  @media print
    display inline-block !important

.hidden-print
  @media print
    responsive-invisibility()


// Embeds responsive
//
// Credit Nicolas Gallagher and SUIT CSS.

.embed-responsive
  position relative
  display block
  height 0
  padding 0
  overflow hidden

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video
    position absolute
    top 0
    left 0
    bottom 0
    height 100%
    width 100%
    border 0

// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9
  padding-bottom 56.25%

// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3
  padding-bottom 75%