BookStack Code Mirror - bookstack/blob - resources/sass/

2 /**

3 * Callouts

4 */

5 .callout {

6 border-left: 3px solid #BBB;

7 background-color: #EEE;

8 padding: $-s $-s $-s $-xl;

9 display: block;

10 position: relative;

11 &:before {

12 background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');

13 background-repeat: no-repeat;

14 content: '';

15 width: 1.2em;

16 height: 1.2em;

17 left: $-xs + 2px;

18 top: 50%;

19 margin-top: -9px;

20 display: inline-block;

21 position: absolute;

22 line-height: 1;

23 opacity: 0.8;

24 }

25 &.success {

26 border-left-color: $positive;

27 background-color: lighten($positive, 68%);

28 color: darken($positive, 16%);

29 }

30 &.success:before {

31 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");

32 }

33 &.danger {

34 border-left-color: $negative;

35 background-color: lighten($negative, 56%);

36 color: darken($negative, 20%);

37 }

38 &.danger:before {

39 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");

40 }

41 &.info {

42 border-left-color: $info;

43 background-color: lighten($info, 50%);

44 color: darken($info, 20%);

45 }

46 &.warning {

47 border-left-color: $warning;

48 background-color: lighten($warning, 50%);

49 color: darken($warning, 20%);

50 }

51 &.warning:before {

52 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");

53 }

54 }

56 /**

57 * Card-style blocks

58 */

60 .card {

61 background-color: #FFF;

62 box-shadow: $bs-card;

63 border-radius: 3px;

64 border: 1px solid transparent;

65 .body, p.empty-text {

66 padding: $-m;

67 }

68 a, p {

69 word-wrap: break-word;

70 word-break: break-word;

71 }

72 }

74 .card-title {

75 padding: $-m $-m $-xs;

76 margin: 0;

77 font-size: $fs-m;

78 color: #222;

79 fill: #222;

80 font-weight: 400;

81 }

82 .card-title a {

83 line-height: 1;

84 }

86 .card.border-card {

87 border: 1px solid #DDD;

88 }

90 .card.drag-card {

91 border: 1px solid #DDD;

92 border-radius: 4px;

93 display: flex;

94 padding: 0 0 0 ($-s + 28px);

95 margin: $-s 0;

96 position: relative;

97 .drag-card-action {

98 cursor: pointer;

99 }

100 .handle, .drag-card-action {

101 display: flex;

102 align-items: center;

103 text-align: center;

104 justify-content: center;

105 width: 28px;

106 flex-grow: 0;

107 padding: 0 $-xs;

108 &:hover {

109 background-color: #EEE;

110 }

111 .svg-icon {

112 margin-right: 0px;

113 }

114 }

115 > div .outline input {

116 margin: $-s 0;

117 width: 100%;

118 }

119 .handle {

120 background-color: #EEE;

121 left: 0;

122 position: absolute;

123 top: 0;

124 bottom: 0;

125 }

126 > div {

127 padding: 0 $-s;

128 max-width: 80%;

129 flex: 1;

130 }

131 }

132

133 .grid-card {

134 display: flex;

135 flex-direction: column;

136 border: 1px solid #ddd;

137 margin-bottom: $-l;

138 border-radius: 4px;

139 overflow: hidden;

140 min-width: 100px;

141 color: $text-dark;

142 transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;

143 &:hover {

144 color: $text-dark;

145 text-decoration: none;

146 box-shadow: $bs-card;

147 }

148 h2 {

149 width: 100%;

150 font-size: 1.5em;

151 margin: 0 0 10px;

152 }

153 p {

154 font-size: .7rem;

155 margin: 0;

156 line-height: 1.6em;

157 }

158 .grid-card-content {

159 flex: 1;

160 border-top: 0;

161 border-bottom-width: 2px;

162 }

163 .grid-card-content, .grid-card-footer {

164 padding: $-l;

165 }

166 .grid-card-content + .grid-card-footer {

167 padding-top: 0;

168 }

169 }

170

171 .book-grid-item .grid-card-footer {

172 p.small {

173 font-size: .8em;

174 margin: 0;

175 }

176 }

177

178 .content-wrap.card {

179 padding: $-m $-xxl;

180 margin-left: auto;

181 margin-right: auto;

182 margin-bottom: $-xl;

183 overflow: initial;

184 min-height: 60vh;

185 &.auto-height {

186 min-height: 0;

187 }

188 &.fill-width {

189 width: 100%;

190 }

191 }

192 @include smaller-than($xxl) {

193 .content-wrap.card {

194 padding: $-m $-xl;

195 }

196 }

197 @include smaller-than($m) {

198 .content-wrap.card {

199 padding: $-m $-l;

200 }

201 }

202 @include smaller-than($s) {

203 .content-wrap.card {

204 padding: $-m $-m;

205 }

206 }

207

208 /**

209 * Tags

210 */

211 .tag-item {

212 display: inline-flex;

213 margin-bottom: $-xs;

214 margin-right: $-xs;

215 border-radius: 4px;

216 border: 1px solid #CCC;

217 overflow: hidden;

218 font-size: 0.85em;

219 a, a:hover, a:active {

220 padding: 4px 8px;

221 color: #777;

222 transition: background-color ease-in-out 80ms;

223 text-decoration: none;

224 }

225 a:hover {

226 background-color: rgba(255, 255, 255, 0.7);

227 }

228 svg {

229 fill: #888;

230 }

231 .tag-value {

232 border-left: 1px solid #DDD;

233 background-color: rgba(255, 255, 255, 0.5);

234 }

235 }

236

237 .tag-list div:last-child .tag-item {

238 margin-bottom: 0;

239 }