buttons.scss 5.59 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
  }
Annabel Dunstone's avatar
Annabel Dunstone committed
52 53 54 55

  svg {

    path {
56
      fill: $color;
Annabel Dunstone's avatar
Annabel Dunstone committed
57 58 59
    }

    use {
60
      stroke: $color;
Annabel Dunstone's avatar
Annabel Dunstone committed
61 62
    }
  }
63
}
Andrey's avatar
Andrey committed
64

65
@mixin btn-green {
66
  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
67 68
}

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

Andriy Dyadyura's avatar
Andriy Dyadyura committed
73
@mixin btn-blue-medium {
74
  @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
75 76
}

77
@mixin btn-orange {
78
  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
Andrey's avatar
Andrey committed
79 80
}

81
@mixin btn-red {
82
  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
83
}
84

85
@mixin btn-gray {
Annabel Dunstone's avatar
Annabel Dunstone committed
86
  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
87
}
88

89
@mixin btn-white {
Annabel Dunstone's avatar
Annabel Dunstone committed
90
  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
91 92
}

93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
@mixin btn-with-margin {
  margin-left: $btn-side-margin;
  float: left;

  &.inline {
    float: none;
  }

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

  &.btn-xs {
    margin-left: $btn-xs-side-margin;
  }
}

110
.btn {
111
  @include btn-default;
112
  @include btn-white;
113

114 115
  color: $gl-text-color;

116 117 118 119
  &:focus:active {
    outline: 0;
  }

120
  &.btn-small,
121
  &.btn-sm {
122 123 124
    padding: 4px 10px;
    font-size: 13px;
    line-height: 18px;
Andriy Dyadyura's avatar
Andriy Dyadyura committed
125
  }
126 127

  &.btn-xs {
128
    padding: 2px 5px;
129 130
  }

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
131 132 133
  &.btn-success,
  &.btn-new,
  &.btn-create,
134
  &.btn-save {
135 136
    @include btn-green;
  }
137

138 139 140 141 142 143 144 145 146
  &.btn-inverted {
    &.btn-success,
    &.btn-new,
    &.btn-create,
    &.btn-save {
      @include btn-outline($white-light, $green-normal, $green-normal, $green-light, $white-light, $green-light);
    }
  }

147 148 149
  &.btn-gray {
    @include btn-gray;
  }
150

Andriy Dyadyura's avatar
Andriy Dyadyura committed
151 152 153
  &.btn-primary {
    @include btn-blue-medium;
  }
154

155 156 157 158 159 160 161 162
  &.btn-info {
    @include btn-blue;
  }

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

163 164 165 166
  &.btn-close {
    @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light);
  }

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
167 168 169 170
  &.btn-danger,
  &.btn-remove,
  &.btn-red {
    @include btn-red;
171 172 173 174 175 176 177
  }

  &.btn-cancel {
    float: right;
  }

  &.btn-reopen {
178
    /* should be same as parent class for now */
179 180 181
  }

  &.btn-grouped {
182
    @include btn-with-margin;
183
  }
184

185 186 187
  &.disabled {
    pointer-events: auto !important;
  }
188

189 190 191 192
  &[disabled] {
    pointer-events: none !important;
  }

193 194 195
  .caret {
    margin-left: 5px;
  }
Annabel Dunstone's avatar
Annabel Dunstone committed
196 197

  svg {
198 199 200 201
    height: 15px;
    width: auto;
    position: relative;
    top: 2px;
Annabel Dunstone's avatar
Annabel Dunstone committed
202
  }
203 204
}

Phil Hughes's avatar
Phil Hughes committed
205 206 207 208
.btn-lg {
  padding: 12px 20px;
}

Phil Hughes's avatar
Phil Hughes committed
209 210 211 212 213 214 215 216 217 218 219 220 221
.btn-transparent {
  color: $btn-transparent-color;
  background-color: transparent;
  border: 0;

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

222 223 224 225 226 227 228 229 230 231 232
.btn-block {
  width: 100%;
  margin: 0;
  margin-bottom: 15px;
  &.btn {
    padding: 6px 0;
  }
}

.btn-group {
  &.btn-grouped {
233
    @include btn-with-margin;
234 235 236
  }
}

237 238
.btn-clipboard {
  border: none;
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
  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
265
    @include box-shadow($gl-btn-active-background);
266 267 268 269

    border: 1px solid #c6cacf !important;
    background-color: #e4e7ed !important;
  }
270
}
271 272 273 274 275 276 277 278 279 280

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

  .fa {
    margin-right: 5px;
  }
}
Annabel Dunstone's avatar
Annabel Dunstone committed
281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303

.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
304

305 306
.btn-build {
  margin-left: 10px;
Annabel Dunstone's avatar
Annabel Dunstone committed
307 308 309 310
  i {
    color: $gl-icon-color;
  }
}
311 312

.clone-dropdown-btn a {
Patricio Cano's avatar
Patricio Cano committed
313
  color: $dropdown-link-color;
314 315 316 317
  &:hover {
    text-decoration: none;
  }
}
318 319 320 321 322 323 324 325 326 327 328

.btn-static {
  background-color: $background-color !important;
  border: 1px solid lightgrey;
  cursor: default;
  &:active {
    -moz-box-shadow: inset 0 0 0 white;
    -webkit-box-shadow: inset 0 0 0 white;
    box-shadow: inset 0 0 0 white;
  }
}