chips.scss 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // Chips
  2. // chip styles
  3. .chip{
  4. background-color: $chip-bg-color;
  5. font-size: $chip-font-size;
  6. border-radius: $chip-border-radius;
  7. display: inline-flex;
  8. padding:0 10px;
  9. margin-bottom: 5px;
  10. vertical-align: middle;
  11. justify-content: center;
  12. // chip body customization
  13. .chip-body{
  14. color: rgba($pure-black, .7);
  15. display: flex;
  16. justify-content: space-between;
  17. min-height: $chip-min-height;
  18. min-width: $chip-min-width;
  19. .avatar{
  20. background-color: $chip-avatar-bg;
  21. display: flex;
  22. width: $avatar-size-sm;
  23. height: $avatar-size-sm;
  24. margin: 2px 0;
  25. border-radius: 50%;
  26. justify-content: center;
  27. align-items: center;
  28. color: $white;
  29. transform: translate(-8px);
  30. .avatar-content{
  31. top: 0;
  32. }
  33. // chip image
  34. img{
  35. border-radius: 50%;
  36. height: $avatar-size-sm;
  37. width: $avatar-size-sm;
  38. }
  39. }
  40. // chip text
  41. .chip-text{
  42. vertical-align: middle;
  43. align-self: center;
  44. }
  45. // chip closeable
  46. .chip-closeable{
  47. min-height: $chip-closeable-min-height;
  48. min-width: $chip-closeable-min-width;
  49. margin: 0 4px;
  50. display: flex;
  51. justify-content: center;
  52. align-items: center;
  53. align-self: center;
  54. border-radius: 50%;
  55. background: rgba($pure-black, .15);
  56. color: $white;
  57. transform: translate(10px);
  58. cursor: pointer;
  59. i{
  60. margin-left: 1px;
  61. margin-top: 1px;
  62. }
  63. }
  64. }
  65. }
  66. // IE Specific
  67. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  68. .chip {
  69. .chip-closeable{
  70. i{
  71. position: relative;
  72. top: 3px;
  73. }
  74. }
  75. }
  76. }