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

1 @import "reset";

2 @import "variables";

3 @import "fonts";

4 @import "mixins";

5 @import "html";

6 @import "text";

7 @import "grid";

8 @import "blocks";

9 @import "buttons";

10 @import "tables";

11 @import "forms";

12 @import "animations";

13 @import "tinymce";

14 @import "codemirror";

15 @import "components";

16 @import "header";

17 @import "lists";

18 @import "pages";

19 @import "comments";

21 [v-cloak], [v-show] {

22 display: none; opacity: 0;

23 animation-name: none !important;

24 }

27 [ng\:cloak], [ng-cloak], .ng-cloak {

28 display: none !important;

29 user-select: none;

30 }

32 [ng-click] {

33 cursor: pointer;

34 }

36 // Jquery Sortable Styles

37 .dragged {

38 position: absolute;

39 opacity: 0.5;

40 z-index: 2000;

41 }

42 body.dragging, body.dragging * {

43 cursor: move !important;

44 }

46 // User Avatar Images

47 .avatar {

48 border-radius: 100%;

49 background-color: #EEE;

50 width: 30px;

51 height: 30px;

52 &.med {

53 width: 40px;

54 height: 40px;

55 }

56 &.large {

57 width: 80px;

58 height: 80px;

59 }

60 &.huge {

61 width: 120px;

62 height: 120px;

63 }

64 &.square {

65 border-radius: 3px;

66 }

67 }

69 // Loading icon

70 $loadingSize: 10px;

71 .loading-container {

72 position: relative;

73 display: block;

74 height: $loadingSize;

75 margin: $-xl auto;

76 > div {

77 width: $loadingSize;

78 height: $loadingSize;

79 border-radius: $loadingSize;

80 display: inline-block;

81 vertical-align: top;

82 transform: translate3d(0, 0, 0);

83 animation-name: loadingBob;

84 animation-duration: 1.4s;

85 animation-iteration-count: infinite;

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

87 margin-right: 4px;

88 background-color: $color-page;

89 animation-delay: 0.3s;

90 }

91 > div:first-child {

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

93 background-color: $color-book;

94 animation-delay: 0s;

95 }

96 > div:last-child {

97 left: $loadingSize+$-xs;

98 background-color: $color-chapter;

99 animation-delay: 0.6s;

100 }

101 }

102

103

104 // Search results

105 .search-results > h3 a {

106 font-size: 0.66em;

107 color: $primary;

108 padding-left: $-m;

109 i {

110 padding-right: $-s;

111 }

112 }

113

114 // Back to top link

115 $btt-size: 40px;

116 [back-to-top] {

117 background-color: $primary;

118 position: fixed;

119 bottom: $-m;

120 right: $-l;

121 padding: $-xs $-s;

122 cursor: pointer;

123 color: #FFF;

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 i {

142 margin: 0;

143 font-size: 28px;

144 padding: 0 $-s 0 0;

145 }

146 span {

147 line-height: 12px;

148 position: relative;

149 top: -5px;

150 }

151 }

152

153 .contained-search-box {

154 display: flex;

155 input, button {

156 border-radius: 0;

157 border: 1px solid #DDD;

158 margin-left: -1px;

159 }

160 input {

161 flex: 5;

162 &:focus, &:active {

163 outline: 0;

164 }

165 }

166 button {

167 width: 60px;

168 }

169 button i {

170 padding: 0;

171 }

172 button.cancel.active {

173 background-color: $negative;

174 color: #EEE;

175 }

176 }

177

178 .entity-selector {

179 border: 1px solid #DDD;

180 border-radius: 3px;

181 overflow: hidden;

182 font-size: 0.8em;

183 input[type="text"] {

184 width: 100%;

185 display: block;

186 border-radius: 0;

187 border: 0;

188 border-bottom: 1px solid #DDD;

189 font-size: 16px;

190 padding: $-s $-m;

191 }

192 .entity-list {

193 overflow-y: scroll;

194 height: 400px;

195 background-color: #EEEEEE;

196 }

197 .loading {

198 height: 400px;

199 padding-top: $-l;

200 }

201 .entity-list > p {

202 text-align: center;

203 padding-top: $-l;

204 font-size: 1.333em;

205 }

206 .entity-list > div {

207 padding-left: $-m;

208 padding-right: $-m;

209 background-color: #FFF;

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

211 cursor: pointer;

212 }

213 }

214

215 .entity-list-item.selected {

216 h3, i, p ,a, span {

217 color: #EEE;

218 }

219 }

220

221 .center-box {

222 margin: $-xl auto 0 auto;

223 padding: $-m $-xxl $-xl $-xxl;

224 width: 420px;

225 max-width: 100%;

226 display: inline-block;

227 text-align: left;

228 vertical-align: top;

229 //border: 1px solid #DDD;

230 input {

231 width: 100%;

232 }

233 &.login {

234 background-color: #EEE;

235 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);

236 border: 1px solid #DDD;

237 }

238 }

239

240

241