settings.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. // Used for theme swticher
  2. .setting-color {
  3. padding: 0 5px;
  4. >label {
  5. display: block;
  6. position: relative;
  7. margin: 0 10px;
  8. border-radius: 3px;
  9. overflow: hidden;
  10. border: 1px solid rgba(0, 0, 0, .1);
  11. cursor: pointer;
  12. &:first-child {
  13. margin-left: 0
  14. }
  15. &:last-child {
  16. margin-right: 0
  17. }
  18. $baseHg: 15px;
  19. >.color {
  20. display: block;
  21. height: $baseHg * 1.2;
  22. }
  23. >.split {
  24. @include clearfix();
  25. display: block;
  26. >.color {
  27. display: block;
  28. height: $baseHg * 2.5;
  29. &:first-child {
  30. float: left;
  31. width: 70%;
  32. }
  33. &:last-child {
  34. float: right;
  35. width: 30%;
  36. }
  37. }
  38. } // icon checked
  39. >.icon-check {
  40. position: absolute;
  41. display: block;
  42. left: 50%;
  43. top: 50%;
  44. width: 20px;
  45. height: 20px;
  46. margin-top: -20px;
  47. margin-left: -10px;
  48. text-align: center;
  49. font-size: 1.33333333em;
  50. vertical-align: -15%;
  51. color: #fff;
  52. opacity: 0;
  53. }
  54. >input[type="radio"] {
  55. position: absolute;
  56. opacity: 0;
  57. visibility: hidden;
  58. &:checked+.icon-check {
  59. opacity: 1 !important;
  60. }
  61. }
  62. }
  63. }