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

1 @use "mixins";

2 @use "vars";

4 button {

5 background-color: transparent;

6 border: 0;

7 font-size: 100%;

8 }

10 .button {

11 text-decoration: none;

12 font-size: 0.85rem;

13 line-height: 1.4em;

14 padding: vars.$xs*1.3 vars.$m;

15 margin-top: vars.$xs;

16 margin-bottom: vars.$xs;

17 display: inline-block;

18 font-weight: 400;

19 outline: 0;

20 border-radius: 4px;

21 cursor: pointer;

22 transition: background-color ease-in-out 120ms,

23 filter ease-in-out 120ms,

24 box-shadow ease-in-out 120ms;

25 box-shadow: none;

26 background-color: var(--color-primary);

27 color: #FFF;

28 border: 1px solid var(--color-primary);

29 vertical-align: top;

30 &:hover, &:focus, &:active {

31 background-color: var(--color-primary);

32 text-decoration: none;

33 color: #FFFFFF;

34 }

35 &:hover {

36 @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);

37 filter: brightness(110%);

38 }

39 &:focus {

40 outline: 1px dotted currentColor;

41 outline-offset: -(vars.$xs);

42 box-shadow: none;

43 filter: brightness(90%);

44 }

45 &:active {

46 outline: 0;

47 }

48 }

50 .button.outline {

51 background-color: transparent;

52 @include mixins.lightDark(color, #666, #AAA);

53 fill: currentColor;

54 border: 1px solid;

55 @include mixins.lightDark(border-color, #CCC, #666);

56 &:hover, &:focus, &:active {

57 @include mixins.lightDark(color, #444, #BBB);

58 border: 1px solid #CCC;

59 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

60 background-color: #F2F2F2;

61 @include mixins.lightDark(background-color, #f8f8f8, #444);

62 filter: none;

63 }

64 &:active {

65 border-color: #BBB;

66 background-color: #DDD;

67 color: #666;

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

69 }

70 }

72 .button + .button {

73 margin-inline-start: vars.$s;

74 }

76 .button.small {

77 font-size: 0.75rem;

78 padding: vars.$xs*1.2 vars.$s;

79 }

81 .text-button {

82 cursor: pointer;

83 background-color: transparent;

84 padding: 0;

85 margin: 0;

86 border: none;

87 user-select: none;

88 font-size: 0.75rem;

89 line-height: 1.4em;

90 color: var(--color-link);

91 &:active {

92 outline: 0;

93 }

94 &:hover {

95 text-decoration: none;

96 }

97 &:hover, &:focus {

98 color: var(--color-link);

99 fill: var(--color-link);

100 }

101 }

102 .text-button.hover-underline:hover {

103 text-decoration: underline;

104 }

105

106 .button.block {

107 width: 100%;

108 text-align: start;

109 display: block;

110 }

111

112 .button.icon, .icon-button, .text-button.icon {

113 .svg-icon {

114 margin-inline-end: 0;

115 }

116 }

117

118 .icon-button {

119 text-align: center;

120 border: 1px solid transparent;

121 }

122 .icon-button:hover {

123 background-color: rgba(0, 0, 0, 0.05);

124 border-radius: 4px;

125 @include mixins.lightDark(border-color, #DDD, #444);

126 cursor: pointer;

127 }

128

129 .button.svg {

130 display: flex;

131 align-items: center;

132 padding: vars.$s vars.$m;

133 padding-bottom: (vars.$s - 2px);

134 width: 100%;

135 svg {

136 display: inline-block;

137 width: 24px;

138 height: 24px;

139 bottom: auto;

140 margin-inline-end: vars.$m;

141 }

142 }

143

144 .button[disabled] {

145 background-color: #BBB;

146 cursor: default;

147 border-color: #CCC;

148 &:hover {

149 background-color: #BBB;

150 cursor: default;

151 box-shadow: none;

152 }

153 }