quasar/src/components/layout/layout.ios.styl at 7041db9509642a0c9cea7009f057614aa5df58bd · hipertracker/quasar · 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
$layout-toolbar-min-height ?= 50px
$layout-border             ?= 1px solid $toolbar-faded-color
$layout-aside-background   ?= white
$layout-aside-left-width   ?= 280px
$layout-aside-right-width  ?= 280px

$toolbar-title-font-size   ?= .95rem
$toolbar-padding           ?= 4px 10px

.layout
  width 100%
  min-height 100vh

.layout-header
  border-bottom $layout-border

.layout-footer
  border-top $layout-border

.layout-aside
  overflow-y auto
  position absolute
  top 0
  bottom 0
  background $layout-aside-background
  &.fixed
    z-index $z-side
  &.on-top
    z-index $z-fixed-side
.layout-aside-left
  left 0
  width $layout-aside-left-width
  &.fixed
    border-right $layout-border
.layout-aside-right
  right 0
  width $layout-aside-right-width
  &.fixed
    border-left $layout-border

main, .layout, .layout-header, .layout-footer
  position relative

.layout-header, .layout-footer
  color $toolbar-color
  background $toolbar-background
  z-index $z-marginals
  transition transform .3s

.layout-backdrop
  z-index ($z-fixed-side - 1)
  background $dimmed-background

.layout-side-opener
  z-index ($z-marginals + 1)
  height 100vh
  width 15px

body.with-layout-side-opened
  overflow hidden


.q-toolbar
  padding $toolbar-padding
  min-height $layout-toolbar-min-height
  display flex
  overflow hidden
  flex-direction row
  align-items center
  width 100%
  position relative
  color $toolbar-color
  background $toolbar-background

  &.inverted
    background transparent

  > .q-btn
    margin 0 .2rem
    padding .2rem
    &:active:not(.disabled)
      color $toolbar-active-color

.q-toolbar-title
  flex 1
  min-width 0
  max-width 100%
  font-weight 600
  text-overflow ellipsis
  white-space nowrap
  overflow hidden
  font-size $toolbar-title-font-size
  text-align center
  i
    line-height 1

body
  &.cordova.platform-ios, &.demo-site.within-iframe
    .layout-header > .toolbar:first-child, .layout-aside.top-padding
      padding-top $ios-statusbar-height
      min-height ($layout-toolbar-min-height + $ios-statusbar-height)

.layout-padding
  @media only screen and (max-width $layout-small-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
    padding 1.5rem 2rem
    margin auto
    &.horizontal
      padding 0 2rem
  @media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
    padding 2.5rem 3rem
    margin auto
    &.horizontal
      padding 0 3rem
  @media only screen and (min-width $layout-large-min)
    padding 3rem 4rem
    margin auto
    &.horizontal
      padding 0 4rem