128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
.icon {
|
|
@include icon-shape ($size-icon, $padding-icon, $border-radius-icon);
|
|
@include icon-gradient ($icon-default-color-top, $icon-default-color-bottom);
|
|
|
|
// padding suprascris pentru iconite 7s si fa, test!
|
|
padding: 8px;
|
|
|
|
[class^="icon-"]{
|
|
height: $height-icon-message;
|
|
width: $width-icon-message;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
&.icon-sm {
|
|
@include icon-shape ($size-icon-sm, $padding-icon-sm, $border-radius-icon-sm);
|
|
|
|
[class^="icon-"]{
|
|
height: $height-icon-message-sm;
|
|
width: $width-icon-message-sm;
|
|
|
|
}
|
|
|
|
[class*="pe-7s-"]{
|
|
width: 25px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
}
|
|
[class*="fa-"]{
|
|
width: 25px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 19px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
[class*="pe-7s-"]{
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 46px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
}
|
|
[class*="fa-"]{
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 36px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
|
|
.icon-blue {
|
|
@include icon-gradient ($icon-blue-color-top, $icon-blue-color-bottom);
|
|
}
|
|
|
|
.icon-azure {
|
|
@include icon-gradient ($icon-azure-color-top, $icon-azure-color-bottom);
|
|
}
|
|
|
|
.icon-green {
|
|
@include icon-gradient ($icon-green-color-top, $icon-green-color-bottom);
|
|
}
|
|
|
|
.icon-orange {
|
|
@include icon-gradient ($icon-orange-color-top, $icon-orange-color-bottom);
|
|
}
|
|
|
|
.icon-red {
|
|
@include icon-gradient ($icon-red-color-top, $icon-red-color-bottom);
|
|
}
|
|
|
|
.icon-purple {
|
|
@include icon-gradient ($icon-purple-color-top, $icon-purple-color-bottom);
|
|
}
|
|
|
|
.icon-pink {
|
|
@include icon-gradient ($icon-pink-color-top, $icon-pink-color-bottom);
|
|
}
|
|
|
|
.icon-black {
|
|
@include icon-gradient ($icon-black-color-top, $icon-black-color-bottom);
|
|
}
|
|
|
|
.info{
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
.icon{
|
|
margin-top: 0;
|
|
}
|
|
h4,
|
|
.h4{
|
|
margin-top: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.info-horizontal{
|
|
text-align: left;
|
|
margin-top: 0;
|
|
.icon{
|
|
float: left;
|
|
margin-top: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
.description{
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|