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

2 .input-base {

3 background-color: #FFF;

4 border-radius: 3px;

5 border: 1px solid #D4D4D4;

6 display: inline-block;

7 font-size: $fs-s;

8 padding: $-xs*1.5;

9 color: #666;

10 width: 250px;

11 max-width: 100%;

13 &.neg, &.invalid {

14 border: 1px solid $negative;

15 }

16 &.pos, &.valid {

17 border: 1px solid $positive;

18 }

19 &.disabled, &[disabled] {

20 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);

21 }

22 &:focus {

23 outline: 0;

24 }

25 }

27 .fake-input {

28 @extend .input-base;

29 overflow: auto;

30 }

32 #html-editor {

33 display: none;

34 }

36 #markdown-editor {

37 position: relative;

38 z-index: 5;

39 #markdown-editor-input {

40 font-style: normal;

41 font-weight: 400;

42 padding: $-xs $-m;

43 color: #444;

44 border-radius: 0;

45 max-height: 100%;

46 flex: 1;

47 border: 0;

48 width: 100%;

49 &:focus {

50 outline: 0;

51 }

52 }

53 .markdown-display, .markdown-editor-wrap {

54 flex: 1;

55 position: relative;

56 }

57 .markdown-editor-wrap {

58 display: flex;

59 flex-direction: column;

60 border: 1px solid #DDD;

61 width: 50%;

62 max-width: 50%;

63 }

64 }

66 @include smaller-than($m) {

67 #markdown-editor {

68 flex-direction: column;

69 }

70 #markdown-editor .markdown-editor-wrap {

71 width: 100%;

72 max-width: 100%;

73 }

74 #markdown-editor .editor-toolbar {

75 padding: 0;

76 }

77 #markdown-editor .editor-toolbar > * {

78 padding: $-xs $-s;

79 }

80 .editor-toolbar-label {

81 float: none !important;

82 border-bottom: 1px solid #DDD;

83 display: block;

84 }

85 .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {

86 display: none;

87 }

88 #markdown-editor .markdown-editor-wrap:not(.active) {

89 flex-grow: 0;

90 flex: none;

91 }

92 }

94 .markdown-display {

95 padding: 0 $-m 0;

96 margin-left: -1px;

97 overflow-y: scroll;

98 &.page-content {

99 margin: 0 auto;

100 width: 100%;

101 max-width: 100%;

102 }

103 [drawio-diagram]:hover {

104 outline: 2px solid $primary;

105 }

106 }

107

108 .editor-toolbar {

109 width: 100%;

110 padding: $-xs $-m;

111 font-size: 11px;

112 line-height: 1.6;

113 border-bottom: 1px solid #DDD;

114 background-color: #EEE;

115 flex: none;

116 &:after {

117 content: '';

118 display: block;

119 clear: both;

120 }

121 }

122

123

124 label {

125 display: block;

126 line-height: 1.4em;

127 font-size: 0.94em;

128 font-weight: 400;

129 color: #666;

130 padding-bottom: 2px;

131 margin-bottom: 0.2em;

132 &.inline {

133 display: inline-block;

134 }

135 }

136

137 label.radio, label.checkbox {

138 font-weight: 400;

139 user-select: none;

140 input[type="radio"], input[type="checkbox"] {

141 margin-right: $-xs;

142 }

143 }

144

145 label.inline.checkbox {

146 margin-right: $-m;

147 }

148

149 label + p.small {

150 margin-bottom: 0.8em;

151 }

152

153 table.form-table {

154 max-width: 100%;

155 td {

156 overflow: hidden;

157 padding: $-xxs/2 0;

158 }

159 }

160

161 input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],

162 input[type="color"], input[type="password"], select, textarea {

163 @extend .input-base;

164 }

165

166 input[type=date] {

167 width: 190px;

168 }

169

170 input[type=color] {

171 height: 60px;

172 }

173

174 .toggle-switch {

175 user-select: none;

176 display: inline-grid;

177 grid-template-columns: (16px + $-s) 1fr;

178 align-items: center;

179 margin: $-m 0;

180 .custom-checkbox {

181 width: 16px;

182 height: 16px;

183 border-radius: 2px;

184 display: inline-block;

185 border: 2px solid currentColor;

186 opacity: 0.6;

187 overflow: hidden;

188 fill: currentColor;

189 .svg-icon {

190 width: 100%;

191 height: 100%;

192 margin: 0;

193 bottom: auto;

194 top: -1.5px;

195 left: 0;

196 transition: transform ease-in-out 120ms;

197 transform: scale(0);

198 transform-origin: center center;

199 }

200 }

201 input[type=checkbox] {

202 display: none;

203 }

204 input[type=checkbox]:checked + .custom-checkbox .svg-icon {

205 transform: scale(1);

206 }

207 .custom-checkbox:hover {

208 background-color: rgba(0, 0, 0, 0.05);

209 opacity: 0.8;

210 }

211 }

