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

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

3 background-color: $backgroundColor;

4 color: $textColor;

5 text-transform: uppercase;

6 border: 1px solid $backgroundColor;

7 vertical-align: top;

8 &:hover {

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

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

11 text-decoration: none;

12 color: $textColor;

13 }

14 &:active {

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

16 }

17 &:focus {

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

19 box-shadow: $bs-light;

20 text-decoration: none;

21 color: $textColor;

22 }

23 }

25 // Button Specific Variables

26 $button-border-radius: 2px;

28 .button-base {

29 text-decoration: none;

30 font-size: $fs-m;

31 line-height: 1.4em;

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

33 margin: $-xs $-xs $-xs 0;

34 display: inline-block;

35 border: none;

36 font-weight: 400;

37 outline: 0;

38 border-radius: $button-border-radius;

39 cursor: pointer;

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

41 box-shadow: 0;

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

43 }

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

46 @extend .button-base;

47 &.pos {

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

49 }

50 &.neg {

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

52 }

53 &.secondary {

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

55 }

56 &.muted {

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

58 }

59 &.muted-light {

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

61 }

62 }

64 .button.outline {

65 background-color: transparent;

66 color: #888;

67 border: 1px solid #DDD;

68 &:hover, &:focus, &:active {

69 box-shadow: none;

70 background-color: #EEE;

71 }

72 &.page {

73 border-color: $color-page;

74 color: $color-page;

75 &:hover, &:focus, &:active {

76 background-color: $color-page;

77 color: #FFF;

78 }

79 }

80 &.chapter {

81 border-color: $color-chapter;

82 color: $color-chapter;

83 &:hover, &:focus, &:active {

84 background-color: $color-chapter;

85 color: #FFF;

86 }

87 }

88 &.book {

89 border-color: $color-book;

90 color: $color-book;

91 &:hover, &:focus, &:active {

92 background-color: $color-book;

93 color: #FFF;

94 }

95 }

96 }

98 .text-button {

99 @extend .link;

100 background-color: transparent;

101 padding: 0;

102 margin: 0;

103 border: none;

104 user-select: none;

105 &:focus, &:active {

106 outline: 0;

107 }

108 &:hover {

109 text-decoration: none;

110 }

111 &.neg {

112 color: $negative;

113 }

114 }

115

116 .button-group {

117 @include clearfix;

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

119 margin: $-xs 0 $-xs 0;

120 float: left;

121 border-radius: 0;

122 &:first-child {

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

124 }

125 &:last-child {

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

127 }

128 }

129 }

130

131 .button.block {

132 width: 100%;

133 text-align: center;

134 display: block;

135 &.text-left {

136 text-align: left;

137 }

138 }

139

140 .button.icon {

141 i {

142 padding-right: 0;

143 }

144 }

145

146 .button.svg {

147 svg {

148 display: inline-block;

149 position: absolute;

150 left: $-m;

151 top: $-s - 2px;

152 width: 24px;

153 }

154 padding: $-s $-m;

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

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

157 }

158

159 .button[disabled] {

160 background-color: #BBB;

161 cursor: default;

162 &:hover {

163 background-color: #BBB;

164 cursor: default;

165 box-shadow: none;

166 }

167 }