fpa.css.less 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. /**
  2. * Prevent page width change when scroll is required.
  3. * Helps reduce screen redraws.
  4. */
  5. body.page-admin-people-permissions {
  6. overflow-y: scroll;
  7. }
  8. #user-admin-permissions.ctools-use-modal-processed .compact-link {
  9. display:none;
  10. }
  11. /* Disable the hand tool styling that admin_menu adds for module rows. */
  12. .fpa-container tr.admin-menu-tweak-permissions-processed {
  13. cursor: default;
  14. }
  15. .fpa-container .form-submit {
  16. margin: 1em;
  17. }
  18. /**
  19. * Prevent vertical jitter of dummy checkboxes.
  20. */
  21. .fpa-container .dummy-checkbox {
  22. vertical-align: middle;
  23. }
  24. .fpa-container {
  25. width: 100%;
  26. }
  27. /**
  28. * Override admin_menu's "Collapse module groups on the Permissions page" functionality.
  29. */
  30. .fpa-container tr.element-hidden {
  31. display: table-row;
  32. }
  33. .fpa-left-section,
  34. .fpa-right-section {
  35. display: table-cell;
  36. border: 1px solid #D6DBDE;
  37. vertical-align: top;
  38. }
  39. .fpa-left-section {
  40. background-color: #F6F6F6;
  41. width: 1px; /* Keep column as small as possible. Table cells automatically push wider. */
  42. }
  43. .fpa-left-section .item-list ul {
  44. background-color: #EFEFEF;
  45. list-style: none;
  46. margin:0;
  47. padding: 0;
  48. text-align: left;
  49. }
  50. .fpa-left-section .item-list li {
  51. background-color: inherit;
  52. border-bottom: 1px solid #D6DBDE;
  53. cursor: pointer;
  54. font-size: 90%;
  55. line-height: 100%;
  56. margin: 0;
  57. padding: 0;
  58. list-style: none;
  59. white-space: nowrap;
  60. position: relative; /* Fix for IE disappearing bg with negative margin */
  61. }
  62. .fpa-left-section .item-list li > div {
  63. display: table;
  64. width: 100%;
  65. }
  66. .fpa-left-section .item-list li a,
  67. .fpa-left-section .item-list li .fpa-perm-total {
  68. display: table-cell;
  69. padding: 0.5em;
  70. }
  71. .fpa-left-section .item-list li .fpa-perm-total {
  72. min-width: 6em;
  73. }
  74. .fpa-left-section .item-list li a {
  75. text-decoration: none;
  76. color: inherit;
  77. }
  78. .fpa-left-section .item-list li .fpa-perm-total {
  79. text-align: right;
  80. }
  81. .fpa-right-section {
  82. width: 100%;
  83. background-color: white;
  84. border-left-width: 0;
  85. }
  86. .fpa-filter-form {
  87. .form-item {
  88. display: inline-block;
  89. padding: 3px 10px;
  90. vertical-align: top;
  91. float: none;
  92. }
  93. .form-checkboxes .form-type-checkbox,
  94. .form-radios .form-type-radio {
  95. display: block;
  96. }
  97. }
  98. .fpa-filter-form .clear-search {
  99. cursor: pointer;
  100. display: inline-block;
  101. }
  102. .fpa-right-section .fpa-table-wrapper {
  103. padding: 10px;
  104. }
  105. /**
  106. * Module filter 2.x has a simple permissions filter. Hide this if FPA is enabled.
  107. */
  108. .fpa-table-wrapper .module-filter-inputs-wrapper .form-item-module-filter-name {
  109. display: none;
  110. }
  111. /**
  112. * CTools attempts some styling to compact forms, looks bad with FPA.
  113. */
  114. div.ctools-modal-content .fpa-container .form-item label {
  115. float: none;
  116. width: auto;
  117. }
  118. /*
  119. * Rubik has some aggressive styling which makes FPA look poor, reset it here.
  120. */
  121. .fpa-container .block,
  122. .fpa-container .item-list,
  123. .fpa-container .help-items ul,
  124. .fpa-container .form-item,
  125. .fpa-container .confirmation ul,
  126. .fpa-container .admin-list,
  127. .fpa-container .node-type-list,
  128. .fpa-container .admin-panel {
  129. border-width: 0;
  130. }
  131. /**
  132. * Styling for matching permissions counter.
  133. */
  134. .fpa-left-section li[fpa-module] {
  135. counter-reset: fpa-module-permissions;
  136. }
  137. .fpa-perm-counter {
  138. display: inline;
  139. counter-increment: fpa-module-permissions;
  140. }
  141. .fpa-perm-total:before {
  142. content: counter(fpa-module-permissions);
  143. }
  144. .fpa-perm-total:after {
  145. content: " of " attr(fpa-total);
  146. }
  147. .fpa-toggle-container {
  148. padding: 0.5em;
  149. }
  150. .fpa-toggle-container a {
  151. margin: 0.5em;
  152. }
  153. .fpa-hide-descriptions table#permissions .description {
  154. display: none;
  155. }
  156. .fpa-table-wrapper tr:before {
  157. white-space: nowrap;
  158. .fpa-hide-system-names & {
  159. display: none;
  160. }
  161. }
  162. // Need to have this to now interfere with admin_menu.
  163. .fpa-table-wrapper thead tr:before {
  164. content: "System Name";
  165. display: table-cell;
  166. border-bottom: 3px solid #ccc;
  167. padding-right: 1em;
  168. text-align: left;
  169. vertical-align: middle;
  170. padding: 8px 10px;
  171. border: 0;
  172. color: #000;
  173. text-transform: uppercase;
  174. background: #e1e2dc;
  175. font-weight: normal;
  176. border-width: 1px;
  177. border-style: solid;
  178. border-color: #bebfb9;
  179. }
  180. .fpa-table-wrapper tbody tr {
  181. &:before {
  182. content: attr(fpa-system-name);
  183. display: table-cell;
  184. vertical-align: middle;
  185. padding: 8px 10px;
  186. border: 0;
  187. color: #000;
  188. text-align: left;
  189. }
  190. &.fpa-module-row:before {
  191. font-weight: bold;
  192. }
  193. &.fpa-permission-row:before {
  194. padding-left: 1.5em;
  195. }
  196. }
  197. /**
  198. * Styling for injected checkboxes.
  199. */
  200. .fpa-table-wrapper th.checkbox {
  201. vertical-align: bottom;
  202. }
  203. .fpa-table-wrapper th input[type="checkbox"] {
  204. display: block;
  205. margin: 0.5em auto;
  206. }
  207. .fpa-hide-descriptions a[fpa-toggle-class="fpa-hide-descriptions"]:before {
  208. content: attr(show);
  209. }
  210. a[fpa-toggle-class="fpa-hide-descriptions"]:before {
  211. content: attr(hide);
  212. }
  213. .fpa-hide-system-names a[fpa-toggle-class="fpa-hide-system-names"]:before {
  214. content: attr(show);
  215. }
  216. a[fpa-toggle-class="fpa-hide-system-names"]:before {
  217. content: attr(hide);
  218. }
  219. #user-admin-permissions .form-submit.fpa-clear-search {
  220. margin: 0;
  221. }
  222. .fpa-mobile input[type="checkbox"] {
  223. width: 4em;
  224. height: 4em;
  225. }
  226. .fpa-permission-container {
  227. display: table;
  228. width: 100%;
  229. }
  230. .fpa-row-toggle-container {
  231. display: table-cell;
  232. vertical-align: middle;
  233. width: 2em;
  234. text-align: center;
  235. }
  236. td.checkbox,
  237. .fpa-row-toggle-container {
  238. -webkit-touch-callout: none;
  239. -webkit-user-select: none;
  240. -khtml-user-select: none;
  241. -moz-user-select: none;
  242. -ms-user-select: none;
  243. user-select: none;
  244. }
  245. #permissions td {
  246. text-align: center;
  247. }
  248. #permissions td.permission,
  249. #permissions td.module {
  250. text-align: left;
  251. }
  252. /**
  253. * [checked] is HTML attribute. ':checked' selector is based on DOM property.
  254. *
  255. * IE: Both :checked and box-shadow are only supported on IE9+, so <=IE8 will not see this feature at all.
  256. */
  257. .fpa-table-wrapper td.checkbox input[type="checkbox"] {
  258. border-collapse: separate;
  259. // [checked] = state of page load.
  260. // :checked = current state.
  261. &:not([checked]):checked {
  262. box-shadow: 0px 0px 10px 6px rgba(0, 255, 0, 0.5);
  263. }
  264. &[checked]:not(:checked) {
  265. box-shadow: 0px 0px 10px 6px rgba(255, 0, 0, 0.5);
  266. }
  267. }
  268. /**
  269. * Hide aspects of FPA that depend on JS.
  270. */
  271. .fpa-checkboxes-toggle {
  272. visibility: hidden;
  273. }
  274. html.js .fpa-checkboxes-toggle {
  275. visibility: inherit;
  276. }
  277. .fpa-filter-form {
  278. display: none;
  279. }
  280. html.js .fpa-filter-form {
  281. display: block;
  282. }
  283. /**
  284. * Tweak how the table is initially displayed to prevent premature reflow.
  285. *
  286. * The table is displayed with a <style /> tag immediately after in the HTML.
  287. */
  288. #permissions {
  289. display: none;
  290. }
  291. .fpa-table-wrapper {
  292. background-repeat: no-repeat;
  293. background-position: center -18px;
  294. background-image: url('data:image/gif;base64,R0lGODlhDwAoAMQAAAAAAAhzvQx7vRh7xhyExjWQykaczlqi02uv2Iu/4bW1taDO57XW7729vb3e78bGxs7OztbW1t7e3sri89bn997v9+fn5+fv9+f3/+/v7+/3//f39/f3//f//////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBgAAACwAAAAADwAoAAAFxiAgApkUWduoAhukvC+UqlujNFD0vI2nuo8ZyRYZZW5C0VExkyiKK8DOIoooJFGAFQtwQldTJXK1FAKFGSLNpsjtbj6aC/ZMqkone3bP7/v/gIGCfhQJCAsVexUGAY2NBxorFQIBAgQBl5gcKowFFQkBCROXCCMUlRceoAkeE42RAAsBCB6qobWMDCIIt7asHrwJIqC0HgwHDLgBugCnAqm1ta4BsACdFdETA7Mqk40GCIyaKxfijgjVKxQLh4mD7/Dx8vIhAAAh+QQFBgAAACwAABQADQANAAAFRyAgAtOSANqoriI3XgQQFEchFunqcUQwvCpPImBwiC6rikxpc5wQooNKulgApIALwjVyTGQskcAzinVZ5qsNsA5HkSvkaRUCACH5BAUGAAAALAAAFAANAA0AAAU/ICAC11iNY4mKKnCKxsqtoudNwjgBweg5hZ7AIzqwjAECDSVI0BAoVYEFyK0cvFZhJ+KmRtOYSGNazlZe8igEACH5BAUGAAAALAAAFAANAA0AAAVIICACVIKMKFClooYKAIwYIsGmtkjFqOdNgIALcAI4EsiEjXFKiJyBaACARDEO2MNydwMChqLVTQUDGIoAAmd0YSHAo91JLAoBACH5BAUGAAAALAAAFAANAA0AAAVJICAC05IA2qiuIjdeBBAUx1ikbH7lgCPuqgvi4vEUeieEqCZIeGqLBaAG2AUChKNjIlM5CgGAwDOKjRyClXl6BLR5U2AQcFqFAAAh+QQFBgAAACwAABQADQANAAAFQCAgAtdYjWOJiipwigZQjNy6DuMEBLYueKIDqgaI2UQJ4AohqvAqShJAMEoEDI5dq6DjEHio7UpjOhJROhF5FAIAIfkEBQYAAAAsAAAUAA0ADQAABUUgIAIUgIwoUKWihgoAjBgiwaa2WMJ34JoiR8KBYpwSIuToqEwCEh4AjVEaJQLQSQtVuSYmAy6PEMgROKMLC/FDlU6rUQgAIfkEBQYAAAAsAAAUAA0ADQAABUYgIAITkADaqK4iN14EEBTHWKRsfuWAI+6qCwJX6J0QohoSUFssmL2AACdylAKAQmDhGQm6osHM4/GtYtlDMcsbHYBBEysEACH5BAUGAAAALAAAFAANAA0AAAVBICAC11iNY4mKKnCKBlCM3LoO4wQEti54ooPoVAPEUJwEzwYj8BCjGUkUMFCAAMeuRZhgdagWbKQxMYsoMKA8CgEAIfkEBQYAAAAsAAAUAA0ADQAABUkgIAJUgowoUKWihgoAjBgiwaa2SMU3EGgJAOFAPDBQjFNgKQoCTs5CYppwiGiMneDi8YwmrVFh1avAAIZTjTO6sBCu1O5EFoUAACH5BAUGAAAALAAAFAANAA0AAAVIICAC05IA2qiuIjdeBBAUx1ikY8yKlxwYlJGDtwAYCIEAAlcAOE4IzgmAENWKgIPHU4mqHBPZDiDw5L4sXbYJYI+zvVVvqgoBACH5BAUGAAAALAAAFAANAA0AAAVBICAC11iNY4mKKnCixcitQSwO48QWwSLqAo/o4HEABCPDyuM5rFAIFkAjspWQK2OgVdD9VlyAUkQVvVazlXeKCgEAOw==');
  295. min-height: 18px;
  296. }
  297. .fpa-role-styles,
  298. .fpa-perm-styles {
  299. display: none;
  300. }
  301. .fpa-wrapper {
  302. display: table;// Need this to go full width.
  303. }
  304. .dummy-checkbox {
  305. display: none;
  306. }
  307. .fpa-authenticated-role-behavior {
  308. input[type="checkbox"] {
  309. display: none;
  310. &.rid-1, &.rid-2, &.dummy-checkbox {
  311. display: inline-block;
  312. }
  313. }
  314. }