core/buttons/buttons.scss

0001 //Buttons
0002
0003 .btn-circle {
0004     border-radius: 100%;
0005     width: 40px;
0006     height: 40px;
0007     padding: 10px;
0008     &.btn-sm {
0009         width: 35px;
0010         height: 35px;
0011         padding: 8px 10px;
0012         font-size: 14px;
0013     }
0014     &.btn-lg {
0015         width: 50px;
0016         height: 50px;
0017         padding: 14px 15px;
0018         font-size: 18px;
0019         line-height: 23px;
0020     }
0021     &.btn-xl {
0022         width: 70px;
0023         height: 70px;
0024         padding: 14px 15px;
0025         font-size: 24px;
0026     }
0027
0028 }
0029
0030 .btn-xs {
0031     padding: .25rem .5rem;
0032     font-size: 10px;
0033 }
0034
0035 .btn-rounded {
0036     border-radius: 60px;
0037     padding: 7px 18px;
0038
0039     &.btn-lg {
0040         padding: .75rem 1.5rem;
0041     }
0042     &.btn-sm {
0043         padding: .25rem .5rem;
0044         font-size: 12px;
0045     }
0046     &.btn-xs {
0047         padding: .25rem .5rem;
0048         font-size: 10px;
0049     }
0050     &.btn-md {
0051         padding: 12px 35px;
0052         font-size: 16px;
0053     }
0054 }
0055
0056
0057 .btn-primary, .btn-default, .btn-warning, .btn-outline-primary:hover, .btn-outline-warning:hover{
0058   color: $white;
0059     &:hover{
0060         color: $white;
0061     }
0062 }
0063 .btn-default{
0064     background-color:$gray-300;
0065     background: $gray-300;
0066     border: 1px solid $gray-300;
0067     &.btn-outline {
0068         color: #333;
0069         background-color: $white;
0070         &:hover {
0071             background: $gray-300;
0072             opacity: 0.8;
0073         }
0074     }
0075 }
0076
0077
0078 .btn-facebook {
0079     color: $white;
0080     background-color: #3b5998;
0081     &:hover{
0082          color: $white;
0083     }
0084 }
0085
0086 .btn-twitter {
0087     color: $white;
0088     background-color: #55acee;
0089     &:hover{
0090          color: $white;
0091     }
0092 }
0093
0094 .btn-linkedin {
0095     color: $white;
0096     background-color: #007bb6;
0097     &:hover{
0098          color: $white;
0099     }
0100 }
0101
0102 .btn-dribbble {
0103     color: $white;
0104     background-color: #ea4c89;
0105     &:hover{
0106          color: $white;
0107     }
0108 }
0109
0110 .btn-googleplus {
0111     color: $white;
0112     background-color: #dd4b39;
0113     &:hover{
0114          color: $white;
0115     }
0116 }
0117
0118 .btn-instagram {
0119     color: $white;
0120     background-color: #3f729b;
0121 }
0122
0123 .btn-pinterest {
0124     color: $white;
0125     background-color: #cb2027;
0126 }
0127
0128 .btn-dropbox {
0129     color: $white;
0130     background-color: #007ee5;
0131 }
0132
0133 .btn-flickr {
0134     color: $white;
0135     background-color: #ff0084;
0136 }
0137
0138 .btn-tumblr {
0139     color: $white;
0140     background-color: #32506d;
0141 }
0142
0143 .btn-skype {
0144     color: $white;
0145     background-color: #00aff0;
0146 }
0147
0148 .btn-youtube {
0149     color: $white;
0150     background-color: #bb0000;
0151 }
0152
0153 .btn-github {
0154     color: $white;
0155     background-color: #171515;
0156 }
0157
0158 .button-group {
0159     .btn {
0160         margin-bottom: 5px;
0161         margin-right: 5px;
0162     }
0163 }.no-button-group .btn {
0164     margin-bottom: 5px;
0165     margin-right: 0px;
0166 }
0167
0168 .btn .text-active {
0169   display: none; }
0170
0171 .btn.active .text-active {
0172   display: inline-block; }
0173
0174 .btn.active .text {
0175   display: none; }