212 .toggle-switch-list {

213 .toggle-switch {

214 margin: $-xs 0;

215 }

216 &.compact .toggle-switch {

217 margin: 1px 0;

218 }

219 }

220

221 .form-group {

222 margin-bottom: $-s;

223 }

224

225 .setting-list > div {

226 border-bottom: 1px solid #DDD;

227 padding: $-xl 0;

228 &:last-child {

229 border-bottom: none;

230 }

231 }

232 .setting-list-label {

233 color: #222;

234 font-size: 1rem;

235 }

236 .setting-list-label + p.small {

237 margin-bottom: 0;

238 }

239 .setting-list-label + .grid {

240 margin-top: $-m;

241 }

242

243 .setting-list .grid, .stretch-inputs {

244 input[type=text], input[type=email], input[type=password], select {

245 width: 100%;

246 }

247 }

248

249 .simple-code-input {

250 background-color: #F8F8F8;

251 font-family: monospace;

252 font-size: 12px;

253 min-height: 100px;

254 display: block;

255 width: 100%;

256 }

257

258 .form-group {

259 div.text-pos, div.text-neg, p.text-post, p.text-neg {

260 padding: $-xs 0;

261 }

262 }

263

264 .form-group[collapsible] {

265 padding: 0 $-m;

266 border: 1px solid #DDD;

267 border-radius: 4px;

268 .collapse-title {

269 margin-left: -$-m;

270 margin-right: -$-m;

271 padding: $-s $-m;

272 }

273 .collapse-title, .collapse-title label {

274 cursor: pointer;

275 }

276 .collapse-title label {

277 padding-bottom: 0;

278 margin-bottom: 0;

279 color: inherit;

280 }

281 .collapse-title label:before {

282 display: inline-block;

283 content: '▸';

284 margin-right: $-m;

285 transition: all ease-in-out 400ms;

286 transform: rotate(0);

287 }

288 .collapse-content {

289 display: none;

290 padding-bottom: $-m;

291 }

292 &.open .collapse-title label:before {

293 transform: rotate(90deg);

294 }

295 }

296

297 .inline-input-style {

298 display: block;

299 width: 100%;

300 padding: $-s;

301 }

302

303 .title-input input[type="text"] {

304 @extend .inline-input-style;

305 margin-top: 0;

306 font-size: 2em;

307 }

308

309 .title-input.page-title {

310 font-size: 0.8em;

311 .input {

312 border: 0;

313 margin-bottom: -1px;

314 }

315 input[type="text"] {

316 max-width: 840px;

317 margin: 0 auto;

318 border: none;

319 }

320 }

321

322 .page-title input {

323 display: block;

324 width: 100%;

325 font-size: 1.4em;

326 }

327

328 .description-input textarea {

329 @extend .inline-input-style;

330 font-size: $fs-m;

331 color: #666;

332 width: 100%;

333 }

334

335 div[editor-type="markdown"] .title-input.page-title input[type="text"] {

336 max-width: 100%;

337 }

338

339 .search-box {

340 max-width: 100%;

341 position: relative;

342 button {

343 background-color: transparent;

344 border: none;

345 color: $primary;

346 padding: 0;

347 cursor: pointer;

348 position: absolute;

349 left: 8px;

350 top: 9.5px;

351 }

352 input {

353 display: block;

354 padding-left: $-l;

355 width: 300px;

356 max-width: 100%;

357 }

358 &.flexible input {

359 width: 100%;

360 }

361 .search-box-cancel {

362 left: auto;

363 right: 0;

364 }

365 }

366

367 .outline > input {

368 border: 0;

369 border-bottom: 2px solid #DDD;

370 border-radius: 0;

371 &:focus, &:active {

372 border: 0;

373 border-bottom: 2px solid #AAA;

374 outline: 0;

375 }

376 }

377

378

379 .image-picker img {

380 background-color: #BBB;

381 max-width: 100%;

382 }