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

1 button {

2 background-color: transparent;

3 border: 0;

4 font-size: 100%;

5 }

7 .button {

8 text-decoration: none;

9 font-size: 0.85rem;

10 line-height: 1.4em;

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

12 margin-top: $-xs;

13 margin-bottom: $-xs;

14 display: inline-block;

15 font-weight: 400;

16 outline: 0;

17 border-radius: 2px;

18 cursor: pointer;

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

20 filter ease-in-out 120ms,

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

22 box-shadow: none;

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

24 color: #FFF;

25 text-transform: uppercase;

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

27 vertical-align: top;

28 @include lightDark(filter, none, saturate(0.8) brightness(0.8));

29 &:hover, &:focus, &:active {

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

31 text-decoration: none;

32 color: #FFFFFF;

33 }

34 &:hover {

35 @include lightDark(box-shadow, $bs-light, $bs-dark);

36 filter: brightness(110%);

37 }

38 &:focus {

39 outline: 1px dotted currentColor;

40 outline-offset: -$-xs;

41 box-shadow: none;

42 filter: brightness(90%);

43 }

44 &:active {

45 outline: 0;

46 }

47 }

49 .button.outline {

50 background-color: transparent;

51 @include lightDark(color, #666, #aaa);

52 fill: currentColor;

53 border: 1px solid #CCC;

54 &:hover, &:focus, &:active {

55 border: 1px solid #CCC;

56 box-shadow: none;

57 background-color: #F2F2F2;

58 @include lightDark(background-color, #f2f2f2, #555);

59 filter: none;

60 }

61 &:active {

62 border-color: #BBB;

63 background-color: #DDD;

64 color: #666;

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

66 }

67 }

69 .button + .button {

70 margin-inline-start: $-s;

71 }

73 .button.small {

74 font-size: 0.75rem;

75 padding: $-xs*1.2 $-s;

76 }

78 .text-button {

79 cursor: pointer;

80 background-color: transparent;

81 padding: 0;

82 margin: 0;

83 border: none;

84 user-select: none;

85 font-size: 0.75rem;

86 line-height: 1.4em;

87 color: var(--color-primary);

88 @include whenDark {

89 color: #AAA;

90 }

91 &:active {

92 outline: 0;

93 }

94 &:hover {

95 text-decoration: none;

96 }

97 &:hover, &:focus {

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

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

100 }

101 }

102

103 .button.block {

104 width: 100%;

105 text-align: start;

106 display: block;

107 }

108

109 .button.icon {

110 .svg-icon {

111 margin-inline-end: 0;

112 }

113 }

114

115 .button.svg {

116 display: flex;

117 align-items: center;

118 padding: $-s $-m;

119 padding-bottom: ($-s - 2px);

120 width: 100%;

121 svg {

122 display: inline-block;

123 width: 24px;

124 height: 24px;

125 bottom: auto;

126 margin-inline-end: $-m;

127 }

128 }

129

130 .button[disabled] {

131 background-color: #BBB;

132 cursor: default;

133 border-color: #CCC;

134 &:hover {

135 background-color: #BBB;

136 cursor: default;

137 box-shadow: none;

138 }

139 }