init

liuxiaolong

2019-05-06 2ab7a76a38fbf8fa107bf6371f5410ba54e1d394

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
// Buttons
//
 
.btn {
  font-size: $input-btn-font-size;
 
  @if $material-style {
    text-transform: uppercase;
  }
}
 
// Babge within button
.btn .badge {
  @include transition($btn-transition);
}
 
label.btn {
  margin-bottom: 0;
}
 
// *******************************************************************************
// * Alternate buttons
 
@each $color, $value in $theme-colors {
  @if $color != primary {
    @if $material-style {
      @include appwork-material-button-variant('.btn-#{$color}', $value);
      @include appwork-material-button-outline-variant('.btn-outline-#{$color}', $value);
    } @else {
      @include appwork-button-variant('.btn-#{$color}', $value);
      @include appwork-button-outline-variant('.btn-outline-#{$color}', $value);
    }
  }
}
 
// Default button
@if $material-style {
  @include appwork-material-button-variant('.btn-default', $btn-default-bg, $btn-default-color, $btn-default-color);
  @include appwork-material-button-outline-variant('.btn-outline-default', $btn-default-border, $btn-default-color);
} @else {
  @include appwork-button-variant('.btn-default', $btn-default-bg, $btn-default-color, $btn-default-border);
  @include appwork-button-outline-variant('.btn-outline-default', $btn-default-border, $btn-default-color);
}
 
// *******************************************************************************
// * Sizes
 
.btn-xl {
  @include button-size($input-btn-padding-y-xl, $input-btn-padding-x-xl, $input-btn-font-size-xl, $input-btn-line-height-xl, $btn-border-radius-xl);
}
 
.btn-lg {
  font-size: $input-btn-font-size-lg;
}
 
.btn-sm {
  font-size: $input-btn-font-size-sm;
}
 
.btn-xs {
  @include button-size($input-btn-padding-y-xs, $input-btn-padding-x-xs, $input-btn-font-size-xs, $input-btn-line-height-xs, $btn-border-radius-xs);
}
 
// *******************************************************************************
// * Round button
 
.btn-round {
  border-radius: 60rem !important;
}
 
// *******************************************************************************
// * Icon button
 
.icon-btn {
  $icon-btn-size:    ($input-btn-font-size    * $input-btn-line-height)    + ($input-btn-padding-y    * 2);
  $icon-btn-size-xl: ($input-btn-font-size-xl * $input-btn-line-height-xl) + ($input-btn-padding-y-xl * 2);
  $icon-btn-size-lg: ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2);
  $icon-btn-size-sm: ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2);
  $icon-btn-size-xs: ($input-btn-font-size-xs * $input-btn-line-height-xs) + ($input-btn-padding-y-xs * 2);
  $borders-width:    $input-btn-border-width * 2;
 
  width: calc(#{$icon-btn-size} + #{$borders-width}) !important;
  padding: 0;
  line-height: $icon-btn-size;
 
  &.btn-xl {
    width: calc(#{$icon-btn-size-xl} + #{$borders-width}) !important;
    line-height: $icon-btn-size-xl;
  }
 
  &.btn-lg {
    width: calc(#{$icon-btn-size-lg} + #{$borders-width}) !important;
    line-height: $icon-btn-size-lg;
  }
 
  &.btn-sm {
    width: calc(#{$icon-btn-size-sm} + #{$borders-width}) !important;
    line-height: $icon-btn-size-sm;
  }
 
  &.btn-xs {
    width: calc(#{$icon-btn-size-xs} + #{$borders-width}) !important;
    line-height: $icon-btn-size-xs;
  }
}
 
// *******************************************************************************
// * Without border
 
.btn.borderless {
  &:not(.active):not(:active):not(:hover):not(:focus),
  :not(.show) > &.dropdown-toggle:not(:hover):not(:focus) {
    border-color: transparent !important;
    box-shadow: none !important;
  }
}