@posiwise/shared-components 0.0.10 → 0.0.12

package/assets/scss/dashboard/_bootstrap-social.scss

@@ -0,0 +1,641 @@
+@import '../dashboard/mixins/buttons';
+
+$bs-height-base: ($line-height-computed + $padding-base-vertical * 2) !default;
+$bs-height-lg: (floor($font-size-lg * $line-height-base) + $padding-large-vertical * 2) !default;
+$bs-height-sm: (floor($font-size-sm * 1.5) + $padding-small-vertical * 2) !default;
+$bs-height-xs: (floor($font-size-sm * 1.2) + $padding-small-vertical + 1) !default;
+
+.btn-social {
+    color: rgb(255 255 255);
+    overflow: hidden;
+    padding-left: ($bs-height-base + $padding-base-horizontal);
+    position: relative;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    > :first-child {
+        border-right: 1px solid rgb(0 0 0 / 20%);
+        bottom: 0;
+        font-size: 1.6em;
+        left: 0;
+        line-height: ($bs-height-base + 0.2);
+        position: absolute;
+        text-align: center;
+        top: 0;
+        width: $bs-height-base;
+    }
+
+    &.btn-lg {
+        padding-left: ($bs-height-lg + $padding-large-horizontal);
+
+        > :first-child {
+            font-size: 1.8em;
+            line-height: $bs-height-lg;
+            width: $bs-height-lg;
+        }
+    }
+
+    &.btn-sm {
+        padding-left: ($bs-height-sm + $padding-small-horizontal);
+
+        > :first-child {
+            font-size: 1.4em;
+            line-height: $bs-height-sm;
+            width: $bs-height-sm;
+        }
+    }
+
+    &.btn-xs {
+        padding-left: ($bs-height-xs + $padding-small-horizontal);
+
+        > :first-child {
+            font-size: 1.2em;
+            line-height: $bs-height-xs;
+            width: $bs-height-xs;
+        }
+    }
+}
+
+.btn-social-icon {
+    @extend .btn-social;
+
+    height: ($bs-height-base + 0.25);
+    padding: 0;
+    width: ($bs-height-base + 0.25);
+
+    > :first-child {
+        border: 0;
+        text-align: center;
+        width: 100% !important;
+    }
+
+    &.btn-lg {
+        height: $bs-height-lg;
+        padding-left: 0;
+        padding-right: 0;
+        width: $bs-height-lg;
+    }
+
+    &.btn-sm {
+        height: ($bs-height-sm + 2);
+        padding-left: 0;
+        padding-right: 0;
+        width: ($bs-height-sm + 2);
+    }
+
+    &.btn-xs {
+        height: ($bs-height-xs + 2);
+        padding-left: 0;
+        padding-right: 0;
+        width: ($bs-height-xs + 2);
+    }
+}
+
+// Social button Mixin
+@mixin btn-social($color-bg, $color: #fff) {
+    @include button-variant($color, $color-bg, rgba(0, 0, 0, 0.2));
+
+    background-color: $color-bg;
+}
+
+@mixin btn-social-flat($color) {
+    background-color: transparent !important;
+    border: 0 !important;
+    color: $color !important;
+
+    span {
+        border: 0 !important;
+    }
+
+    &:hover {
+        background-color: transparent !important;
+        color: darken($color, 25%) !important;
+    }
+}
+
+// Social Outline Button Mixin
+@mixin btn-social-outline($color-bg) {
+    border: 1px solid $color-bg !important;
+    color: $color-bg !important;
+}
+
+// Social Outline Button Hover Mixin
+@mixin btn-hover-outline($color-bg) {
+    background-color: transparent !important;
+    border: 1px solid darken($color-bg, 20%) !important;
+    color: darken($color-bg, 20%);
+}
+
+// Flat Social Button Hover Mixin
+@mixin btn-social-flat-active($color-bg) {
+    background-color: transparent !important;
+}
+
+.btn-adn {
+    @include btn-social($btn-adn);
+}
+
+.btn-bitbucket {
+    @include btn-social($bitbucket);
+}
+
+.btn-dropbox {
+    @include btn-social($dropBox);
+}
+
+.btn-facebook {
+    @include btn-social($social-facebook);
+}
+
+.btn-flickr {
+    @include btn-social($flicker);
+}
+
+.btn-foursquare {
+    @include btn-social($fourSquare);
+}
+
+.btn-github {
+    @include btn-social($github);
+}
+
+.btn-google {
+    @include btn-social($social-google);
+}
+
+.btn-instagram {
+    @include btn-social($instaGram);
+}
+
+.btn-linkedin {
+    @include btn-social($linkedIn);
+}
+
+.btn-microsoft {
+    @include btn-social($micrSoft);
+}
+
+.btn-odnoklassniki {
+    @include btn-social($odnoklassniki);
+}
+
+.btn-openid {
+    @include btn-social($openId);
+}
+
+.btn-pinterest {
+    @include btn-social($pinterest);
+}
+
+.btn-reddit {
+    @include btn-social($reddit, #000);
+}
+
+.btn-soundcloud {
+    @include btn-social($soundColoud);
+}
+
+.btn-tumblr {
+    @include btn-social($tumblr);
+}
+
+.btn-twitter {
+    @include btn-social($social-twitter);
+}
+
+.btn-vimeo {
+    @include btn-social($vimeo);
+}
+
+.btn-vk {
+    @include btn-social($vkFlat);
+}
+
+.btn-yahoo {
+    @include btn-social($yahoo);
+}
+
+// Social Outline button
+.btn-outline-adn {
+    @include btn-social-outline($btn-adn);
+}
+
+.btn-outline-bitbucket {
+    @include btn-social-outline($bitbucket);
+}
+
+.btn-outline-dropbox {
+    @include btn-social-outline($dropBox);
+}
+
+.btn-outline-facebook {
+    @include btn-social-outline($social-facebook);
+}
+
+.btn-outline-flickr {
+    @include btn-social-outline($flicker);
+}
+
+.btn-outline-foursquare {
+    @include btn-social-outline($fourSquare);
+}
+
+.btn-outline-github {
+    @include btn-social-outline($github);
+}
+
+.btn-outline-google {
+    @include btn-social-outline($social-google);
+}
+
+.btn-outline-instagram {
+    @include btn-social-outline($instaGram);
+}
+
+.btn-outline-linkedin {
+    @include btn-social-outline($linkedIn);
+}
+
+.btn-outline-microsoft {
+    @include btn-social-outline($micrSoft);
+}
+
+.btn-outline-odnoklassniki {
+    @include btn-social-outline($odnoklassniki);
+}
+
+.btn-outline-openid {
+    @include btn-social-outline($openId);
+}
+
+.btn-outline-pinterest {
+    @include btn-social-outline($pinterest);
+}
+
+.btn-outline-reddit {
+    @include btn-social-outline($social-reddit);
+}
+
+.btn-outline-soundcloud {
+    @include btn-social-outline($soundColoud);
+}
+
+.btn-outline-tumblr {
+    @include btn-social-outline($tumblr);
+}
+
+.btn-outline-twitter {
+    @include btn-social-outline($social-twitter);
+}
+
+.btn-outline-vimeo {
+    @include btn-social-outline($vimeo);
+}
+
+.btn-outline-vk {
+    @include btn-social-outline($vkFlat);
+}
+
+.btn-outline-yahoo {
+    @include btn-social-outline($yahoo);
+}
+
+// Social Outline hover button
+.btn-outline-adn:hover {
+    @include btn-hover-outline($btn-adn);
+}
+
+.btn-outline-bitbucket:hover {
+    @include btn-hover-outline($bitbucket);
+}
+
+.btn-outline-dropbox:hover {
+    @include btn-hover-outline($dropBox);
+}
+
+.btn-outline-facebook:hover {
+    @include btn-hover-outline($social-facebook);
+}
+
+.btn-outline-flickr:hover {
+    @include btn-hover-outline($flicker);
+}
+
+.btn-outline-foursquare:hover {
+    @include btn-hover-outline($fourSquare);
+}
+
+.btn-outline-github:hover {
+    @include btn-hover-outline($github);
+}
+
+.btn-outline-google:hover {
+    @include btn-hover-outline($social-google);
+}
+
+.btn-outline-instagram:hover {
+    @include btn-hover-outline($instaGram);
+}
+
+.btn-outline-linkedin:hover {
+    @include btn-hover-outline($linkedIn);
+}
+
+.btn-outline-microsoft:hover {
+    @include btn-hover-outline($micrSoft);
+}
+
+.btn-outline-odnoklassniki:hover {
+    @include btn-hover-outline($odnoklassniki);
+}
+
+.btn-outline-openid:hover {
+    @include btn-hover-outline($openId);
+}
+
+.btn-outline-pinterest:hover {
+    @include btn-hover-outline($pinterest);
+}
+
+.btn-outline-reddit:hover {
+    @include btn-hover-outline($social-reddit);
+}
+
+.btn-outline-soundcloud:hover {
+    @include btn-hover-outline($soundColoud);
+}
+
+.btn-outline-tumblr:hover {
+    @include btn-hover-outline($tumblr);
+}
+
+.btn-outline-twitter:hover {
+    @include btn-hover-outline($social-twitter);
+}
+
+.btn-outline-vimeo:hover {
+    @include btn-hover-outline($vimeo);
+}
+
+.btn-outline-vk:hover {
+    @include btn-hover-outline($vkFlat);
+}
+
+.btn-outline-yahoo:hover {
+    @include btn-hover-outline($yahoo);
+}
+
+// Flat Buttons
+.btn-adn-flat {
+    @include btn-social-flat($btn-adn);
+}
+
+.btn-bitbucket-flat {
+    @include btn-social-flat($bitbucket);
+}
+
+.btn-dropbox-flat {
+    @include btn-social-flat($dropBox);
+}
+
+.btn-facebook-flat {
+    @include btn-social-flat($social-facebook);
+}
+
+.btn-flickr-flat {
+    @include btn-social-flat($flicker);
+}
+
+.btn-foursquare-flat {
+    @include btn-social-flat($fourSquare);
+}
+
+.btn-github-flat {
+    @include btn-social-flat($github);
+}
+
+.btn-google-flat {
+    @include btn-social-flat($social-google);
+}
+
+.btn-instagram-flat {
+    @include btn-social-flat($instaGram);
+}
+
+.btn-linkedin-flat {
+    @include btn-social-flat($linkedIn);
+}
+
+.btn-microsoft-flat {
+    @include btn-social-flat($micrSoft);
+}
+
+.btn-odnoklassniki-flat {
+    @include btn-social-flat($odnoklassniki);
+}
+
+.btn-openid-flat {
+    @include btn-social-flat($openId);
+}
+
+.btn-pinterest-flat {
+    @include btn-social-flat($pinterest);
+}
+
+.btn-reddit-flat {
+    @include btn-social-flat($social-reddit);
+}
+
+.btn-soundcloud-flat {
+    @include btn-social-flat($soundColoud);
+}
+
+.btn-tumblr-flat {
+    @include btn-social-flat($tumblr);
+}
+
+.btn-twitter-flat {
+    @include btn-social-flat($social-twitter);
+}
+
+.btn-vimeo-flat {
+    @include btn-social-flat($vimeo);
+}
+
+.btn-vk-flat {
+    @include btn-social-flat($vkFlat);
+}
+
+.btn-yahoo-flat {
+    @include btn-social-flat($yahoo);
+}
+
+// Flat Buttons with .active , On active, on focus, on active and focus, on active and hover
+.btn-adn-flat.active,
+.btn-adn-flat:active,
+.btn-adn-flat:focus,
+.btn-adn-flat:active:focus,
+.btn-adn-flat:active:hover {
+    @include btn-social-flat-active($btn-adn);
+}
+
+.btn-bitbucket-flat.active,
+.btn-bitbucket-flat:active,
+.btn-bitbucket-flat:focus,
+.btn-bitbucket-flat:active:focus,
+.btn-bitbucket-flat:active:hover {
+    @include btn-social-flat-active($bitbucket);
+}
+
+.btn-dropbox-flat.active,
+.btn-dropbox-flat:active,
+.btn-dropbox-flat:focus,
+.btn-dropbox-flat:active:focus,
+.btn-dropbox-flat:active:hover {
+    @include btn-social-flat-active($dropBox);
+}
+
+.btn-facebook-flat.active,
+.btn-facebook-flat:active,
+.btn-facebook-flat:focus,
+.btn-facebook-flat:active:focus,
+.btn-facebook-flat:active:hover {
+    @include btn-social-flat-active($social-facebook);
+}
+
+.btn-flickr-flat.active,
+.btn-flickr-flat:active,
+.btn-flickr-flat:focus,
+.btn-flickr-flat:active:focus,
+.btn-flickr-flat:active:hover {
+    @include btn-social-flat-active($flicker);
+}
+
+.btn-foursquare-flat.active,
+.btn-foursquare-flat:active,
+.btn-foursquare-flat:focus,
+.btn-foursquare-flat:active:focus,
+.btn-foursquare-flat:active:hover {
+    @include btn-social-flat-active($fourSquare);
+}
+
+.btn-github-flat.active,
+.btn-github-flat:active,
+.btn-github-flat:focus,
+.btn-github-flat:active:focus,
+.btn-github-flat:active:hover {
+    @include btn-social-flat-active($github);
+}
+
+.btn-google-flat.active,
+.btn-google-flat:active,
+.btn-google-flat:focus,
+.btn-google-flat:active:focus,
+.btn-google-flat:active:hover {
+    @include btn-social-flat-active($social-google);
+}
+
+.btn-instagram-flat.active,
+.btn-instagram-flat:active,
+.btn-instagram-flat:focus,
+.btn-instagram-flat:active:focus,
+.btn-instagram-flat:active:hover {
+    @include btn-social-flat-active($instaGram);
+}
+
+.btn-linkedin-flat.active,
+.btn-linkedin-flat:active,
+.btn-linkedin-flat:focus,
+.btn-linkedin-flat:active:focus,
+.btn-linkedin-flat:active:hover {
+    @include btn-social-flat-active($linkedIn);
+}
+
+.btn-microsoft-flat.active,
+.btn-microsoft-flat:active,
+.btn-microsoft-flat:focus,
+.btn-microsoft-flat:active:focus,
+.btn-microsoft-flat:active:hover {
+    @include btn-social-flat-active($micrSoft);
+}
+
+.btn-odnoklassniki-flat.active,
+.btn-odnoklassniki-flat:active,
+.btn-odnoklassniki-flat:focus,
+.btn-odnoklassniki-flat:active:focus,
+.btn-odnoklassniki-flat:active:hover {
+    @include btn-social-flat-active($odnoklassniki);
+}
+
+.btn-openid-flat.active,
+.btn-openid-flat:active,
+.btn-openid-flat:focus,
+.btn-openid-flat:active:focus,
+.btn-openid-flat:active:hover {
+    @include btn-social-flat-active($openId);
+}
+
+.btn-pinterest-flat.active,
+.btn-pinterest-flat:active,
+.btn-pinterest-flat:focus,
+.btn-pinterest-flat:active:focus,
+.btn-pinterest-flat:active:hover {
+    @include btn-social-flat-active($pinterest);
+}
+
+.btn-reddit-flat.active,
+.btn-reddit-flat:active,
+.btn-reddit-flat:focus,
+.btn-reddit-flat:active:focus,
+.btn-reddit-flat:active:hover {
+    @include btn-social-flat-active($social-reddit);
+}
+
+.btn-soundcloud-flat.active,
+.btn-soundcloud-flat:active,
+.btn-soundcloud-flat:focus,
+.btn-soundcloud-flat:active:focus,
+.btn-soundcloud-flat:active:hover {
+    @include btn-social-flat-active($soundColoud);
+}
+
+.btn-tumblr-flat.active,
+.btn-tumblr-flat:active,
+.btn-tumblr-flat:focus,
+.btn-tumblr-flat:active:focus,
+.btn-tumblr-flat:active:hover {
+    @include btn-social-flat-active($tumblr);
+}
+
+.btn-twitter-flat.active,
+.btn-twitter-flat:active,
+.btn-twitter-flat:focus,
+.btn-twitter-flat:active:focus,
+.btn-twitter-flat:active:hover {
+    @include btn-social-flat-active($social-twitter);
+}
+
+.btn-vimeo-flat.active,
+.btn-vimeo-flat:active,
+.btn-vimeo-flat:focus,
+.btn-vimeo-flat:active:focus,
+.btn-vimeo-flat:active:hover {
+    @include btn-social-flat-active($vimeo);
+}
+
+.btn-vk-flat.active,
+.btn-vk-flat:active,
+.btn-vk-flat:focus,
+.btn-vk-flat:active:focus,
+.btn-vk-flat:active:hover {
+    @include btn-social-flat-active($vkFlat);
+}
+
+.btn-yahoo-flat.active,
+.btn-yahoo-flat:active,
+.btn-yahoo-flat:focus,
+.btn-yahoo-flat:active:focus,
+.btn-yahoo-flat:active:hover {
+    @include btn-social-flat-active($yahoo);
+}