diff options
Diffstat (limited to 'src/scss/compatibility/_social-buttons.scss')
| -rw-r--r-- | src/scss/compatibility/_social-buttons.scss | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/src/scss/compatibility/_social-buttons.scss b/src/scss/compatibility/_social-buttons.scss new file mode 100644 index 0000000..6acb4c5 --- /dev/null +++ b/src/scss/compatibility/_social-buttons.scss @@ -0,0 +1,129 @@ +@function calculateRem($target, $context: 16px) { + @return ($target / $context) * 1rem; +} + +$line-height-computed: floor(($font-size-base * $line-height-base)); +$padding-base-vertical: calculateRem(6px, 14px) !default; +$padding-large-vertical: calculateRem(10px, 14px) !default; +$padding-small-vertical: calculateRem(5px, 14px) !default; +$padding-base-horizontal: calculateRem(12px, 14px) !default; +$padding-large-horizontal: calculateRem(16px, 14px) !default; +$padding-small-horizontal: calculateRem(10px, 14px) !default; +$font-size-large: ceil(($font-size-base * 1.25)) !default; +$font-size-small: ceil(($font-size-base * .85)) !default; + +/* + * Social Buttons for Bootstrap + * + * Copyright 2013-2016 Panayiotis Lipiridis + * Licensed under the MIT License + * + * https://github.com/lipis/bootstrap-social + */ + +$bs-height-base: ($line-height-computed + $padding-base-vertical * 2) !default; +$bs-height-lg: (floor($font-size-large * $line-height-base) + $padding-large-vertical * 2) !default; +$bs-height-sm: (floor($font-size-small * 1.5) + $padding-small-vertical * 2) !default; +$bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1) !default; + +.btn-social { + position: relative; + padding-left: ($bs-height-base + $padding-base-horizontal); + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + > :first-child { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: $bs-height-base; + line-height: ($bs-height-base + 2); + font-size: 1.6em; + text-align: center; + border-right: 1px solid rgba(0, 0, 0, 0.2); + } + &.btn-lg { + padding-left: ($bs-height-lg + $padding-large-horizontal); + > :first-child { + line-height: $bs-height-lg; + width: $bs-height-lg; + font-size: 1.8em; + } + } + &.btn-sm { + padding-left: ($bs-height-sm + $padding-small-horizontal); + > :first-child { + line-height: $bs-height-sm; + width: $bs-height-sm; + font-size: 1.4em; + } + } + &.btn-xs { + padding-left: ($bs-height-xs + $padding-small-horizontal); + > :first-child { + line-height: $bs-height-xs; + width: $bs-height-xs; + font-size: 1.2em; + } + } +} + +.btn-social-icon { + @extend .btn-social; + height: ($bs-height-base + 2); + width: ($bs-height-base + 2); + padding: 0; + > :first-child { + border: none; + text-align: center; + width: 100%!important; + } + &.btn-lg { + height: $bs-height-lg; + width: $bs-height-lg; + padding-left: 0; + padding-right: 0; + } + &.btn-sm { + height: ($bs-height-sm + 2); + width: ($bs-height-sm + 2); + padding-left: 0; + padding-right: 0; + } + &.btn-xs { + height: ($bs-height-xs + 2); + width: ($bs-height-xs + 2); + padding-left: 0; + padding-right: 0; + } +} + +@mixin btn-social($color-bg, $color: #fff) { + background-color: $color-bg; + @include button-variant($color, $color-bg, rgba(0,0,0,.2)); +} + + +.btn-adn { @include btn-social(#d87a68); } +.btn-bitbucket { @include btn-social(#205081); } +.btn-dropbox { @include btn-social(#1087dd); } +.btn-facebook { @include btn-social(#3b5998); } +.btn-flickr { @include btn-social(#ff0084); } +.btn-foursquare { @include btn-social(#f94877); } +.btn-github { @include btn-social(#444444); } +.btn-google { @include btn-social(#dd4b39); } +.btn-instagram { @include btn-social(#3f729b); } +.btn-linkedin { @include btn-social(#007bb6); } +.btn-microsoft { @include btn-social(#2672ec); } +.btn-odnoklassniki { @include btn-social(#f4731c); } +.btn-openid { @include btn-social(#f7931e); } +.btn-pinterest { @include btn-social(#cb2027); } +.btn-reddit { @include btn-social(#eff7ff, #000); } +.btn-soundcloud { @include btn-social(#ff5500); } +.btn-tumblr { @include btn-social(#2c4762); } +.btn-twitter { @include btn-social(#55acee); } +.btn-vimeo { @include btn-social(#1ab7ea); } +.btn-vk { @include btn-social(#587ea3); } +.btn-yahoo { @include btn-social(#720e9e); }
\ No newline at end of file |