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 margin-right: 4px;

122 }

123 width: $btt-size;

124 height: $btt-size;

125 border-radius: $btt-size;

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

127 opacity: 0;

128 z-index: 999;

129 overflow: hidden;

130 &:hover {

131 width: $btt-size*3.4;

132 opacity: 1 !important;

133 span {

134 display: inline-block;

135 }

136 }

137 .inner {

138 width: $btt-size*3.4;

139 }

140 span {

141 position: relative;

142 vertical-align: top;

143 line-height: 2;

144 }

145 }

146

147 .contained-search-box {

148 display: flex;

149 input, button {

150 border-radius: 0;

151 border: 1px solid #DDD;

152 margin-left: -1px;

153 }

154 input {

155 flex: 5;

156 &:focus, &:active {

157 outline: 0;

158 }

159 }

160 button {

161 width: 60px;

162 }

163 button i {

164 padding: 0;

165 }

166 button.cancel.active {

167 background-color: $negative;

168 color: #EEE;

169 }

170 }

171

172 .entity-selector {

173 border: 1px solid #DDD;

174 border-radius: 3px;

175 overflow: hidden;

176 font-size: 0.8em;

177 input[type="text"] {

178 width: 100%;

179 display: block;

180 border-radius: 0;

181 border: 0;

182 border-bottom: 1px solid #DDD;

183 font-size: 16px;

184 padding: $-s $-m;

185 }

186 .entity-list {

187 overflow-y: scroll;

188 height: 400px;

189 background-color: #EEEEEE;

190 }

191 .loading {

192 height: 400px;

193 padding-top: $-l;

194 }

195 .entity-list > p {

196 text-align: center;

197 padding-top: $-l;

198 font-size: 1.333em;

199 }

200 .entity-list > div {

201 padding-left: $-m;

202 padding-right: $-m;

203 background-color: #FFF;

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

205 cursor: pointer;

206 }

207 }

208

209 .entity-list-item.selected {

210 h3, i, p ,a, span {

211 color: #EEE;

212 }

213 }

214

215 .center-box {

216 margin: $-xxl auto 0 auto;

217 width: 420px;

218 max-width: 100%;

219 display: inline-block;

220 text-align: left;

221 vertical-align: top;

222 input {

223 width: 100%;

224 }

225 }

226

227 .fullscreen {

228 border:0;

229 position:fixed;

230 top:0;

231 left:0;

232 right:0;

233 bottom:0;

234 width:100%;

235 height:100%;

236 z-index: 150;

237 }