buttons.scss 4.94 KB
Newer Older
1
@mixin btn-default {
Andriy Dyadyura's avatar
Andriy Dyadyura committed
2
  @include border-radius(3px);
3
  font-size: $gl-font-size;
Andriy Dyadyura's avatar
Andriy Dyadyura committed
4
  font-weight: 500;
5
  padding: $gl-vert-padding $gl-btn-padding;
6

7
  &:focus,
Andrey's avatar
Andrey committed
8
  &:active {
9
    outline: none;
Annabel Dunstone's avatar
Annabel Dunstone committed
10
    background-color: $btn-active-gray;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
11
    @include box-shadow($gl-btn-active-background);
Andrey's avatar
Andrey committed
12 13 14 15
  }
}

@mixin btn-middle {
16
  @include btn-default;
Andrey's avatar
Andrey committed
17 18
}

19 20 21 22 23 24 25 26 27 28 29 30 31
@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) {
  background-color: $background;
  color: $text;
  border-color: $border;

  &:hover,
  &:focus {
    background-color: $hover-background;
    color: $hover-text;
    border-color: $hover-border;;
  }
}

32 33 34 35
@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
  background-color: $light;
  border-color: $border-light;
  color: $color;
Andrey's avatar
Andrey committed
36

37
  &:hover,
38
  &:focus {
39 40 41
    background-color: $normal;
    border-color: $border-normal;
    color: $color;
42 43
  }

Annabel Dunstone's avatar
Annabel Dunstone committed
44 45
  &:active,
  &.active {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
46
    @include box-shadow ($gl-btn-active-background);
47

48 49 50
    background-color: $dark;
    border-color: $border-dark;
    color: $color;
51 52
  }
}
Andrey's avatar
Andrey committed
53

54
@mixin btn-green {
55
  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
56 57
}

58
@mixin btn-blue {
59
  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
60
}
61

Andriy Dyadyura's avatar
Andriy Dyadyura committed
62
@mixin btn-blue-medium {
63
  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
Andriy Dyadyura's avatar
Andriy Dyadyura committed
64 65
}

66
@mixin btn-orange {
67
  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
Andrey's avatar
Andrey committed
68 69
}

70
@mixin btn-red {
71
  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
72
}
73

74
@mixin btn-gray {
Annabel Dunstone's avatar
Annabel Dunstone committed
75
  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
76
}
77

78
@mixin btn-white {
Annabel Dunstone's avatar
Annabel Dunstone committed
79
  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
80 81
}

82
.btn {
83
  @include btn-default;
84
  @include btn-white;
85

86 87
  color: $gl-text-color;

88 89 90 91
  &:focus:active {
    outline: 0;
  }

92
  &.btn-small,
93
  &.btn-sm {
94 95 96
    padding: 4px 10px;
    font-size: 13px;
    line-height: 18px;
Andriy Dyadyura's avatar
Andriy Dyadyura committed
97
  }
98 99

  &.btn-xs {
100
    padding: 2px 5px;
101 102
  }

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
103 104 105
  &.btn-success,
  &.btn-new,
  &.btn-create,
106
  &.btn-save {
107 108
    @include btn-green;
  }
109

110 111 112
  &.btn-gray {
    @include btn-gray;
  }
113

Andriy Dyadyura's avatar
Andriy Dyadyura committed
114 115 116
  &.btn-primary {
    @include btn-blue-medium;
  }
117

118 119 120 121 122 123 124 125
  &.btn-info {
    @include btn-blue;
  }

  &.btn-warning {
    @include btn-orange;
  }

126 127 128 129
  &.btn-close {
    @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light);
  }

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
130 131 132 133
  &.btn-danger,
  &.btn-remove,
  &.btn-red {
    @include btn-red;
134 135 136 137 138 139 140
  }

  &.btn-cancel {
    float: right;
  }

  &.btn-reopen {
141
    /* should be same as parent class for now */
142 143 144
  }

  &.btn-grouped {
145
    margin-right: $btn-side-margin;
146
    float: left;
147 148 149 150 151

    &.inline {
      float: none;
    }

152
    &:last-child {
153
      margin-right: 0;
154
    }
155 156 157 158 159

    &.btn-sm {
      margin-right: $btn-sm-side-margin;
    }

160
    &.btn-xs {
161
      margin-right: $btn-xs-side-margin;
162
    }
163
  }
164

165 166 167
  &.disabled {
    pointer-events: auto !important;
  }
168

169 170 171 172
  &[disabled] {
    pointer-events: none !important;
  }

173 174 175
  .caret {
    margin-left: 5px;
  }
176 177
}

Phil Hughes's avatar
Phil Hughes committed
178 179 180 181
.btn-lg {
  padding: 12px 20px;
}

Phil Hughes's avatar
Phil Hughes committed
182 183 184 185 186 187 188 189 190 191 192 193 194
.btn-transparent {
  color: $btn-transparent-color;
  background-color: transparent;
  border: 0;

  &:hover,
  &:active,
  &:focus {
    background-color: transparent;
    box-shadow: none;
  }
}

195 196 197 198 199 200 201 202 203 204 205 206 207 208
.btn-block {
  width: 100%;
  margin: 0;
  margin-bottom: 15px;
  &.btn {
    padding: 6px 0;
  }
}

.btn-group {
  &.btn-grouped {
    margin-right: 7px;
    float: left;
    &:last-child {
209
      margin-right: 0;
210 211 212 213
    }
  }
}

214 215
.btn-clipboard {
  border: none;
216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
  padding: 0 5px;
}

.input-group-btn {
  .btn {
    @include btn-middle;

    &:hover {
      outline: none;
    }

    &:focus {
      outline: none;
    }

    &:active {
      outline: none;
    }

    &.btn-clipboard {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  .active {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
242
    @include box-shadow($gl-btn-active-background);
243 244 245 246

    border: 1px solid #c6cacf !important;
    background-color: #e4e7ed !important;
  }
247
}
248 249 250 251 252 253 254 255 256 257

.btn-loading {
  &:not(.disabled) .fa {
    display: none;
  }

  .fa {
    margin-right: 5px;
  }
}
Annabel Dunstone's avatar
Annabel Dunstone committed
258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280

.btn-text-field {
  width: 100%;
  text-align: left;
  padding: 6px 16px;
  border-color: $border-color;
  color: $btn-placeholder-gray;
  background-color: $background-color;

  &:hover,
  &:active,
  &:focus {
    cursor: text;
    box-shadow: none;
    border-color: $border-color;
    color: $btn-placeholder-gray;
    background-color: $background-color;
  }
}

.btn-file-option {
  background: linear-gradient(180deg, $white-light 25%, $gray-light 100%);
}
Annabel Dunstone's avatar
Annabel Dunstone committed
281

282 283
.btn-build {
  margin-left: 10px;
Annabel Dunstone's avatar
Annabel Dunstone committed
284 285 286 287
  i {
    color: $gl-icon-color;
  }
}