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

2 .input-base {

3 background-color: #FFF;

4 border-radius: 3px;

5 border: 1px solid #CCC;

6 display: inline-block;

7 font-size: $fs-s;

8 font-family: $text;

9 padding: $-xs;

10 color: #222;

11 width: 250px;

12 max-width: 100%;

13 //-webkit-appearance:none;

14 &.neg, &.invalid {

15 border: 1px solid $negative;

16 }

17 &.pos, &.valid {

18 border: 1px solid $positive;

19 }

20 &.disabled, &[disabled] {

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

22 }

23 }

25 #html-editor {

26 display: none;

27 }

29 label {

30 display: block;

31 line-height: 1.4em;

32 font-size: 0.94em;

33 font-weight: 500;

34 color: #666;

35 padding-bottom: 2px;

36 margin-bottom: 0.2em;

37 &.inline {

38 display: inline-block;

39 }

40 }

42 label.radio, label.checkbox {

43 font-weight: 400;

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

45 margin-right: $-xs;

46 }

47 }

49 label + p.small {

50 margin-bottom: 0.8em;

51 }

53 input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], select, textarea {

54 @extend .input-base;

55 }

57 .toggle-switch {

58 display: inline-block;

59 background-color: #BBB;

60 width: 36px;

61 height: 14px;

62 border-radius: 7px;

63 position: relative;

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

65 cursor: pointer;

66 user-select: none;

67 &:after {

68 content: '';

69 display: block;

70 position: relative;

71 left: 0;

72 margin-top: -3px;

73 width: 20px;

74 height: 20px;

75 border-radius: 50%;

76 background-color: #fafafa;

77 border: 1px solid #CCC;

78 box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

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

80 }

81 &.active {

82 background-color: rgba($positive, 0.4);

83 &:after {

84 left: 16px;

85 background-color: $positive;

86 border: darken($positive, 20%);

87 }

88 }

89 }

90 .toggle-switch-checkbox {

91 display: none;

92 }

93 input:checked + .toggle-switch {

94 background-color: rgba($positive, 0.4);

95 &:after {

96 left: 16px;

97 background-color: $positive;

98 border: darken($positive, 20%);

99 }

100 }

101

102 .form-group {

103 margin-bottom: $-s;

104 }

105

106 .form-group {

107 .text-pos, .text-neg {

108 padding: $-xs 0;

109 }

110 }

111

112 .inline-input-style {

113 border: 2px dotted #BBB;

114 display: block;

115 width: 100%;

116 padding: $-xs $-s;

117 }

118

119 .title-input .input {

120 width: 100%;

121 }

122

123 .title-input label, .description-input label{

124 margin-top: $-m;

125 color: #666;

126 }

127

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

129 @extend h1;

130 @extend .inline-input-style;

131 margin-top: 0;

132 padding-right: 0;

133 width: 100%;

134 color: #444;

135 }

136

137 .title-input.page-title {

138 font-size: 0.8em;

139 .input {

140 border: 0;

141 margin-bottom: -1px;

142 }

143 input[type="text"] {

144 max-width: 840px;

145 margin: 0 auto;

146 border: none;

147 }

148 }

149

150 .page-title input {

151 display: block;

152 width: 100%;

153 font-size: 1.4em;

154 }

155

156 .description-input textarea {

157 @extend .inline-input-style;

158 font-size: $fs-m;

159 color: #666;

160 width: 100%;

161 }

162

163 .search-box {

164 max-width: 100%;

165 position: relative;

166 button {

167 background-color: transparent;

168 border: none;

169 color: $primary;

170 padding: 0;

171 margin: 0;

172 cursor: pointer;

173 margin-left: $-s;

174 }

175 button[type="submit"] {

176 margin-left: -$-l;

177 }

178 input {

179 padding-right: $-l;

180 width: 300px;

181 max-width: 100%;

182 }

183 }

184

185 #login-form label[for="remember"] {

186 margin: 0;

187 }

188 #login-form label.toggle-switch {

189 margin-left: $-xl;

190 }