move icons style in new file
This commit is contained in:
		
							
								
								
									
										37
									
								
								view/theme/quattro/icons.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										37
									
								
								view/theme/quattro/icons.less
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,37 @@ | ||||
| /* icons */ | ||||
|  | ||||
| .icons(@size: 22) { | ||||
| 	&.notify { background-image: url("../../../images/icons/@{size}/notify_off.png"); } | ||||
| 	&.gear 	 { background-image: url("../../../images/icons/@{size}/gear.png"); } | ||||
| 	 | ||||
| 	&.add 	 	{ background-image: url("../../../images/icons/@{size}/add.png"); } | ||||
| 	&.delete 	{ background-image: url("../../../images/icons/@{size}/delete.png"); } | ||||
| 	&.edit 	 	{ background-image: url("../../../images/icons/@{size}/edit.png"); } | ||||
| 	&.start	 	{ background-image: url("../../../images/icons/@{size}/star.png"); } | ||||
| } | ||||
|  | ||||
|  | ||||
| .icon { | ||||
| 	background-color: transparent ; | ||||
| 	background-repeat: no-repeat; | ||||
| 	background-position: center center; | ||||
| 	display: block; | ||||
| 	overflow: hidden; | ||||
| 	text-indent: -9999px; | ||||
| 	padding: 1px; | ||||
|  | ||||
| 	&.text { | ||||
| 		text-indent: 0px; | ||||
| 	} | ||||
|  | ||||
| 	&.s16 { | ||||
| 		width:22px; height: 22px; | ||||
| 		.icons(16); | ||||
| 	} | ||||
| 	&.s22 { | ||||
| 		width:22px; height: 22px; | ||||
| 		.icons(22); | ||||
| 	} | ||||
| 	 | ||||
| 	 | ||||
| } | ||||
| @@ -32,33 +32,13 @@ a:hover {color: @LinkHover; text-decoration: underline; } | ||||
| .left { float: left; } | ||||
| .right { float: right; } | ||||
|  | ||||
| /* icons */ | ||||
|  | ||||
|  | ||||
| .icons(@size: 22) { | ||||
| 	&.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); } | ||||
| 	&.gear 	 { background-image: url("../../../images/icons/gear_@{size}.png"); } | ||||
| .tool { | ||||
| 	height: auto; overflow: auto; | ||||
| 	.label { float: left;} | ||||
| 	.icon { float: right; } | ||||
| } | ||||
|  | ||||
|  | ||||
| .icon { | ||||
| 	background-color: transparent ; | ||||
| 	background-repeat: no-repeat; | ||||
| 	background-position: center center; | ||||
| 	display: block; | ||||
| 	overflow: hidden; | ||||
| 	text-indent: -9999px; | ||||
|  | ||||
| 	&.s22 { | ||||
| 		width:22px; height: 22px; | ||||
| 		padding: 1px; | ||||
| 		.icons(22); | ||||
| 	} | ||||
| 	 | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
| /* header */ | ||||
| header { | ||||
| 	position: fixed; left: 43%; right: 43%; top: 0px; | ||||
| @@ -156,7 +136,7 @@ nav { | ||||
| 			.menu-popup{ right: 0px; left: auto; } | ||||
| 		} | ||||
| 	 | ||||
| 		#nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") } | ||||
| 		#nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") } | ||||
| 		#nav-apps-link.selected { background-color: @NavbarSelectedBg; } | ||||
| } | ||||
|  | ||||
| @@ -232,6 +212,20 @@ aside { | ||||
|  | ||||
| } | ||||
|  | ||||
| #contact-block { | ||||
| 	overflow: auto;	height: auto; | ||||
| 	.contact-block-h4 { float: left; margin: 5px 0px; } | ||||
| 	.allcontact-link { float: right; margin: 5px 0px; } | ||||
| 	.contact-block-content { | ||||
| 		clear: both; | ||||
| 		overflow: auto;	height: auto; | ||||
| 	} | ||||
| 	.contact-block-link { | ||||
| 		float: left; | ||||
| 		margin: 0px 2px 2px 0px; | ||||
| 	} | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
| @@ -241,3 +235,6 @@ section { | ||||
| 	width: 800px; | ||||
| 	padding:0px 20px 0px 10px; | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
|   | ||||
| @@ -1,6 +1,63 @@ | ||||
| /** | ||||
|  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm> | ||||
|  **/ | ||||
| /* icons */ | ||||
| .icon { | ||||
|   background-color: transparent ; | ||||
|   background-repeat: no-repeat; | ||||
|   background-position: center center; | ||||
|   display: block; | ||||
|   overflow: hidden; | ||||
|   text-indent: -9999px; | ||||
|   padding: 1px; | ||||
| } | ||||
| .icon.text { | ||||
|   text-indent: 0px; | ||||
| } | ||||
| .icon.s16 { | ||||
|   width: 22px; | ||||
|   height: 22px; | ||||
| } | ||||
| .icon.s16.notify { | ||||
|   background-image: url("../../../images/icons/16/notify_off.png"); | ||||
| } | ||||
| .icon.s16.gear { | ||||
|   background-image: url("../../../images/icons/16/gear.png"); | ||||
| } | ||||
| .icon.s16.add { | ||||
|   background-image: url("../../../images/icons/16/add.png"); | ||||
| } | ||||
| .icon.s16.delete { | ||||
|   background-image: url("../../../images/icons/16/delete.png"); | ||||
| } | ||||
| .icon.s16.edit { | ||||
|   background-image: url("../../../images/icons/16/edit.png"); | ||||
| } | ||||
| .icon.s16.start { | ||||
|   background-image: url("../../../images/icons/16/star.png"); | ||||
| } | ||||
| .icon.s22 { | ||||
|   width: 22px; | ||||
|   height: 22px; | ||||
| } | ||||
| .icon.s22.notify { | ||||
|   background-image: url("../../../images/icons/22/notify_off.png"); | ||||
| } | ||||
| .icon.s22.gear { | ||||
|   background-image: url("../../../images/icons/22/gear.png"); | ||||
| } | ||||
| .icon.s22.add { | ||||
|   background-image: url("../../../images/icons/22/add.png"); | ||||
| } | ||||
| .icon.s22.delete { | ||||
|   background-image: url("../../../images/icons/22/delete.png"); | ||||
| } | ||||
| .icon.s22.edit { | ||||
|   background-image: url("../../../images/icons/22/edit.png"); | ||||
| } | ||||
| .icon.s22.start { | ||||
|   background-image: url("../../../images/icons/22/star.png"); | ||||
| } | ||||
| /* global */ | ||||
| body { | ||||
|   font-family: Liberation Sans, helvetica, arial, clean, sans-serif; | ||||
| @@ -28,25 +85,15 @@ a:hover { | ||||
| .right { | ||||
|   float: right; | ||||
| } | ||||
| /* icons */ | ||||
| .icon { | ||||
|   background-color: transparent ; | ||||
|   background-repeat: no-repeat; | ||||
|   background-position: center center; | ||||
|   display: block; | ||||
|   overflow: hidden; | ||||
|   text-indent: -9999px; | ||||
| .tool { | ||||
|   height: auto; | ||||
|   overflow: auto; | ||||
| } | ||||
| .icon.s22 { | ||||
|   width: 22px; | ||||
|   height: 22px; | ||||
|   padding: 1px; | ||||
| .tool .label { | ||||
|   float: left; | ||||
| } | ||||
| .icon.s22.notify { | ||||
|   background-image: url("../../../images/icons/notify_off_22.png"); | ||||
| } | ||||
| .icon.s22.gear { | ||||
|   background-image: url("../../../images/icons/gear_22.png"); | ||||
| .tool .icon { | ||||
|   float: right; | ||||
| } | ||||
| /* header */ | ||||
| header { | ||||
| @@ -186,7 +233,7 @@ nav #nav-site-linkmenu .menu-popup { | ||||
|   left: auto; | ||||
| } | ||||
| nav #nav-notifications-linkmenu.selected .icon.s22.notify { | ||||
|   background-image: url("../../../images/icons/notify_on_22.png"); | ||||
|   background-image: url("../../../images/icons/22/notify_on.png"); | ||||
| } | ||||
| nav #nav-apps-link.selected { | ||||
|   background-color: #364e59; | ||||
| @@ -296,6 +343,27 @@ aside #dfrn-request-link:hover { | ||||
|   text-decoration: none; | ||||
|   background-color: #19aeff; | ||||
| } | ||||
| #contact-block { | ||||
|   overflow: auto; | ||||
|   height: auto; | ||||
| } | ||||
| #contact-block .contact-block-h4 { | ||||
|   float: left; | ||||
|   margin: 5px 0px; | ||||
| } | ||||
| #contact-block .allcontact-link { | ||||
|   float: right; | ||||
|   margin: 5px 0px; | ||||
| } | ||||
| #contact-block .contact-block-content { | ||||
|   clear: both; | ||||
|   overflow: auto; | ||||
|   height: auto; | ||||
| } | ||||
| #contact-block .contact-block-link { | ||||
|   float: left; | ||||
|   margin: 0px 2px 2px 0px; | ||||
| } | ||||
| /* section */ | ||||
| section { | ||||
|   display: table-cell; | ||||
|   | ||||
| @@ -6,6 +6,7 @@ | ||||
| // $ lessc style.less > style.css | ||||
|  | ||||
| @import "colors"; | ||||
| @import "icons"; | ||||
| @import "quattro"; | ||||
|  | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user