Current File : /home/inlingua/www/crm/ninexb/wp-content/plugins/ultimate-member/assets/sass/um-members.sass |
@import "selectors"
@import "mixins"
@import "colors"
+keyframes(um-ajax-spinning)
0%
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
.um-new-dropdown
font-size: 16px
margin: 0
position: absolute
height: auto
background: #fff
z-index: 10
display: none
border: 1px solid $border
box-shadow: 0 7px 14px 0 $shadow1, 0 3px 6px 0 $shadow2
-webkit-box-shadow: 0 7px 14px 0 $shadow1, 0 3px 6px 0 $shadow2
+border-box
+border-radius(5px, 5px, 5px, 5px)
ul
margin: 0
padding: 0
li
list-style-type: none
padding: 0
margin: 0
a
display: block
padding: 8px 12px
line-height: 1
.um-new-dropdown-arr
position: absolute
font-size: 24px
width: 24px
height: 24px
overflow: hidden
z-index: 15
color: #eee
*
display: block
width: 24px
height: 24px
vertical-align: bottom
overflow: hidden
line-height: 24px
body
#content
.#{$prefix}directory
a
text-decoration: none
border-bottom: none
box-shadow: none
&:hover, &:focus
text-decoration: none
border-bottom: none
box-shadow: none
.#{$prefix}directory
+flex( column, flex-start, stretch, nowrap )
position: relative
a
text-decoration: none
border-bottom: none
box-shadow: none
&:hover, &:focus
text-decoration: none
border-bottom: none
box-shadow: none
.select2-container--disabled
opacity: 0.6
.um-members-overlay
display: none
position: absolute
width: 100%
top: 0
bottom: 0
background: none
z-index: 2
.um-ajax-loading
+transition(.1s,opacity)
color: #c6c6c6 !important
-webkit-animation: um-ajax-spinning 1.1s infinite linear
animation: um-ajax-spinning 1.1s infinite linear
border-top: .2em solid rgba(198, 198, 198, 0.2)
border-right: .2em solid rgba(198, 198, 198, 0.2)
border-bottom: .2em solid rgba(198, 198, 198, 0.2)
border-left: .2em solid #c6c6c6
font-size: 1.75em
position: absolute
left: calc(50% - 1.75em)
top: calc(50% - 1.75em)
filter: alpha(opacity=0)
-ms-transform: translateZ(0)
transform: translateZ(0)
border-radius: 50%
display: block
width: 2.5em
height: 2.5em
margin: 0
outline: 0
padding: 0
vertical-align: baseline
.um-member-directory-header
+flex( column, flex-start, stretch, nowrap )
width: 100%
.um-member-directory-header-row
&.um-member-directory-filters-bar
padding: 0 0 10px 0
&:not(.um-member-directory-filters-bar)
+flex( row, flex-start, baseline, nowrap )
margin: 0 0 10px 0
&.um-header-row-invisible
margin: 0
&.um-member-directory-search-row
justify-content: flex-end
.um-member-directory-search-line
+flex( row, flex-start, center, nowrap )
width: 60%
label
flex: 1
margin: 0 10px 0 0
min-width: 90px
max-width: 85%
span
display: none
margin: 0 5px 0 0
.um-search-line
-webkit-appearance: textfield
width: 100%
+border-box
.um-do-search
min-width: 15%
width: auto
.um-member-directory-nav-line
+flex( row, space-between, center, nowrap )
width: 100%
.um-member-directory-view-type
font-size: 30px
line-height: 30px
margin: 0 10px 0 0
width: 30px
.um-member-directory-view-type-a
color: $border
display: none
&.um-disabled
cursor: default
a
cursor: default
&:not( .um-disabled )
.um-member-directory-view-type-a
&:hover
color: $hover
&:focus
color: $border
.um-member-directory-sorting
+flex( row, flex-start, baseline, nowrap )
flex: 5
.um-member-directory-sorting-a
+flex( row, flex-start, baseline, nowrap )
position: relative
cursor: pointer
a
margin: 0 5px 0 0
i
&.um-faicon-caret-down
display: inline
&.um-faicon-caret-up
display: none
&.um-member-directory-sorting-visible
i
&.um-faicon-caret-down
display: none
&.um-faicon-caret-up
display: inline
.um-new-dropdown
top : 24px
width: 200px
left: -12px
li
a[data-selected="1"]
display: none
.um-member-directory-filters
+flex( row, flex-end, baseline, nowrap )
flex: 2
text-align: right
.um-member-directory-filters-a
+flex( row, flex-start, baseline, nowrap )
cursor: pointer
a
margin: 0 5px 0 0
i
&.um-faicon-caret-down
display: inline
&.um-faicon-caret-up
display: none
&.um-member-directory-filters-visible
i
&.um-faicon-caret-down
display: none
&.um-faicon-caret-up
display: inline
.um-search
margin: 0
width: 100%
display: grid
grid-template-rows: auto 1fr
grid-template-columns: repeat(3, 1fr)
grid-gap: 10px
grid-auto-rows: minmax(max-content, auto)
-ms-grid-template-rows: auto 1fr
-ms-grid-template-columns: repeat(3, 1fr)
-ms-grid-gap: 10px
-ms-grid-auto-rows: minmax(max-content, auto)
align-items: center
.um-search-filter
+flex( row, flex-start, baseline, nowrap )
width: 100%
position: relative
.select2-container
float: left
width: 100% !important
.um-s1
width: 100%
&.um-text-filter-type
input
width: 100%
&.um-slider-filter-type
flex-direction: column
align-items: stretch
.um-slider
width: calc( 100% - 16px )
.ui-slider-range.ui-widget-header
background: #44b0ec
border: 1px solid #44b0ec !important
margin-top: -1px
&.ui-slider.ui-slider-horizontal
border: 1px solid #ddd !important
box-sizing: border-box
margin: 4px 8px 0 8px
.um-slider-range
+flex( row, flex-start, baseline, nowrap )
margin: 6px 0 0 8px
font-size: 0.8em
&.um-datepicker-filter-type,
&.um-timepicker-filter-type
+flex( row, flex-start, baseline, nowrap )
input
width: calc( 50% - 5px )
margin: 0 5px 0 0 !important
+border-box
//float: left
&:nth-child(even)
margin: 0 0 0 5px !important
&[style*="overflow: hidden;"]
.um-search-filter
pointer-events: none
&.um-search-invisible
display: none
.um-filtered-line
+flex( row, flex-start, baseline, wrap )
//margin: 5px 0 0 0
margin: 0
padding: 0
box-sizing: border-box
border: none
.um-members-filter-tag
+flex( row, flex-start, center, nowrap )
margin: 0 10px 5px 0
padding: 0 10px
border-radius: 3px
cursor: default
background: #f1f1f1
font-size: 13px
&:first-child
margin-left: 0
.um-members-filter-remove
float: right
display: inline-block
margin-left: 10px
cursor: pointer
font-weight: bold
font-size: 20px
&:hover
color: #a00
.um-clear-filters
display: none
a
padding: 3px 10px
margin: 0 10px
.um-members-wrapper
+flex( column, flex-start, stretch, nowrap )
width: 100%
margin: 0 0 10px 0
padding: 0
position: relative
height: 300px
.um-members-intro
text-align: center
margin: 0 0 10px 0
.um-members-total
font-size: 20px
font-weight: 300
.um-members
width: 100%
margin: 0
padding: 0
-ms-word-break: break-all
word-break: break-word
word-wrap: break-word
.um-member
border: 1px solid $border
+border-box
.um-member-photo
&.radius-1
a img
-moz-border-radius: 999px !important
-webkit-border-radius: 999px !important
border-radius: 999px !important
&.radius-2
a img
-moz-border-radius: 4px !important
-webkit-border-radius: 4px !important
border-radius: 4px !important
&.radius-3
a img
-moz-border-radius: 0 !important
-webkit-border-radius: 0 !important
border-radius: 0 !important
.um-member-card
.um-member-name
+flex( row, flex-start, baseline, nowrap )
a
+flex( row, flex-start, center, nowrap )
img
display: block
overflow: hidden
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
margin: 0
padding: 0
&.um-members-grid
.um-gutter-sizer
width: 5%
.um-member
float: left
width: 30%
background: #fff
text-align: center
margin-bottom: 40px
position: relative
.um-member-status
display: none
background: #999
&.awaiting_admin_review,
&.inactive,
&.rejected
display: block
position: absolute
top: 0
left: 0
width: 100%
padding: 7px 15px
color: #fff
z-index: 10
font-size: 13px
+border-box
&.awaiting_admin_review
background: #c74a4a
.um-member-photo
padding: 40px 0 20px 0
text-align: center
a
text-decoration: none
box-shadow: none !important
display: inline !important
img
display: inline !important
border: 5px solid #fff
background: #fff
width: 140px
height: 140px
float: none !important
&.awaiting_admin_review,
&.inactive,
&.rejected
opacity: 0.7
&.with-cover
.um-member-photo
padding-top: 0
a img
width: 90px
height: 90px
position: relative
top: -35px
margin-bottom: -45px
float: none
opacity: 1
.um-member-cover
background-color: #eee
box-sizing: border-box
position: relative
&[data-ratio]
overflow-y: hidden
.um-member-cover-e
text-align: center
box-sizing: border-box
img
width: 100% !important
.um-member-card
padding-bottom: 15px
&.no-photo
padding-top: 30px
.um-member-name
margin: 0 0 4px 0
justify-content: center
a
font-size: 16px
line-height: 26px
color: #444
font-weight: 700
.um-members-edit-btn
margin: 2px 0
height: 40px
a.um-edit-profile-btn
padding: 10px 15px !important
transition: none !important
display: inline-block !important
margin: 0 auto !important
min-width: 110px
width: auto
text-align: center
font-size: 13px
&:before
font-family: "FontAwesome"
margin-right: 8px
width: 14px
text-align: left
display: inline-block
font-size: 16px
position: relative
left: 0
top: 1px
content: "\f013"
.um-member-tagline
font-size: 13px
line-height: 22px
color: #999
padding: 0 15px
.um-member-meta-main
.um-member-meta
display: none
margin: 20px 15px 0 15px
padding: 15px 0
border-top: 1px solid #e5e5e5
&.no-animate
display: block
.um-member-metaline
font-size: 13px
padding: 12px 0 0 0
line-height: 16px
vertical-align: middle
strong
display: block
clear: both
span
display: block
text-align: center
.um-member-connect
padding-top: 20px
a
display: inline-block
width: 40px
line-height: 40px
height: 40px
-moz-border-radius: 999px
-webkit-border-radius: 999px
border-radius: 999px
color: #fff !important
opacity: 0.85
margin: 0 1px
font-size: 22px
transition: 0.25s
&:hover
opacity: 1
color: #fff
.um-member-less
display: none
a
color: #666
display: inline-block
i
display: block
font-size: 32px
height: 32px
line-height: 32px
.um-member-more
a
color: #666
display: inline-block
i
display: block
font-size: 32px
height: 32px
line-height: 32px
&.um-members-list
display: grid
grid-template-rows: auto 1fr
grid-template-columns: repeat(1, 1fr)
grid-gap: 10px
grid-auto-rows: minmax(max-content, auto)
-ms-grid-template-rows: auto 1fr
-ms-grid-template-columns: repeat(1, 1fr)
-ms-grid-gap: 10px
-ms-grid-auto-rows: minmax(max-content, auto)
align-items: center
.um-member
+flex( column, flex-start, stretch, nowrap )
width: 100%
padding: 15px
margin: 0
background: #fff
+border-box
.um-member-status
display: none
background: #999
&.awaiting_admin_review,
&.inactive,
&.rejected
display: block
width: 100%
padding: 7px 15px
margin-bottom: 10px
color: #fff
font-size: 13px
+border-box
&.awaiting_admin_review
background: #c74a4a
.um-member-card-container
+flex( row, flex-start, flex-start, nowrap )
width: 100%
margin: 0 0 10px 0
padding: 0
.um-member-photo
width: 100px
margin: 0 15px 0 0
padding: 0
a
width: 100px
height: 100px
display: block
img
width: 100px
height: 100px
position: relative
top: 0
margin: 0
margin-bottom: 0
border: none
.um-member-card
+flex( row, flex-start, flex-start, nowrap )
width: calc( 100% - 115px )
padding: 0
margin: 0
+border-box
&.no-photo
width: 100%
.um-member-card-content
+flex( column, flex-start, stretch, nowrap )
width: calc( 100% - 30px )
margin: 0 10px 0 0
.um-member-card-header
width: 100%
.um-member-name
margin: 0 0 4px 0
a
font-size: 16px
line-height: 26px
color: #444
font-weight: 700
.um-member-tagline
+flex( row, flex-start, baseline, wrap )
width: 100%
font-size: 13px
//line-height: 22px
color: #999
padding: 0
box-sizing: border-box
.um-member-meta-main
width: 100%
padding: 0
box-sizing: border-box
display: none
&.no-animate
display: block
.um-member-meta
float: left
width: 100%
display: block
margin: 10px 0 0 0
box-sizing: border-box
border: none
.um-member-metaline
+flex( row, flex-start, center, wrap )
font-size: 13px
padding: 12px 0 0 0
line-height: 16px
width: 100%
.um-member-connect
padding-top: 10px
a
display: inline-block
width: 40px
line-height: 40px
height: 40px
-moz-border-radius: 999px
-webkit-border-radius: 999px
border-radius: 999px
color: #fff !important
opacity: 0.85
margin: 0 1px
font-size: 22px
transition: 0.25s
text-align: center
&:hover
opacity: 1
color: #fff
.um-member-card-actions
+flex( column, flex-start, flex-end, nowrap )
width: 20px
text-align: right
padding: 0
.um-member-cog
position: relative
.um-member-actions-a
line-height: 1
display: block
color: #666
i
display: block
font-size: 20px
line-height: 1
.um-new-dropdown
width: 180px
right: 0
text-align: left
a
box-sizing: border-box
.um-member-card-footer
+flex( row, flex-end, center, nowrap )
width: 100%
.um-member-card-footer-buttons
+flex( row, flex-start, baseline, nowrap )
width: calc( 100% - 145px )
margin: 0 10px 0 0
.um-members-list-footer-button-wrapper
+flex( row, flex-start, baseline, nowrap )
margin: 0
//flex: 1 0 calc( ( 100% - 20px ) / 3 )
& > :not(:last-child)
margin: 0 10px 0 0
.um-member-card-reveal-buttons
width: 20px
text-align: right
.um-member-more
+flex( column, flex-start, baseline, nowrap )
a
color: #666
display: inline-block
i
display: block
font-size: 28px
height: 28px
line-height: 28px
.um-member-less
+flex( column, flex-start, baseline, nowrap )
display: none
a
color: #666
display: inline-block
i
display: block
font-size: 28px
height: 28px
line-height: 28px
&.no-photo.no-reveal
.um-member-card-footer-buttons
width: 100%
&.no-photo:not(.no-reveal)
.um-member-card-footer-buttons
width: calc( 100% - 30px )
&.no-reveal:not(.no-photo)
.um-member-card-footer-buttons
width: calc( 100% - 125px )
.um-members-none
text-align: center
font-size: 18px
.um-members-pagination-box
width: 100%
float: left
margin: 0 0 10px 0
padding: 0
.um-members-pagi
+flex( row, center, baseline, nowrap )
width: 100%
margin: 0
padding: 0
font-size: 15px
.pagi
cursor: pointer
display: inline-block
width: auto
height: 34px
line-height: 34px
transition: all .2s linear
padding: 0 14px
color: #666 !important
font-weight: normal
&.pagi-arrow
line-height: 38px
i:before
font-size: 20px
vertical-align: middle !important
height: 34px
line-height: 34px
top: -2px
position: relative
&.current
cursor: default
color: #fff !important
&:hover
color: #fff !important
&.disabled
cursor: default
opacity: .4
&.none
color: #aaa !important
.um-members-pagidrop
width: 100%
float: left
margin: 0
text-align: center
padding: 5px 0
font-size: 15px
&.um-loaded
.um-members-wrapper
height: auto
&[data-view_type="list"]
.um-member-directory-header
.um-member-directory-header-row
.um-member-directory-view-type
.um-member-directory-view-type-a[data-type="list"]
display: block
&[data-view_type="grid"]
.um-member-directory-header
.um-member-directory-header-row
.um-member-directory-view-type
.um-member-directory-view-type-a[data-type="grid"]
display: block
&[data-view_type="map"]
.um-member-directory-header
.um-member-directory-header-row
.um-member-directory-view-type
.um-member-directory-view-type-a[data-type="map"]
display: block
&.uimob340
.um-member-directory-header
.um-member-directory-header-row
.um-member-directory-search-line
width: 100%
&.um-member-directory-search-row
justify-content: flex-start
.um-member-directory-nav-line
flex-wrap: wrap
.um-member-directory-view-type
width: 20px
font-size: 20px
line-height: 20px
margin: 0 2px 0 0
.um-member-directory-sorting
width: calc( 100% - 25px )
justify-content: flex-end
.um-new-dropdown
right: 0
left: auto
.um-member-directory-filters
flex: none
width: 100%
.um-search
grid-template-columns: repeat(1, 1fr)
.um-members-wrapper
.um-members
.um-member
width: 100%
&.um-members-grid
.um-gutter-sizer
width: 0
&.um-members-list
.um-member
padding: 10px
.um-member-photo
width: 50px
margin: 0 10px 0 0
a
width: 50px
height: 50px
img
width: 50px
height: 50px
.um-member-card
width: calc( 100% - 60px )
.um-member-card-footer
align-items: flex-start
.um-member-card-footer-buttons
+flex( column, flex-start, stretch, nowrap )
width: calc( 100% - 90px )
margin: 0 10px 0 0
.um-members-list-footer-button-wrapper
margin: 0 0 5px 0
a.um-button
width: 100% !important
&.no-reveal:not(.no-photo)
.um-member-card-footer-buttons
width: calc( 100% - 70px )
.um-members-pagination-box
.um-members-pagi
display: none
&.uimob500
.um-member-directory-header
.um-member-directory-header-row
.um-member-directory-search-line
width: 100%
&.um-member-directory-search-row
justify-content: flex-start
.um-member-directory-nav-line
.um-member-directory-view-type
width: 20px
font-size: 20px
line-height: 20px
margin: 0 5px 0 0
.um-search
grid-template-columns: repeat(1, 1fr)
.um-members-wrapper
.um-members
.um-member
width: 100%
&.um-members-grid
.um-gutter-sizer
width: 0
&.um-members-list
.um-member
.um-member-photo
width: 70px
margin: 0 10px 0 0
a
width: 70px
height: 70px
img
width: 70px
height: 70px
.um-member-card
width: calc( 100% - 80px )
.um-member-card-footer
align-items: flex-start
.um-member-card-footer-buttons
flex-wrap: wrap
width: calc( 100% - 110px )
margin: 0 10px 0 0
.um-members-list-footer-button-wrapper
margin: 0 10px 5px 0
&.no-reveal:not(.no-photo)
.um-member-card-footer-buttons
width: calc( 100% - 90px )
.um-members-pagination-box
.um-members-pagi
display: none
&.uimob800
.um-member-directory-header
.um-member-directory-header-row
.um-member-directory-search-line
width: 100%
.um-search
grid-template-columns: repeat(2, 1fr)
.um-members-wrapper
.um-members
&.um-members-grid
.um-gutter-sizer
width: 4%
.um-member
width: 48%
&.um-members-list
.um-member
.um-member-photo
width: 80px
margin: 0 10px 0 0
a
width: 80px
height: 80px
img
width: 80px
height: 80px
.um-member-card
width: calc( 100% - 90px )
.um-member-card-footer
align-items: flex-start
.um-member-card-footer-buttons
flex-wrap: wrap
width: calc( 100% - 120px )
margin: 0 10px 0 0
.um-members-list-footer-button-wrapper
margin: 0 10px 5px 0
&.no-reveal:not(.no-photo)
.um-member-card-footer-buttons
width: calc( 100% - 100px )
&.uimob960
.um-member-directory-header
.um-search
grid-template-columns: repeat(2, 1fr)
.um-members-wrapper
.um-members
&.um-members-grid
.um-gutter-sizer
width: 4%
.um-member
width: 48%
.select2-container .select2-results li.select2-results__option[aria-disabled=true]
display: none