move icons style in new file
This commit is contained in:
parent
c308ac49af
commit
ab5bda526e
4 changed files with 146 additions and 43 deletions
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";
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue