connectionSignon.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @import "ibm-design-colors/_ibm-colors";
  2. .connection-signon-view {
  3. max-height: 130px;
  4. .connection-signon-content {
  5. margin-bottom: 10px;
  6. }
  7. .connection-signon-options-section-container {
  8. max-height: 100px;
  9. overflow-y: auto;
  10. .connection-signon-options-section {
  11. padding-top: 10px;
  12. padding-left: 10px;
  13. flex-direction: column;
  14. display: flex;
  15. .connection-signon-option {
  16. display: inline-flex;
  17. margin-bottom: 4px;
  18. align-items: center;
  19. &.select {
  20. .connection-signon-radio {
  21. border: thin solid color('blue', 60);
  22. .connection-signon-radio-circle {
  23. background-color: color('blue', 60) !important;
  24. }
  25. }
  26. }
  27. .connection-signon-radio {
  28. width: 16px;
  29. height: 16px;
  30. background: transparent;
  31. border: thin solid color('blue', 60);
  32. border-radius: 50px;
  33. display: flex;
  34. align-items: center;
  35. justify-content: center;
  36. &:hover {
  37. border: thin solid color('blue', 60);
  38. }
  39. .connection-signon-radio-circle {
  40. width: 100%;
  41. height: 100%;
  42. border-radius: 50px;
  43. transform: scale(0.8);
  44. background: transparent;
  45. &:hover {
  46. background-color: color('blue', 60);
  47. }
  48. }
  49. }
  50. .connection-signon-value {
  51. margin-left: 10px;
  52. user-select: none;
  53. }
  54. }
  55. }
  56. }
  57. }
  58. .highcontrast {
  59. .connection-signon-view .connection-signon-options-section-container .connection-signon-options-section .connection-signon-option {
  60. &.select {
  61. .connection-signon-radio {
  62. border-width: 8px;
  63. }
  64. }
  65. .connection-signon-radio:hover {
  66. border-width: 8px;
  67. }
  68. }
  69. }