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 border: 1px solid #DDD;

69 &:hover, &:focus, &:active {

70 box-shadow: none;

71 background-color: #EEE;

72 }

73 &.page {

74 border-color: $color-page;

75 color: $color-page;

76 &:hover, &:focus, &:active {

77 background-color: $color-page;

78 color: #FFF;

79 }

80 }

81 &.chapter {

82 border-color: $color-chapter;

83 color: $color-chapter;

84 &:hover, &:focus, &:active {

85 background-color: $color-chapter;

86 color: #FFF;

87 }

88 }

89 &.book {

90 border-color: $color-book;

91 color: $color-book;

92 &:hover, &:focus, &:active {

93 background-color: $color-book;

94 color: #FFF;

95 }

96 }

97 }

99 .text-button {

100 @extend .link;

101 background-color: transparent;

102 padding: 0;

103 margin: 0;

104 border: none;

105 user-select: none;

106 &:focus, &:active {

107 outline: 0;

108 }

109 &:hover {

110 text-decoration: none;

111 }

112 &.neg {

113 color: $negative;

114 }

115 }

116

117 .button-group {

118 @include clearfix;

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

120 margin: $-xs 0 $-xs 0;

121 float: left;

122 border-radius: 0;

123 &:first-child {

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

125 }

126 &:last-child {

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

128 }

129 }

130 }

131

132 .button.block {

133 width: 100%;

134 text-align: center;

135 display: block;

136 &.text-left {

137 text-align: left;

138 }

139 }

140

141 .button.icon {

142 .svg-icon {

143 margin-right: 0;

144 }

145 }

146

147 .button.svg {

148 svg {

149 display: inline-block;

150 position: absolute;

151 left: $-m;

152 top: $-s - 2px;

153 width: 24px;

154 }

155 padding: $-s $-m;

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

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

158 }

159

160 .button[disabled] {

161 background-color: #BBB;

162 cursor: default;

163 &:hover {

164 background-color: #BBB;

165 cursor: default;

166 box-shadow: none;

167 }

168 }