slack-notification.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. .grw-slack-notification {
  2. $input-height-slack: $custom-control-indicator-size * 1.5;
  3. border-color: $gray-200;
  4. border-style: solid;
  5. border-width: 1px;
  6. border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
  7. .form-control {
  8. height: $input-height-slack;
  9. border: transparent;
  10. @include media-breakpoint-up(sm) {
  11. width: 130px;
  12. }
  13. @include media-breakpoint-up(md) {
  14. width: 180px;
  15. }
  16. }
  17. // height settings for slack button's responsive design
  18. // in the input and form-control element
  19. .grw-form-control-slack-notification.form-control {
  20. height: $input-height-slack;
  21. &:focus {
  22. box-shadow: none;
  23. }
  24. }
  25. .grw-input-group-slack-notification {
  26. height: $input-height-slack;
  27. label {
  28. display: flex;
  29. align-items: center;
  30. justify-content: center;
  31. margin-bottom: 0;
  32. }
  33. }
  34. .custom-control-label {
  35. &::before {
  36. border: transparent;
  37. }
  38. }
  39. }
  40. // TODO デザインの使用が確定して実装、本タスクのスコープ外
  41. // .grw-slack-notification-xd {
  42. // }