bootstrapify aclselector

view/theme/redbasic/css/style.css

@@ -1521,7 +1521,7 @@ header {
   right: 43%;
   margin: 0px;
   padding: 0px;
-  z-index: 1400;
+  z-index: 1040;
   color: #fff;
 }
 
@@ -1552,101 +1552,73 @@ header {
 	clear: both;
 }
 
-#acl-wrapper {
-	width: 690px;
-	float:left;
+#acl-search {
+	margin-top: 20px;
+	padding: 8px;
+	border: 1px solid #ccc;
+	width: 100%;
 }
 
-#acl-search {
-	float:right;
-	background: #ffffff url("../../../../images/search_18.png") no-repeat right center;
-	padding-right:20px;
+#acl-search::-webkit-input-placeholder {
+	font-family: FontAwesome;
 }
-#acl-showall {
-	float: left;
-	display: block;
-	width: auto;
-	height: 26px;
-	background-color: #cccccc;
-	background-image: url("../../../../images/show_all_off.png");
-	background-position: 7px 7px;
-	background-repeat: no-repeat;
-	padding: 7px 5px 0px 30px;
-	-webkit-border-radius: $radiuspx;
-	-moz-border-radius: $radiuspx;
-	border-radius: $radiuspx;
-	color: #999999;
-}
-#acl-showall.selected {
-	color: #000000;
-	background-color: #ff9900;
-	background-image: url("../../../../images/show_all_on.png");
+
+#acl-search::-moz-placeholder {
+	font-family: FontAwesome;
 }
 
 #acl-list {
-	height: 210px;
-	border: 1px solid #cccccc;
-	clear: both;
-	margin-top: 30px;
-	overflow: auto;
-}
-#acl-list-content {
-	
-}
-.acl-list-item {
 	display: block;
-	width: 150px;
-	height: 30px;
 	border: 1px solid #cccccc;
-	margin: 5px;
-	float: left;
+	overflow: auto;
+	clear: both;
+	min-height: 62px;
+	margin-top: 20px;
+	padding: 10px 10px 0px 0px;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
 }
+
+.acl-list-item {
+	width: calc(50% - 10px);
+	border: 1px solid #cccccc;
+	margin: 0px 0px 10px 10px;
+	padding: 5px;
+	float: left;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
+}
+
 .acl-list-item img{
-	width:22px;
-	height: 22px;
+	width: 40px;
+	height: 40px;
 	float: left;
-	margin: 4px;
+	margin-right: 5px;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
 }
+
 .acl-list-item.taggable {
 	background-color: #ddddff;
 }
 
-.acl-list-item p { height: 12px; font-size: 10px; margin: 0px; overflow: hidden;}
-.acl-list-item a { 
-	font-size: 8px;
-	display: block;
-	width: 40px;
-	height: 10px;
-	float: left;
-	color: #999999;
-	background-color: #cccccc;
-	background-position: 3px 3px;
-	background-repeat: no-repeat;
-	margin-right: 5px;
-	-webkit-border-radius: 2px ;
-	-moz-border-radius: 2px;
-	border-radius: 2px;
-	padding-left: 15px;
+.acl-list-item p {
+	font-size: $font_size;
+	margin: 0px;
+	overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
-#acl-wrapper a:hover {
-	text-decoration: none;
-	color:#000000;
-}
-.acl-button-show { background-image: url("../../../../images/show_off.png"); }
-.acl-button-hide { background-image: url("../../../../images/hide_off.png"); }
 
-.acl-button-show.selected {
-	color: #000000;
-	background-color: #9ade00;
-	background-image: url("../../../../images/show_on.png");
+.acl-button-show,
+.acl-button-hide {
+	float: right;
+	margin-left: 5px;
 }
-.acl-button-hide.selected {
-	color: #000000;
-	background-color: #ff4141;
-	background-image: url("../../../../images/hide_on.png");
-}
-.acl-list-item.groupshow { border-color: #9ade00; }
-.acl-list-item.grouphide { border-color: #ff4141; }
 
 .contact-block-content {
 	margin-top: 8px;
@@ -2284,4 +2256,8 @@ blockquote {
 		width: 32px !important;
 		height: 32px !important;
 	}
+
+	.acl-list-item {
+		width: calc(100% - 10px);
+	}
 }