{"action":"opened","issue":{"url":"https://api.github.com/repos/jasny/bootstrap/issues/584","repository_url":"https://api.github.com/repos/jasny/bootstrap","labels_url":"https://api.github.com/repos/jasny/bootstrap/issues/584/labels{/name}","comments_url":"https://api.github.com/repos/jasny/bootstrap/issues/584/comments","events_url":"https://api.github.com/repos/jasny/bootstrap/issues/584/events","html_url":"https://github.com/jasny/bootstrap/issues/584","id":331645773,"node_id":"MDU6SXNzdWUzMzE2NDU3NzM=","number":584,"title":"Bootstrap 4 Labels on buttons (Scss implementation)","user":{"login":"GeoSot","id":22406063,"node_id":"MDQ6VXNlcjIyNDA2MDYz","avatar_url":"https://avatars2.githubusercontent.com/u/22406063?v=4","gravatar_id":"","url":"https://api.github.com/users/GeoSot","html_url":"https://github.com/GeoSot","followers_url":"https://api.github.com/users/GeoSot/followers","following_url":"https://api.github.com/users/GeoSot/following{/other_user}","gists_url":"https://api.github.com/users/GeoSot/gists{/gist_id}","starred_url":"https://api.github.com/users/GeoSot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GeoSot/subscriptions","organizations_url":"https://api.github.com/users/GeoSot/orgs","repos_url":"https://api.github.com/users/GeoSot/repos","events_url":"https://api.github.com/users/GeoSot/events{/privacy}","received_events_url":"https://api.github.com/users/GeoSot/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-12T15:43:01Z","updated_at":"2018-06-12T15:43:01Z","closed_at":null,"author_association":"NONE","body":"Hello as i didn't knew if i could use the package over bootstrap 4,  I have done an approach to replicate labels inside buttons for my projects.\r\n\r\nSo you can test it and use it if you like \r\n\r\n// Labels for buttons\r\n// --------------------------------------------------\r\n\r\n@mixin labelBtn-size($direction,$padding-y ,$padding-x ) {\r\n\r\n  $radius:0;\r\n  @if $enable-rounded {\r\n     $radius:$btn-border-radius;\r\n  }\r\n  padding: calc(#{$padding-y} + #{$btn-border-width * 2}) calc(#{$padding-x} + #{$btn-border-width});\r\n  margin-top: calc(-#{$padding-y} - #{$btn-border-width});\r\n  margin-bottom: calc(-#{$padding-y} - #{$btn-border-width});\r\n\r\n  @if $direction == 'left' {\r\n    border-radius: $radius 0 0 $radius;\r\n    margin-left: calc(-#{$padding-x} - #{$btn-border-width});\r\n    margin-right: $padding-x;\r\n  }\r\n  @else {\r\n    border-radius: 0 $radius $radius 0;\r\n    margin-right: calc(-#{$padding-x} - #{$btn-border-width});\r\n    margin-left: $padding-x;\r\n  }\r\n  // Manually declare to provide an override to the browser default\r\n\r\n}\r\n\r\n.btn {\r\n  .btn-label {\r\n    position: relative;\r\n    background: transparent;\r\n    display: inline-block;\r\n    background: rgba(0, 0, 0, 0.15);\r\n    @include labelBtn-size('left', $btn-padding-y, $btn-padding-x);\r\n    &.btn-label-right{\r\n      @include labelBtn-size('right', $btn-padding-y, $btn-padding-x);\r\n    }\r\n\r\n  }\r\n  &.btn-lg  .btn-label{\r\n    @include labelBtn-size('left', $btn-padding-y-lg, $btn-padding-x-lg);\r\n    &.btn-label-right{\r\n      @include labelBtn-size('right', $btn-padding-y-lg, $btn-padding-x-lg);\r\n    }\r\n\r\n  }\r\n\r\n  &.btn-sm  .btn-label{\r\n    @include labelBtn-size('left', $btn-padding-y-sm, $btn-padding-x-sm);\r\n    &.btn-label-right{\r\n      @include labelBtn-size('right', $btn-padding-y-sm, $btn-padding-x-sm);\r\n    }\r\n  }\r\n\r\n}\r\n"}}
{"actor":{"display_login":"GeoSot"}}