]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_buttons.scss
Found the source of the issue, not sure how to fix
[bookstack] / resources / assets / sass / _buttons.scss
1
2 @mixin generate-button-colors($textColor, $backgroundColor) {
3   background-color: $backgroundColor;
4   color: $textColor;
5   &:hover {
6     background-color: lighten($backgroundColor, 8%);
7     box-shadow: $bs-med;
8     text-decoration: none;
9     color: $textColor;
10   }
11   &:active {
12     background-color: darken($backgroundColor, 8%);
13   }
14   &:focus {
15     background-color: lighten($backgroundColor, 4%);
16     box-shadow: $bs-light;
17     text-decoration: none;
18     color: $textColor;
19   }
20 }
21
22 // Button Specific Variables
23 $button-border-radius: 2px;
24
25 .button-base {
26   text-decoration: none;
27   font-size: $fs-m;
28   line-height: 1.4em;
29   padding: $-xs $-m;
30   margin: $-xs $-xs $-xs 0;
31   display: inline-block;
32   border: none;
33   font-weight: 500;
34   font-family: $text;
35   outline: 0;
36   border-radius: $button-border-radius;
37   cursor: pointer;
38   transition: all ease-in-out 120ms;
39   box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
40   @include generate-button-colors(#EEE, $primary);
41 }
42
43 .button, input[type="button"], input[type="submit"]  {
44   @extend .button-base;
45   &.pos {
46     @include generate-button-colors(#EEE, $positive);
47   }
48   &.neg {
49     @include generate-button-colors(#EEE, $negative);
50   }
51   &.secondary {
52     @include generate-button-colors(#EEE, $secondary);
53   }
54   &.muted {
55     @include generate-button-colors(#EEE, #888);
56   }
57 }
58
59 .text-button {
60   @extend .link;
61   background-color: transparent;
62   padding: 0;
63   margin: 0;
64   border: none;
65   &:focus, &:active {
66     outline: 0;
67   }
68   &.neg {
69     color: $negative;
70   }
71 }
72
73 .button-group {
74   @include clearfix;
75   .button, button[type="button"] {
76     margin: $-xs 0 $-xs 0;
77     float: left;
78     border-radius: 0;
79     &:first-child {
80       border-radius: $button-border-radius 0 0 $button-border-radius;
81     }
82     &:last-child {
83       border-radius: 0 $button-border-radius $button-border-radius 0;
84     }
85   }
86 }
87
88 .button.block {
89   width: 100%;
90   text-align: center;
91   display: block;
92 }
93
94 .button.icon {
95   i {
96     padding-right: 0;
97   }
98 }
99