BookStack Code Mirror - bookstack/blob - resources/assets/sass/styles.scss

1 @import "reset";

2 @import "variables";

3 @import "mixins";

4 @import "html";

5 @import "text";

6 @import "grid";

7 @import "blocks";

8 @import "buttons";

9 @import "tables";

10 @import "forms";

11 @import "animations";

12 @import "tinymce";

13 @import "codemirror";

14 @import "components";

15 @import "header";

16 @import "lists";

17 @import "pages";

19 [v-cloak] {

20 display: none; opacity: 0;

21 animation-name: none !important;

22 }

24 // Jquery Sortable Styles

25 .dragged {

26 position: absolute;

27 opacity: 0.5;

28 z-index: 2000;

29 }

30 body.dragging, body.dragging * {

31 cursor: move !important;

32 }

34 // User Avatar Images

35 .avatar {

36 border-radius: 100%;

37 background-color: #EEE;

38 width: 30px;

39 height: 30px;

40 &.med {

41 width: 40px;

42 height: 40px;

43 }

44 &.large {

45 width: 80px;

46 height: 80px;

47 }

48 &.huge {

49 width: 120px;

50 height: 120px;

51 }

52 &.square {

53 border-radius: 3px;

54 }

55 }

57 // Loading icon

58 $loadingSize: 10px;

59 .loading-container {

60 position: relative;

61 display: block;

62 margin: $-xl auto;

63 > div {

64 width: $loadingSize;

65 height: $loadingSize;

66 border-radius: $loadingSize;

67 display: inline-block;

68 vertical-align: top;

69 transform: translate3d(-10px, 0, 0);

70 margin-top: $-xs;

71 animation-name: loadingBob;

72 animation-duration: 1.4s;

73 animation-iteration-count: infinite;

74 animation-timing-function: cubic-bezier(.62, .28, .23, .99);

75 margin-right: 4px;

76 background-color: $color-page;

77 animation-delay: 0.3s;

78 }

79 > div:first-child {

80 left: -($loadingSize+$-xs);

81 background-color: $color-book;

82 animation-delay: 0s;

83 }

84 > div:last-of-type {

85 left: $loadingSize+$-xs;

86 background-color: $color-chapter;

87 animation-delay: 0.6s;

88 }

89 > span {

90 margin-left: $-s;

91 font-style: italic;

92 color: #888;

93 vertical-align: top;

94 }

95 }

98 // Search results

99 .search-results > h3 a {

100 font-size: 0.66em;

101 color: $primary;

102 padding-left: $-m;

103 i {

104 padding-right: $-s;

105 }

106 }

107

108 // Back to top link

109 $btt-size: 40px;

110 [back-to-top] {

111 background-color: $primary;

112 position: fixed;

113 bottom: $-m;

114 right: $-l;

115 padding: 5px 7px;

116 cursor: pointer;

117 color: #FFF;

118 fill: #FFF;

119 svg {

120 width: $btt-size / 1.5;

121 height: $btt-size / 1.5;

122 margin-right: 4px;

123 }

124 width: $btt-size;

125 height: $btt-size;

126 border-radius: $btt-size;

127 transition: all ease-in-out 180ms;

128 opacity: 0;

129 z-index: 999;

130 overflow: hidden;

131 &:hover {

132 width: $btt-size*3.4;

133 opacity: 1 !important;

134 span {

135 display: inline-block;

136 }

137 }

138 .inner {

139 width: $btt-size*3.4;

140 }

141 span {

142 position: relative;

143 vertical-align: top;

144 line-height: 2;

145 }

146 }

147

148 .contained-search-box {

149 display: flex;

150 input, button {

151 border-radius: 0;

152 border: 1px solid #DDD;

153 margin-left: -1px;

154 }

155 input {

156 flex: 5;

157 &:focus, &:active {

158 outline: 0;

159 }

160 }

161 button {

162 width: 60px;

163 }

164 button i {

165 padding: 0;

166 }

167 button.cancel.active {

168 background-color: $negative;

169 color: #EEE;

170 }

171 }

172

173 .entity-selector {

174 border: 1px solid #DDD;

175 border-radius: 3px;

176 overflow: hidden;

177 font-size: 0.8em;

178 input[type="text"] {

179 width: 100%;

180 display: block;

181 border-radius: 0;

182 border: 0;

183 border-bottom: 1px solid #DDD;

184 font-size: 16px;

185 padding: $-s $-m;

186 }

187 .entity-list {

188 overflow-y: scroll;

189 height: 400px;

190 background-color: #EEEEEE;

191 }

192 .loading {

193 height: 400px;

194 padding-top: $-l;

195 }

196 .entity-list > p {

197 text-align: center;

198 padding-top: $-l;

199 font-size: 1.333em;

200 }

201 .entity-list > div {

202 padding-left: $-m;

203 padding-right: $-m;

204 background-color: #FFF;

205 transition: all ease-in-out 120ms;

206 cursor: pointer;

207 }

208 }

209

210 .entity-list-item.selected {

211 h3, i, p ,a, span {

212 color: #EEE;

213 }

214 }

215

216 .center-box {

217 margin: $-xxl auto 0 auto;

218 width: 420px;

219 max-width: 100%;

220 display: inline-block;

221 text-align: left;

222 vertical-align: top;

223 input {

224 width: 100%;

225 }

226 }

227

228 .fullscreen {

229 border:0;

230 position:fixed;

231 top:0;

232 left:0;

233 right:0;

234 bottom:0;

235 width:100%;

236 height:100%;

237 z-index: 150;

238 }