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

1 button {

2 font-size: 100%;

3 }

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

6 background-color: $backgroundColor;

7 color: $textColor;

8 fill: $textColor;

9 border: 1px solid $backgroundColor;

10 &:hover {

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

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 color: $textColor;

21 }

22 }

24 // Button Specific Variables

25 $button-border-radius: 2px;

27 .button {

28 text-decoration: none;

29 font-size: 0.85rem;

30 line-height: 1.4em;

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

32 margin-top: $-xs;

33 margin-bottom: $-xs;

34 display: inline-block;

35 font-weight: 400;

36 outline: 0;

37 border-radius: $button-border-radius;

38 cursor: pointer;

39 transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;

40 box-shadow: none;

41 background-color: $primary;

42 color: #FFF;

43 fill: #FFF;

44 text-transform: uppercase;

45 border: 1px solid $primary;

46 vertical-align: top;

47 &:hover, &:focus {

48 text-decoration: none;

49 }

50 &:active {

51 background-color: darken($primary, 8%);

52 }

53 }

54 .button.primary {

55 @include generate-button-colors(#FFFFFF, $primary);

56 }

57 .button.outline {

58 background-color: transparent;

59 color: #888;

60 fill: #888;

61 border: 1px solid #DDD;

62 &:hover, &:focus, &:active {

63 box-shadow: none;

64 background-color: #EEE;

65 }

66 }

68 .button + .button {

69 margin-left: $-s;

70 }

72 .button.small {

73 font-size: 0.75rem;

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

75 }

77 .text-button {

78 cursor: pointer;

79 background-color: transparent;

80 padding: 0;

81 margin: 0;

82 border: none;

83 user-select: none;

84 font-size: 0.75rem;

85 line-height: 1.4em;

86 &:focus, &:active {

87 outline: 0;

88 }

89 &:hover {

90 text-decoration: none;

91 }

92 }

94 .button.block {

95 width: 100%;

96 text-align: left;

97 display: block;

98 }

100 .button.icon {

101 .svg-icon {

102 margin-right: 0;

103 }

104 }

105

106 .button.svg {

107 svg {

108 display: inline-block;

109 position: absolute;

110 left: $-m;

111 top: $-s - 2px;

112 width: 24px;

113 height: 24px;

114 }

115 padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);

116 }

117

118 .button[disabled] {

119 background-color: #BBB;

120 cursor: default;

121 &:hover {

122 background-color: #BBB;

123 cursor: default;

124 box-shadow: none;

125 }

126 }