summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/wyrm/sass/wyrm_addons/redactor/_figures.sass
blob: 5069d82545c45eaa190d7ed4028b0198efc4ea6c (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
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
figure
  position: relative

figcaption
  text-align: center
  line-height: $base-line-height
  font-size: $base-font-size

figure[data-type=table]
  clear: both
figure[data-type=video]
  position: relative
  margin-bottom: $base-line-height
  text-align: center
  clear: both
  p
    margin: 0

  &.wy-figure-full
    &:before
      position: relative
      padding-bottom: 51%
      width: 100%
      height: 0
      content: ""
      display: block
    iframe
      width: 100%
      height: 100%
      position: absolute
      left: 0
      top: 0

figure[data-type=image]
  position: relative
  margin-bottom: $base-line-height
  .wy-figure-controls
    top: 0px
  img
    width: 100%
  &.wy-figure-large
    width: 100%
    clear: both
  &.wy-figure-medium
    width: 50%
  &.wy-figure-small
    width: 33%

figure[data-type=quote]
  font-family: $custom-font-family
  margin-bottom: $base-line-height
  margin-left: $base-line-height
  font-style: italic
  position: relative
  border-left: solid 5px $text-color
  padding-left: $base-line-height
  figcaption
    font-weight: bold
    text-align: left
  .wy-figure-controls
    margin-left: -5px
  &.wy-figure-medium
    font-size: 20px
  &.wy-figure-large
    font-size: 24px
  &.wy-figure-right
    width: 33%
  &.wy-figure-left
    width: 33%
    border-left: none
    border-right: solid 5px $text-color
    padding-left: 0
    padding-right: $base-line-height
    margin-left: 0
    margin-right: $base-line-height
    .wy-figure-controls
      margin-left: 0
      margin-right: -5px
  cite
    display: block
    text-align: left
    font-weight: bold
    &:before
      content: "\2014\00a0"
    &:empty:before
      opacity: 0.4
      content: "\2014 Type to add citation (optional)"

figure:hover .wy-figure-controls
  display: block

.wy-figure-controls
  background: $gray
  padding: $base-line-height / 4
  position: absolute
  display: none
  min-width: 100%
  white-space: nowrap
  left: 0
  top: -37px
  margin: auto
  font-family: $base-font-family
  border-bottom: solid 3px darken($gray, 10%)
  line-height: $base-line-height
  font-style: normal
  z-index: 5
  text-align: center
.wy-figure-controls span
  display: inline-block
  border: none
  background: none
  color: $text-invert
  vertical-align: top
  font-size: 14px
  width: 24px
  height: 24px
  line-height: 24px
  text-align: center
  cursor: pointer
  &.#{$icon-prefix}, &:before
    line-height: 24px
  &:hover
    background: rgba(255,255,255,.3)
    color: $white
  &.on
    background: $white
    color: $gray

.wy-figure-controls span
  &.wy-figure-controls-divider
    width: 1px
    background: lighten($gray, 10%)
    padding: 0
    margin: 0 2px
    cursor: normal
  &.wy-figure-controls-small
    font-size: 50%
  &.wy-figure-controls-medium
    font-size: 75%
  &.wy-figure-controls-arrow-left
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-left}
  &.wy-figure-controls-arrow-right
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-right}
  &.wy-figure-controls-arrow-up
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-up}
  &.wy-figure-controls-arrow-down
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-down}
  &.wy-figure-controls-resize-full
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-expand}
  &.wy-figure-controls-resize-small
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-compress}
  &.wy-figure-controls-delete
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-trash}
    margin-left: $base-line-height
    &:hover
      background: $red
  &.wy-figure-controls-table
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-table}
    width: auto
    padding-left: $base-line-height / 4
    text-align: left

.wy-figure-right
  float: right
  margin-left: $base-line-height
  .wy-figure-controls
    right: 0

.wy-figure-left
  float: left
  margin-right: $base-line-height

// On mobile, images should be full width
+media($mobile)
  figure[data-type=image]
    width: 100% !important
    float: none !important
    margin-left: 0
    margin-right: 0
  figure[data-type=video] iframe
    width: 100% !important
    height: auto !important