auth-skin-universal.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /**
  2. Author: lipengfei886
  3. Email: lipengfei886@qq.com
  4. Name: auth-skin-universal
  5. Comment: lipengfei886@qq.com提供的绿色背景样式
  6. Version: v1.0.0
  7. */
  8. /*请在js中的.auth-status前的div加一个class属性auth-skin*/
  9. .auth-skin-universal .auth-status {
  10. margin-top: -12px;
  11. }
  12. .auth-skin-universal .auth-status > div {
  13. position: relative;
  14. top: 6px;
  15. padding-left: 17px;
  16. }
  17. .auth-skin-universal .auth-status > div.layui-form-radio {
  18. padding-left: 5px;
  19. }
  20. /*美化的多选框/单选框DOM*/
  21. .auth-skin-universal .auth-status > div > span {
  22. -moz-border-radius: 5px;
  23. -webkit-border-radius: 5px;
  24. border-radius: 5px;
  25. display: inline-block;
  26. padding: 3px 8px;
  27. text-decoration: none;
  28. position: relative;
  29. top: -3px;
  30. left: 5px;
  31. }
  32. .auth-skin-universal .auth-status > .layui-form-checkbox > span {
  33. display: inline-block;
  34. padding: 3px 8px;
  35. text-decoration: none;
  36. color: #FFFFFF;
  37. background-color: #009688 !important;
  38. }
  39. .auth-skin-universal .auth-status > .layui-form-radio > div {
  40. display: inline-block;
  41. border-radius: 5px;
  42. padding: 3px 8px;
  43. text-decoration: none;
  44. color: #FFFFFF;
  45. background-color: #009688 !important;
  46. }
  47. .auth-skin-universal .auth-status > .layui-form-radio {
  48. line-height: normal !important;
  49. }
  50. .auth-skin-universal .auth-skin {
  51. list-style-type: none;
  52. margin: 0;
  53. padding: 13px 5px 0 5px;
  54. position: relative;
  55. color: #009688;
  56. }
  57. .auth-skin-universal .auth-skin::before, .auth-skin-universal .auth-skin::after {
  58. content: '';
  59. left: -32.5px;
  60. position: absolute;
  61. right: auto
  62. }
  63. .auth-skin-universal .auth-skin::before {
  64. border-left: 1px dashed #009688;
  65. bottom: 50px;
  66. height: 100%;
  67. top: -4px;
  68. width: 1px
  69. }
  70. .auth-skin-universal .auth-skin::after {
  71. border-top: 1px dashed #009688;
  72. height: 20px;
  73. top: 24px; /*radio时 改为24px checkbox时改为27px*/
  74. width: 40px
  75. }
  76. /*解决多层数据中,auth-child缩进长度的问题*/
  77. .auth-skin-universal > .auth-single .auth-single {
  78. margin-left: 58px;
  79. }
  80. .auth-skin-universal > .auth-single > .auth-skin > .auth-child .auth-child {
  81. margin-left: 18px;
  82. }
  83. .auth-skin-universal > .auth-single > .auth-skin {
  84. }
  85. .auth-skin-universal > .auth-single > .auth-skin::before, .auth-skin-universal > .auth-single > .auth-skin::after {
  86. border: 0
  87. }
  88. .auth-skin-universal > .auth-single > .auth-skin:last-child::before {
  89. height: 30px
  90. }
  91. /*隐藏左侧操作的特殊样式*/
  92. .auth-skin-universal.auth-tree-hidechoose .auth-status > span {
  93. display: none;
  94. }
  95. .auth-skin-universal.auth-tree-hidechoose .auth-status > div > span {
  96. padding-left: 3px;
  97. }
  98. .auth-skin-universal.auth-tree-hidechoose .auth-status > i {
  99. position: relative;
  100. top: 4px;
  101. }
  102. /*放于同一行的样式*/
  103. .auth-skin-universal .auth-row {
  104. display: inline-block;
  105. margin-left: 5px;
  106. }
  107. .auth-skin-universal > .auth-single .auth-child .auth-row {
  108. margin-left: 20px;
  109. }
  110. .auth-skin-universal .auth-row.auth-skin::before, .auth-skin-universal .auth-row.auth-skin::after {
  111. content: '';
  112. border: 0;
  113. }