git.roojs.org Git - bootswatch/blob - AdminLTE-master/less/bootstrap-social.less

   1 /*
   2  * Social Buttons for Bootstrap
   3  *
   4  * Copyright 2013-2014 Panayiotis Lipiridis
   5  * Licensed under the MIT License
   6  *
   7  * https://github.com/lipis/bootstrap-social
   8  *
   9  * Note: this file has been altered to work correctly with AdminLTE
  10  */
  11 @font-size-base:          14px;
  12 //** Unit-less `line-height` for use in components like buttons.
  13 @line-height-base:        20/14; // 20/14
  14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
  15 @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
  16
  17 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
  18 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
  19
  20 @padding-base-vertical:     6px;
  21 @padding-base-horizontal:   12px;
  22
  23 @padding-large-vertical:    10px;
  24 @padding-large-horizontal:  15px;
  25
  26 @padding-small-vertical:    5px;
  27 @padding-small-horizontal:  10px;
  28
  29 @bs-height-base: (@line-height-computed + @padding-base-vertical * 2);
  30 @bs-height-lg:   (floor(@font-size-large * @line-height-base) + @padding-large-vertical * 2);
  31 @bs-height-sm:   (floor(@font-size-small * 1.5) + @padding-small-vertical * 2);
  32 @bs-height-xs:   (floor(@font-size-small * 1.2) + @padding-small-vertical + 1);
  33
  34 .btn-social {
  35   position: relative;
  36   padding-left: @bs-height-base + @padding-base-horizontal!important;
  37   text-align: left;
  38   white-space: nowrap;
  39   overflow: hidden;
  40   text-overflow: ellipsis;
  41   :first-child {
  42     position: absolute;
  43     left: 0;
  44     top: 0;
  45     bottom: 0;
  46     width: @bs-height-base!important;
  47     line-height: (@bs-height-base + 2)!important;
  48     font-size: 1.6em!important;
  49     text-align: center;
  50     border-right: 1px solid rgba(0, 0, 0, 0.2);
  51   }
  52   &.btn-lg {
  53     padding-left: @bs-height-lg + @padding-large-horizontal!important;
  54     :first-child {
  55       line-height: @bs-height-lg;
  56       width: @bs-height-lg;
  57       font-size: 1.8em;
  58     }
  59   }
  60   &.btn-sm {
  61     padding-left: @bs-height-sm + @padding-small-horizontal!important;
  62     :first-child {
  63       line-height: @bs-height-sm;
  64       width: @bs-height-sm;
  65       font-size: 1.4em;
  66     }
  67   }
  68   &.btn-xs {
  69     padding-left: @bs-height-xs + @padding-small-horizontal!important;
  70     :first-child {
  71       line-height: @bs-height-xs;
  72       width: @bs-height-xs;
  73       font-size: 1.2em;
  74     }
  75   }
  76 }
  77
  78 .btn-social-icon {
  79   .btn-social;
  80   height: (@bs-height-base + 2);
  81   width: (@bs-height-base + 2);
  82   padding: 0;
  83   :first-child {
  84     border: none;
  85     text-align: center;
  86     width: 100%!important;
  87   }
  88   &.btn-lg {
  89     height: @bs-height-lg;
  90     width: @bs-height-lg;
  91     padding-left: 0;
  92     padding-right: 0;
  93   }
  94   &.btn-sm {
  95     height: (@bs-height-sm + 2);
  96     width: (@bs-height-sm + 2);
  97     padding-left: 0;
  98     padding-right: 0;
  99   }
 100   &.btn-xs {
 101     height: (@bs-height-xs + 2);
 102     width: (@bs-height-xs + 2);
 103     padding-left: 0;
 104     padding-right: 0;
 105   }
 106 }
 107
 108 .btn-social(@color-bg, @color: white) {
 109   background-color: @color-bg;
 110   .button-variant(@color, @color-bg, rgba(0, 0, 0, 0.2));
 111 }
 112
 113
 114 .btn-bitbucket     { .btn-social(#205081); }
 115 .btn-dropbox       { .btn-social(#1087dd); }
 116 .btn-facebook      { .btn-social(#3b5998); }
 117 .btn-flickr        { .btn-social(#ff0084); }
 118 .btn-foursquare    { .btn-social(#0072b1); }
 119 .btn-github        { .btn-social(#444444); }
 120 .btn-google-plus   { .btn-social(#dd4b39); }
 121 .btn-instagram     { .btn-social(#3f729b); }
 122 .btn-linkedin      { .btn-social(#007bb6); }
 123 .btn-tumblr        { .btn-social(#2c4762); }
 124 .btn-twitter       { .btn-social(#55acee); }
 125 .btn-vk            { .btn-social(#587ea3); }
 126
 127 // Button variants
 128 // -------------------------
 129 // Easily pump out default styles, as well as :hover, :focus, :active,
 130 // and disabled options for all buttons
 131 .button-variant(@color; @background; @border) {
 132   color: @color;
 133   background-color: @background;
 134   border-color: @border;
 135
 136   &:hover,
 137   &:focus,
 138   &:active,
 139   &.active,
 140   .open .dropdown-toggle& {
 141     color: @color;
 142     background-color: darken(@background, 8%);
 143         border-color: darken(@border, 12%);
 144   }
 145   &:active,
 146   &.active,
 147   .open .dropdown-toggle& {
 148     background-image: none;
 149   }
 150   &.disabled,
 151   &[disabled],
 152   fieldset[disabled] & {
 153     &,
 154     &:hover,
 155     &:focus,
 156     &:active,
 157     &.active {
 158       background-color: @background;
 159           border-color: @border;
 160     }
 161   }
 162
 163   .badge {
 164     color: @background;
 165     background-color: @color;
 166   }
 167 }