policybot/fassets/css/imports/shortcodes/styled-icons.css

194 lines
4.7 KiB
CSS
Raw Normal View History

2021-11-30 10:56:55 +00:00
/*-----------------------------------------------------------------------------------
Shortcodes: styled-icons.scss
-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
Styled Icons
-----------------------------------------------------------------*/
.i-rounded, .i-plain, .i-circled, .i-bordered, .social-icon {
display: block;
float: left;
margin: 4px 11px 7px 0;
text-align: center !important;
font-size: 28px;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
cursor: pointer;
font-style: normal;
}
body:not(.device-touch) .i-rounded,
body:not(.device-touch) .i-plain,
body:not(.device-touch) .i-circled,
body:not(.device-touch) .i-bordered,
body:not(.device-touch) .social-icon {
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.i-rounded,
.i-circled,
.i-bordered {
width: 52px !important;
height: 52px !important;
line-height: 52px !important;
background-color: #444;
border-radius: 3px;
}
.i-bordered {
border: 1px solid #555555;
line-height: 50px !important;
background: transparent !important;
color: #444;
text-shadow: none;
}
.i-bordered:hover {
background-color: #444 !important;
color: #fff;
border-color: #444;
}
.i-plain {
width: 36px !important;
height: 36px !important;
font-size: 28px;
line-height: 36px !important;
color: #444;
text-shadow: 1px 1px 1px #FFF;
}
.i-plain:hover {
color: #777;
}
.i-circled {
border-radius: 50%;
}
.i-light {
background-color: #F5F5F5;
color: #212529;
text-shadow: 1px 1px 1px #FFF;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}
.i-alt {
background-image: url("images/icons/iconalt.svg");
background-position: center center;
background-size: 100% 100%;
}
.i-rounded:hover,
.i-circled:hover {
background-color: #1ABC9C;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}
/* Icon Size - Small
-----------------------------------------------------------------*/
.i-small.i-rounded, .i-small.i-plain, .i-small.i-circled, .i-small.i-bordered {
margin: 4px 11px 7px 0;
font-size: 14px;
}
.i-small.i-rounded, .i-small.i-circled, .i-small.i-bordered {
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
}
.i-small.i-bordered {
line-height: 26px !important;
}
.i-small.i-plain {
width: 18px !important;
height: 18px !important;
font-size: 14px;
line-height: 18px !important;
}
/* Icon Size - Small
-----------------------------------------------------------------*/
.i-medium.i-rounded, .i-medium.i-plain, .i-medium.i-circled, .i-medium.i-bordered {
margin: 6px 13px 9px 0;
font-size: 21px;
}
.i-medium.i-rounded, .i-medium.i-circled, .i-medium.i-bordered {
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
}
.i-medium.i-bordered {
line-height: 34px !important;
}
.i-medium.i-plain {
width: 28px !important;
height: 28px !important;
font-size: 20px;
line-height: 28px !important;
}
/* Icon Size - Large
-----------------------------------------------------------------*/
.i-large.i-rounded, .i-large.i-plain, .i-large.i-circled, .i-large.i-bordered {
margin: 4px 11px 7px 0;
font-size: 42px;
}
.i-large.i-rounded, .i-large.i-circled, .i-large.i-bordered {
width: 64px !important;
height: 64px !important;
line-height: 64px !important;
}
.i-large.i-bordered {
line-height: 62px !important;
}
.i-large.i-plain {
width: 48px !important;
height: 48px !important;
font-size: 42px;
line-height: 48px !important;
}
/* Icon Size - Extra Large
-----------------------------------------------------------------*/
.i-xlarge.i-rounded, .i-xlarge.i-plain, .i-xlarge.i-circled, .i-xlarge.i-bordered {
margin: 4px 11px 7px 0;
font-size: 56px;
}
.i-xlarge.i-rounded, .i-xlarge.i-circled, .i-xlarge.i-bordered {
width: 84px !important;
height: 84px !important;
line-height: 84px !important;
}
.i-xlarge.i-bordered {
line-height: 82px !important;
}
.i-xlarge.i-plain {
width: 64px !important;
height: 64px !important;
font-size: 56px;
line-height: 64px !important;
}
/* Icon Size - Extra Extra Large
-----------------------------------------------------------------*/
.i-xxlarge.i-rounded, .i-xxlarge.i-plain, .i-xxlarge.i-circled, .i-xxlarge.i-bordered {
margin: 6px 15px 10px 0;
font-size: 64px;
}
.i-xxlarge.i-rounded, .i-xxlarge.i-circled, .i-xxlarge.i-bordered {
width: 96px !important;
height: 96px !important;
line-height: 96px !important;
}
.i-xxlarge.i-bordered {
line-height: 94px !important;
}
.i-xxlarge.i-plain {
width: 80px !important;
height: 80px !important;
font-size: 64px;
line-height: 80px !important;
}