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
@import '../_custom-variables/pages';
 
$contact-col-breakpoint: md !default;
$contact-col-width: 33.33333% !default;
$contact-img-size-col-width: 33.33333% !default;
$contact-img-size-col-view: 6.25rem !default;
$contact-img-size-row-view: 4rem !default;
 
.contacts-dropdown {
  position: absolute;
  top: .75rem;
  right: .75rem;
 
  [dir=rtl] & {
    right: auto;
    left: .75rem;
  }
}
 
.contacts-col-view {
  .contact-content {
    margin: 0 auto;
    text-align: center;
  }
 
  .contact-content-img {
    margin-bottom: 1.25rem;
    width: $contact-img-size-col-view;
    height: $contact-img-size-col-view;
  }
 
  .contact-content-name,
  .contact-content-user {
    display: block;
  }
}
 
.contacts-row-view {
  .contacts-col > .card > .card-body {
    padding: 1rem;
  }
 
  .contact-content-img {
    flex-grow: 0;
    flex-shrink: 0;
    margin: .125rem 1.25rem 0 .25rem;
    width: $contact-img-size-row-view;
    height: $contact-img-size-row-view;
 
    [dir=rtl] & {
      margin: .125rem .25rem 0 1.25rem;
    }
  }
 
  .contact-content {
    display: flex;
    width: 100%;
  }
 
  .contact-content-about {
    flex-grow: 1;
 
     > hr {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }
  }
 
  .contact-content-name,
  .contact-content-user {
    display: inline-block;
  }
}
 
.default-style {
  @import "../_appwork/include";
 
  @include media-breakpoint-up($contact-col-breakpoint) {
    .contacts-col-view .contacts-col {
      flex: 0 0 $contact-col-width !important;
      max-width: $contact-col-width !important;
    }
  }
}
 
.material-style {
  @import "../_appwork/include-material";
 
  @include media-breakpoint-up($contact-col-breakpoint) {
    .contacts-col-view .contacts-col {
      flex: 0 0 $contact-col-width !important;
      max-width: $contact-col-width !important;
    }
  }
}