Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
/* Buttons */
2 
 
3 
.btn {
4 
  i {
5 
    font-size: 1rem;
6 
  }
7 
  &.btn-rounded {
8 
    @include border-radius(50px);
9 
  }
10 
  &.btn-xs {
11 
    padding: $btn-padding-y-xs $btn-padding-x-xs;
12 
    font-size: $btn-font-size-xs;
13 
  }
14 
 
15 
  // Buttons with only icons
16 
  &.btn-icon {
17 
    width: 38px;
18 
    height: 38px;
19 
    padding: 0;
20 
    display: inline-flex;
21 
    align-items: center;
22 
    justify-content: center;
23 
    svg {
24 
      height: 18px;
25 
    }
26 
    &.btn-xs {
27 
      width: 30px;
28 
      height: 30px;
29 
      svg {
30 
        height: 14px;
31 
      }
32 
    }
33 
    &.btn-sm {
34 
      width: 36px;
35 
      height: 36px;
36 
      svg {
37 
        height: 15px;
38 
      }
39 
    }
40 
    &.btn-lg {
41 
      width: 42px;
42 
      height: 42px;
43 
      svg {
44 
        height: 18px;
45 
      }
46 
    }
47 
  }
48 
 
49 
  // Buttons with icon and text
50 
  &.btn-icon-text {
51 
    .btn-icon-prepend {
52 
      margin-right: .5rem;
53 
    }
54 
    .btn-icon-append {
55 
      margin-left: .5rem;
56 
    }
57 
    .btn-icon-prepend,
58 
    .btn-icon-append {
59 
      width: 18px;
60 
      height: 18px;
61 
    }
62 
    &.btn-xs {
63 
      .btn-icon-prepend,
64 
      .btn-icon-append {
65 
        width: 14px;
66 
        height: 14px;
67 
      }
68 
    }
69 
    &.btn-sm {
70 
      .btn-icon-prepend,
71 
      .btn-icon-append {
72 
        width: 15px;
73 
        height: 15px;
74 
      }
75 
    }
76 
    &.btn-lg {
77 
      .btn-icon-prepend,
78 
      .btn-icon-append {
79 
        width: 18px;
80 
        height: 18px;
81 
      }
82 
    }
83 
  }
84 
}
85 
 
86 
// Social buttons
87 
@each $color, $value in $social-colors {
88 
  .btn-#{$color} {
89 
    @include social-button(social-color($color));
90 
  }
91 
  .btn-outline-#{$color} {
92 
    @include social-outline-button(social-color($color));
93 
  }
94 
}
95 
 
96 
// Inverse buttons
97 
@each $color, $value in $theme-colors {
98 
  .btn-inverse-#{$color} {
99 
    @include button-inverse-variant($value);
100 
  }
101 
}