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

2 @mixin generate-button-colors($textColor, $backgroundColor) {

3 background-color: $backgroundColor;

4 color: $textColor;

5 fill: $textColor;

6 text-transform: uppercase;

7 border: 1px solid $backgroundColor;

8 vertical-align: top;

9 &:hover {

10 background-color: lighten($backgroundColor, 8%);

11 //box-shadow: $bs-med;

12 text-decoration: none;

13 color: $textColor;

14 }

15 &:active {

16 background-color: darken($backgroundColor, 8%);

17 }

18 &:focus {

19 background-color: lighten($backgroundColor, 4%);

20 box-shadow: $bs-light;

21 text-decoration: none;

22 color: $textColor;

23 }

24 }

26 // Button Specific Variables

27 $button-border-radius: 2px;

29 .button-base {

30 text-decoration: none;

31 font-size: $fs-m;

32 line-height: 1.4em;

33 padding: $-xs*1.3 $-m;

34 margin: $-xs $-xs $-xs 0;

35 display: inline-block;

36 border: none;

37 font-weight: 400;

38 outline: 0;

39 border-radius: $button-border-radius;

40 cursor: pointer;

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

42 box-shadow: 0;

43 @include generate-button-colors(#EEE, $primary);

44 }

46 .button, input[type="button"], input[type="submit"] {

47 @extend .button-base;

48 &.pos {

49 @include generate-button-colors(#EEE, $positive);

50 }

51 &.neg {

52 @include generate-button-colors(#EEE, $negative);

53 }

54 &.secondary {

55 @include generate-button-colors(#EEE, $secondary);

56 }

57 &.muted {

58 @include generate-button-colors(#EEE, #AAA);

59 }

60 &.muted-light {

61 @include generate-button-colors(#666, #e4e4e4);

62 }

63 }

65 .button.outline {

66 background-color: transparent;

67 color: #888;

68 fill: #888;

69 border: 1px solid #DDD;

70 &:hover, &:focus, &:active {

71 box-shadow: none;

72 background-color: #EEE;

73 }

74 &.page {

75 border-color: $color-page;

76 color: $color-page;

77 fill: $color-page;

78 &:hover, &:focus, &:active {

79 background-color: $color-page;

80 color: #FFF;

81 fill: #FFF;

82 }

83 }

84 &.chapter {

85 border-color: $color-chapter;

86 color: $color-chapter;

87 fill: $color-chapter;

88 &:hover, &:focus, &:active {

89 background-color: $color-chapter;

90 color: #FFF;

91 fill: #FFF;

92 }

93 }

94 &.book {

95 border-color: $color-book;

96 color: $color-book;

97 fill: $color-book;

98 &:hover, &:focus, &:active {

99 background-color: $color-book;

100 color: #FFF;

101 fill: #FFF;

102 }

103 }

104 }

105

106 .text-button {

107 @extend .link;

108 background-color: transparent;

109 padding: 0;

110 margin: 0;

111 border: none;

112 user-select: none;

113 &:focus, &:active {

114 outline: 0;

115 }

116 &:hover {

117 text-decoration: none;

118 }

119 &.neg {

120 color: $negative;

121 }

122 }

123

124 .button-group {

125 @include clearfix;

126 .button, button[type="button"] {

127 margin: $-xs 0 $-xs 0;

128 float: left;

129 border-radius: 0;

130 &:first-child {

131 border-radius: $button-border-radius 0 0 $button-border-radius;

132 }

133 &:last-child {

134 border-radius: 0 $button-border-radius $button-border-radius 0;

135 }

136 }

137 }

138

139 .button.block {

140 width: 100%;

141 text-align: center;

142 display: block;

143 &.text-left {

144 text-align: left;

145 }

146 }

147

148 .button.icon {

149 .svg-icon {

150 margin-right: 0;

151 }

152 }

153

154 .button.svg {

155 svg {

156 display: inline-block;

157 position: absolute;

158 left: $-m;

159 top: $-s - 2px;

160 width: 24px;

161 height: 24px;

162 }

163 padding: $-s $-m;

164 padding-bottom: $-s - 2px;

165 padding-left: $-m*2 + 24px;

166 }

167

168 .button[disabled] {

169 background-color: #BBB;

170 cursor: default;

171 &:hover {

172 background-color: #BBB;

173 cursor: default;

174 box-shadow: none;

175 }

176 }