BookStack Code Mirror - bookstack/blob - resources/assets/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.drag-card {

87 border: 1px solid #DDD;

88 border-radius: 4px;

89 display: flex;

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

91 margin: $-s 0;

92 position: relative;

93 .drag-card-action {

94 cursor: pointer;

95 }

96 .handle, .drag-card-action {

97 display: flex;

98 align-items: center;

99 text-align: center;

100 justify-content: center;

101 width: 28px;

102 flex-grow: 0;

103 padding: 0 $-xs;

104 &:hover {

105 background-color: #EEE;

106 }

107 .svg-icon {

108 margin-right: 0px;

109 }

110 }

111 > div .outline input {

112 margin: $-s 0;

113 width: 100%;

114 }

115 .handle {

116 background-color: #EEE;

117 left: 0;

118 position: absolute;

119 top: 0;

120 bottom: 0;

121 }

122 > div {

123 padding: 0 $-s;

124 max-width: 80%;

125 flex: 1;

126 }

127 }

128

129 .grid-card {

130 display: flex;

131 flex-direction: column;

132 border: 1px solid #ddd;

133 margin-bottom: $-l;

134 border-radius: 4px;

135 overflow: hidden;

136 min-width: 100px;

137 color: $text-dark;

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

139 &:hover {

140 color: $text-dark;

141 text-decoration: none;

142 box-shadow: $bs-card;

143 }

144 h2 {

145 width: 100%;

146 font-size: 1.5em;

147 margin: 0 0 10px;

148 }

149 p {

150 font-size: .7rem;

151 margin: 0;

152 line-height: 1.6em;

153 }

154 .grid-card-content {

155 flex: 1;

156 border-top: 0;

157 border-bottom-width: 2px;

158 }

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

160 padding: $-l;

161 }

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

163 padding-top: 0;

164 }

165 }

166

167 .bookshelf-grid-item .grid-card-content h2 a {

168 color: $color-bookshelf;

169 fill: $color-bookshelf;

170 }

171

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

173 p.small {

174 font-size: .8em;

175 margin: 0;

176 }

177 }

178

179 .content-wrap.card {

180 padding: $-m $-xxl;

181 margin-left: auto;

182 margin-right: auto;

183 margin-bottom: $-xl;

184 overflow: auto;

185 min-height: 60vh;

186 &.auto-height {

187 min-height: 0;

188 }

189 &.fill-width {

190 width: 100%;

191 }

192 }

193 @include smaller-than($xxl) {

194 .content-wrap.card {

195 padding: $-m $-xl;

196 }

197 }

198 @include smaller-than($m) {

199 .content-wrap.card {

200 padding: $-m $-l;

201 }

202 }

203 @include smaller-than($s) {

204 .content-wrap.card {

205 padding: $-m $-s;

206 }

207 }

208

209 /**

210 * Tags

211 */

212 .tag-item {

213 display: inline-flex;

214 margin-bottom: $-xs;

215 margin-right: $-xs;

216 border-radius: 4px;

217 border: 1px solid #CCC;

218 overflow: hidden;

219 font-size: 0.85em;

220 a, a:hover, a:active {

221 padding: 4px 8px;

222 color: #777;

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

224 text-decoration: none;

225 }

226 a:hover {

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

228 }

229 svg {

230 fill: #888;

231 }

232 .tag-value {

233 border-left: 1px solid #DDD;

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

235 }

236 }

237

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

239 margin-bottom: 0;

240 }