Created
June 22, 2015 20:55
-
-
Save eboyer/bcec0a0923d9decc73da to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sprout-account-picker { | |
| position: relative; | |
| z-index: 5; | |
| display: block; | |
| width: 100%; | |
| min-height: 40px; | |
| color: $gray40; | |
| background-color: $gray90; | |
| border: 0; | |
| border-bottom: 1px solid $gray70; | |
| cursor: pointer; | |
| user-select: none; | |
| &.is-focused, | |
| &.is-focused .sprout-account-picker-multi-items { | |
| background-color: $gray83; | |
| } | |
| &.is-disabled { | |
| cursor: default; | |
| .sprout-account-picker-button-arrow { | |
| display: none; | |
| } | |
| } | |
| &-el { | |
| position: absolute; | |
| visibility: hidden; | |
| } | |
| &-button { | |
| width: 567px; | |
| overflow: hidden; | |
| &-arrow { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| width: 12px; | |
| height: 12px; | |
| text-align: center; | |
| transition: 1s cubic-bezier(.2, 1, .2, 1); | |
| fill: $gray40; | |
| pointer-events: none; | |
| } | |
| } | |
| &.is-open { | |
| .sprout-account-picker-button { | |
| &-arrow { | |
| transform: rotateX(180deg); | |
| } | |
| } | |
| } | |
| &-avatar { | |
| display: inline-block; | |
| width: 48px; | |
| height: 48px; | |
| margin-right: 10px; | |
| &-single { | |
| display: inline-block; | |
| width: 40px; | |
| height: 40px; | |
| padding-bottom: 1px; //compensates for border | |
| margin-right: 10px; | |
| vertical-align: top !important; //specificity hack for transitional reset | |
| pointer-events: none; | |
| } | |
| } | |
| &-label { | |
| display: inline-block; | |
| padding: 8px 0 0; | |
| font-size: 14px; | |
| font-weight: 600; | |
| line-height: 1; | |
| vertical-align: top; | |
| &-plus { | |
| position: relative; | |
| display: inline-block; | |
| padding: 4px 5px; | |
| margin-top: 10px; | |
| margin-left: 5px; | |
| font-size: 12px; | |
| color: $gray50; | |
| vertical-align: top; | |
| cursor: pointer; | |
| pointer-events: none; | |
| &:hover { | |
| color: $gray70; | |
| } | |
| } | |
| &._selected { | |
| width: auto; | |
| max-width: 180px; | |
| padding: 15px 0 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| &-single { | |
| display: inline-block; | |
| padding: 15px 0 0; | |
| overflow: hidden; | |
| font-size: 14px; | |
| font-weight: 600; | |
| line-height: 1; | |
| vertical-align: top; | |
| pointer-events: none; | |
| } | |
| &-screenanme { | |
| display: inline-block; | |
| padding: 0 0; | |
| padding: 15px 0 0; | |
| padding-left: 5px; | |
| font-size: 14px; | |
| line-height: 1; | |
| color: $gray60; | |
| vertical-align: top; | |
| pointer-events: none; | |
| } | |
| &-avatar { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| margin: 13px 5px 0 0; | |
| pointer-events: none; | |
| &._twitter { | |
| fill: $twitter; | |
| } | |
| &._facebook { | |
| fill: $facebook; | |
| } | |
| &._linkedin { | |
| fill: $linkedin; | |
| } | |
| &._gplus { | |
| fill: $gplus; | |
| } | |
| } | |
| } | |
| &-phantom { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| display: inline-block; | |
| visibility: hidden; | |
| } | |
| &-multi { | |
| position: relative; | |
| display: inline-block; | |
| padding: 3px 5px; | |
| margin-bottom: 5px; | |
| margin-left: 5px; | |
| font-size: 12px; | |
| color: $gray50; | |
| background-color: $gray97; | |
| border: 1px solid $gray70; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| &-items { | |
| display: inline-block; | |
| max-width: 450px; | |
| max-height: 40px; | |
| margin-top: 9px; | |
| overflow: hidden; | |
| //Magic numbers due to borders | |
| &.is-expanded { | |
| display: block; | |
| width: 568px; | |
| max-width: none; | |
| max-height: 84px; | |
| min-height: 31px; | |
| padding-right: 45px; | |
| padding-bottom: 2px; | |
| overflow-y: auto; | |
| background-color: $gray90; | |
| border-top: 0; | |
| border-bottom: 0; | |
| box-shadow: 0 -1px 0 $gray70 inset; //hack for overflow issue | |
| } | |
| } | |
| &-icon { | |
| display: inline-block; | |
| width: 13px; | |
| height: 13px; | |
| margin-right: 5px; | |
| vertical-align: sub; | |
| &._twitter { | |
| fill: $twitter; | |
| } | |
| &._facebook { | |
| fill: $facebook; | |
| } | |
| &._gplus { | |
| fill: $gplus; | |
| } | |
| &._linkedin, | |
| &._linkedin_company { | |
| fill: $linkedin; | |
| } | |
| } | |
| &:hover { | |
| color: $white; | |
| &:before { | |
| position: absolute; | |
| top: 0; | |
| left: 8px; | |
| font-size: 18px; | |
| color: $white; | |
| content: "×"; | |
| } | |
| .sprout-account-picker-multi-icon { | |
| visibility: hidden; | |
| } | |
| } | |
| &._twitter:hover { | |
| background-color: $twitter; | |
| border-color: $twitter-dark; | |
| } | |
| &._facebook:hover { | |
| background-color: $facebook; | |
| border-color: $facebook-dark; | |
| } | |
| &._gplus:hover { | |
| background-color: $gplus; | |
| border-color: $google-dark; | |
| } | |
| &._linkedin:hover, | |
| &._linkedin_company:hover { | |
| background-color: $linkedin; | |
| border-color: $linkedin-dark; | |
| } | |
| } | |
| &-flyout { | |
| position: relative; | |
| z-index: 4; | |
| display: none; | |
| width: 568px; | |
| overflow: hidden; | |
| background: $gray97; | |
| border: 1px solid transparent; | |
| border-top: 0; | |
| border-radius: 0 0 5px 5px; | |
| box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .25); | |
| user-select: none; | |
| } | |
| .sprout-account-picker-flyout-search-icon { | |
| position: absolute; | |
| top: 20px; | |
| left: 17px; | |
| width: 20px; | |
| height: 20px; | |
| fill: $gray50; | |
| } | |
| .sprout-account-picker-flyout-search { | |
| position: relative; | |
| &.has-select-all { | |
| float: left; | |
| .sprout-account-picker-flyout-search-field { | |
| width: 395px; | |
| } | |
| } | |
| } | |
| .sprout-account-picker-flyout-search-field { | |
| display: block; | |
| float: left; | |
| width: 545px; | |
| padding: 10px 10px 10px 30px; | |
| margin: 10px; | |
| font-size: 14px; | |
| border: 1px solid $gray80; | |
| border-radius: 0; | |
| outline: none; | |
| cursor: text; | |
| -webkit-appearance: textfield; | |
| } | |
| .sprout-account-picker-flyout-search-field::-ms-clear { | |
| display: none; | |
| } | |
| .sprout-account-picker-flyout-search-field:focus { | |
| border-color: $green; | |
| } | |
| .sprout-account-picker-flyout-type-filters-label { | |
| float: left; | |
| padding-top: 7px; | |
| font-size: 12px; | |
| color: $gray60; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } | |
| .sprout-account-picker-flyout-type-filters-list { | |
| display: inline-block; | |
| float: right; | |
| label[for="sprout-ap-filter-twitter"] { | |
| margin-right: 15px; | |
| } | |
| } | |
| .sprout-account-picker-flyout-type-filters { | |
| padding: 10px; | |
| overflow: hidden; | |
| border-bottom: 1px solid $gray80; | |
| &.has-search { | |
| position: relative; | |
| top: 10px; | |
| width: 135px; | |
| border: 0; | |
| border-color: transparent; | |
| .sprout-account-picker-flyout-type-filters-label { | |
| display: none; | |
| } | |
| } | |
| } | |
| .sprout-account-picker-list { | |
| height: auto; | |
| max-height: 425px; | |
| padding: 10px 0 0; | |
| margin: 0; | |
| overflow: hidden; | |
| overflow-y: auto; | |
| clear: both; | |
| list-style-type: none; | |
| } | |
| .sprout-account-filter-item-name { | |
| @include ssiconsvg(); | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| margin-left: 5px; | |
| vertical-align: sub; | |
| } | |
| .sprout-account-picker-select-filter-item { | |
| float: left; | |
| } | |
| .sprout-account-picker-group-label { | |
| padding: 5px 10px; | |
| font-size: 12px; | |
| color: $gray60; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .sprout-account-picker-item { | |
| margin-bottom: 0; | |
| cursor: pointer; | |
| input[type="checkbox"] { | |
| position: absolute; | |
| display: block; | |
| visibility: hidden; | |
| } | |
| } | |
| .sprout-account-picker-item-link { | |
| display: block; | |
| padding: 5px 0 5px 10px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| &:hover { | |
| background-color: $white; | |
| } | |
| &.is-focused { | |
| background-color: $white; | |
| } | |
| &.is-disabled { | |
| .sprout-account-picker-avatar, | |
| .sprout-account-picker-item_name, | |
| .sprout-account-picker-item_profile-name { | |
| opacity: .3; | |
| } | |
| &:hover { | |
| background-color: transparent; | |
| } | |
| .error-icon { | |
| position: relative; | |
| left: 4px; | |
| z-index: 2; | |
| float: right; | |
| margin-top: -10px; | |
| font-size: 26px; | |
| color: $gray60; | |
| } | |
| } | |
| .follows-back-icon, | |
| .drafts-only-icon { | |
| position: relative; | |
| left: 0; | |
| z-index: 2; | |
| float: right; | |
| color: $gray80; | |
| } | |
| .follows-back-icon { | |
| margin-top: -5px; | |
| font-size: 26px; | |
| } | |
| .drafts-only-icon { | |
| margin-top: -12px; | |
| font-size: 22px; | |
| } | |
| } | |
| .sprout-account-picker-item-info { | |
| display: inline-block; | |
| width: 470px; | |
| overflow: hidden; | |
| vertical-align: top; | |
| .checkbox-visible { | |
| float: right; | |
| margin-top: -5px; | |
| } | |
| } | |
| .sprout-account-picker-item_name { | |
| @include truncate(); | |
| max-width: 455px; | |
| margin: 5px 0 0; | |
| font-size: 14px; | |
| color: $gray30; | |
| } | |
| .sprout-account-picker-item_profile-network { | |
| display: inline-block; | |
| float: left; | |
| width: 16px; | |
| height: 16px; | |
| margin-top: 5px; | |
| &.twitter-bird { | |
| fill: $twitter; | |
| } | |
| &.facebook-f { | |
| fill: $facebook; | |
| } | |
| &.gplus { | |
| fill: $gplus; | |
| } | |
| &.linkedin { | |
| fill: $linkedin; | |
| } | |
| } | |
| .sprout-account-picker-item_profile-network-name { | |
| @include truncate(); | |
| display: inline-block; | |
| max-width: 430px; | |
| margin-top: 5px; | |
| margin-left: 5px; | |
| font-size: 14px; | |
| color: $gray60; | |
| } | |
| /* div below the picker list that contains submit button, currently only used in reports */ | |
| .sprout-account-picker-actions-holder { | |
| padding: 10px 20px; | |
| border-top: 1px solid $gray80; | |
| } | |
| // "Compact" version of the profile picker to be used inline on pages | |
| &._compact { | |
| float: left; | |
| width: 400px; | |
| height: 40px; | |
| min-height: 40px; | |
| background-color: transparent; | |
| border: 0; | |
| box-shadow: none; | |
| &.is-open { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: auto; | |
| background: $gray97; | |
| box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .25); | |
| .sprout-account-picker-multi { | |
| border: 1px solid $gray70; | |
| } | |
| .sprout-account-picker-button { | |
| border-bottom: 1px solid $gray80; | |
| } | |
| .sprout-account-picker-label-plus { | |
| display: none; | |
| } | |
| .sprout-account-picker-flyout { | |
| display: block; | |
| } | |
| } | |
| .sprout-account-picker-button { | |
| width: 400px; | |
| } | |
| .sprout-account-picker-multi._disabled { | |
| margin-bottom: 10px; | |
| margin-left: 10px; | |
| border: 1px solid $gray90; | |
| &:hover { | |
| color: $gray50; | |
| background-color: $gray97; | |
| &::before { | |
| top: 0; | |
| left: 3px; | |
| font-size: 16px; | |
| } | |
| &._twitter:before { | |
| color: $twitter; | |
| content: "@"; | |
| } | |
| &._facebook:before { | |
| color: $facebook; | |
| content: "F"; | |
| } | |
| &._gplus:before { | |
| color: $gplus; | |
| content: "g"; | |
| } | |
| &._linkedin:before, | |
| &._linkedin_company:before { | |
| color: $linkedin; | |
| content: "I"; | |
| } | |
| } | |
| } | |
| .sprout-account-picker-multi-items { | |
| max-height: none; | |
| margin-top: 8px; | |
| } | |
| .sprout-account-picker-flyout { | |
| width: 400px; | |
| margin-left: 0; | |
| border: 0; | |
| box-shadow: none; | |
| } | |
| .sprout-account-picker-item-info { | |
| width: 310px; | |
| } | |
| .sprout-account-picker-flyout-search-field { | |
| width: 380px; | |
| } | |
| .sprout-account-picker-label-single, | |
| .sprout-account-picker-label-screenanme { | |
| padding-top: 12px; | |
| } | |
| .sprout-account-picker-label-plus { | |
| margin: 0; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment