No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_button-icon.scss 1.6KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. //
  2. // Icon buttons
  3. //
  4. .btn-icon {
  5. .btn-inner--icon {
  6. img {
  7. width: 20px;
  8. }
  9. }
  10. .btn-inner--text:not(:first-child) {
  11. margin-left: 0.75em;
  12. }
  13. .btn-inner--text:not(:last-child) {
  14. margin-right: 0.75em;
  15. }
  16. }
  17. // Button only with icon and NO text
  18. .btn-icon-only {
  19. width: 2.375rem;
  20. height: 2.375rem;
  21. padding: 0;
  22. }
  23. a.btn-icon-only {
  24. line-height: 2.5;
  25. }
  26. .btn-icon-only.btn-sm {
  27. width: 2rem;
  28. height: 2rem;
  29. }
  30. //
  31. // Clipboard button
  32. // dedicated element for copying icons
  33. //
  34. .btn-icon-clipboard {
  35. margin: 0;
  36. padding: 1.5rem;
  37. font-size: $font-size-base;
  38. font-weight: $font-weight-normal;
  39. line-height: 1.25;
  40. color: $gray-800;
  41. background-color: $gray-100;
  42. border-radius: $border-radius;
  43. border: 0;
  44. text-align: left;
  45. font-family: inherit;
  46. display: inline-block;
  47. vertical-align: middle;
  48. text-decoration: none;
  49. -moz-appearance: none;
  50. cursor: pointer;
  51. width: 100%;
  52. margin: .5rem 0;
  53. &:hover {
  54. background-color: $white;
  55. box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px, rgba(0, 0, 0, .1) 0 4px 16px;
  56. }
  57. > div {
  58. align-items: center;
  59. display: flex;
  60. }
  61. i {
  62. box-sizing: content-box;
  63. color: theme-color("primary");
  64. vertical-align: middle;
  65. font-size: 1.5rem;
  66. }
  67. span {
  68. display: inline-block;
  69. font-size: 0.875rem;
  70. line-height: 1.5;
  71. margin-left: 16px;
  72. overflow: hidden;
  73. white-space: nowrap;
  74. text-overflow: ellipsis;
  75. vertical-align: middle;
  76. }
  77. }