.border-radius (@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.horizontal_gradient (@position:top,@startColor: #eee, @endColor: white) {
background-color: @startColor;
background-image: -webkit-linear-gradient(@position, @startColor, @endColor);
background-image: -moz-linear-gradient(@position, @startColor, @endColor);
background-image: -ms-linear-gradient(@position, @startColor, @endColor);
background-image: -o-linear-gradient(@position, @startColor, @endColor);
}
//......Profile picture with social icon style.............
.picture__picture(@dimension:40px,@social:'facebook',@iconDimension:18px,@topPadding:1px,@iconFontSize:12px){
.picture_block,.text_block{
display: inline-block;
vertical-align: middle;
}
.picture_block{
height: @dimension;
width: @dimension;
min-width:@dimension;
position: relative;
img,.img{
max-width: 100%;
.border-radius(50%);
}
.icon,.__icon{
height: @iconDimension;
width: @iconDimension;
padding-top: @topPadding;
font-size: @iconFontSize;
text-align: center;
.border-radius(50%);
position: absolute;
bottom: 0;
right: -7px;
color: @white;
.background(@social);
.background (@social) when (@social = "twitter"){
background: @twitter;
}
.background (@social) when (@social = "facebook"){
background: @facebook;
}
.background (@social) when (@social = "tumblr"){
background: @tumblr;
}
.background (@social) when (@social = "pinterest"){
background: @pinterest;
}
.background (@social) when (@social = "medium"){
background: @medium;
}
.background (@social) when (@social = "linked"){
background: @linked;
}
.background (@social) when (@social = "instagram"){
background: @instagram;
}
.background (@social) when (@social = "wordpress"){
background: @wordpress;
}
.background (@social) when (@social = "google-b"){
background: @google-b;
}
}
}
.picture_block_background{
.img{
background-repeat: no-repeat!important;
-webkit-background-size: cover !important;
background-size: cover !important;
background-position: top center !important;
height: 100%;
max-width: 100%;
width: 100%;
}
}
.with-border{
border:1px solid rgba(152, 158, 181, 0.14);
}
.rounded_image{
border-radius: 50%;
}
.text_block{
margin-left: 14px;
.text, .__text{
color: @c-darkBlack;
font-size: 14px;
.word_break;
}
.sub_text{
font-size: 12px;
color: @ds-lightGray;
.word_break;
}
}
}
//......Radio Input style.............
.radio_input_image(@radioDimension:20px,@radioFontSize:18px){
display: inline-block;
vertical-align: middle;
input[type="radio"]{
display: none!important;
position: relative;
z-index: -99999;
}
input[type="radio"] + label{
cursor: pointer;
position: relative;
margin-bottom: 0;
font-size: @radioFontSize;
padding-left: @radioDimension + 10px;
color: @ds-lightGray;
&:after,&:before{
position: absolute;
content: '';
//left: 0;
top: 50%;
transform: translateY(-50%);
//background-size: 100%;
//background-repeat: no-repeat;
//background-position: center center;
//height: @radioDimension;
//width: @radioDimension;
font-family: 'contentstudio' !important;
font-size:@radioDimension;
//.transition;
}
&:after{
//background: url("../../img/form/radio_deactive.svg");
content: '\e94c';
color: @ds-lightGray;
}
&:before{
opacity: 0;
visibility: hidden;
//background: url("../../img/form/radio_active.svg");
content: '\e94b';
color: @green2;
}
}
input[type="radio"] + label.radio_left{
&:after,&:before{
left: 0;
}
}
input[type="radio"] + label.radio_right{
padding-left: 0;
padding-right: @radioDimension + 10px;
&:after,&:before{
right: 0;
}
}
input[type="radio"] + label.no_text{
height: @radioDimension;
width: @radioDimension;
display: block;
&:after,&:before{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
input[type="radio"]:checked + label{
color: @c-darkBlack;
&:before{
opacity: 1;
visibility: visible;
}
&:after{
opacity: 0;
visibility: hidden;
}
}
input[type="radio"]:disabled + label{
cursor: not-allowed;
opacity: .5;
&:after{
content: '\e94c';
color: @ds-lightGray;
//background: url("../../img/form/radio_deactive.svg") !important;
}
&:before{
opacity: 1;
content: '\e94c';
visibility: visible;
color: @ds-lightGray;
//background: url("../../img/form/radio_deactive.svg")!important;
}
}
input[type="radio"]:checked:disabled + label{
cursor: not-allowed;
&:after{
content: '\e94b';
color: @ds-lightGray;
//background: url("../../img/form/radio_disable.svg") !important;
}
&:before{
opacity: 1;
visibility: visible;
color: @ds-lightGray;
//background: url("../../img/form/radio_disable.svg")!important;
content: '\e94b';
}
}
}
//......Checkbox Input style.............
.checkbox_input_image(@radioDimension:20px,@radioFontSize:18px){
display: inline-block;
vertical-align: middle;
input[type="checkbox"]{
display: none!important;
position: relative;
z-index: -99999;
}
input[type="checkbox"] + label{
cursor: pointer;
position: relative;
margin-bottom: 0;
font-size: @radioFontSize;
padding-left: @radioDimension + 10px;
color: @ds-lightGray;
&:after,&:before{
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
//background-size: 100%;
//background-repeat: no-repeat;
//background-position: center center;
//height: @radioDimension;
font-size: @radioDimension;
//width: @radioDimension;
font-family: 'contentstudio' !important;
//.transition;
}
&:after{
//background: url("../../img/form/deactive_checkbox.svg");
content: '\e95b';
color: @ds-lightGray;
}
&:before{
opacity: 0;
visibility: hidden;
color: @green2;
content: '\e90c';
//background: url("../../img/form/active_checkbox.svg");
}
}
input[type="checkbox"] + label.top_side{
&:after,&:before{
top: 2px;
transform:none;
}
}
input[type="checkbox"] + label.checkbox_left{
&:after,&:before{
left: 0;
}
}
input[type="checkbox"] + label.checkbox_right{
padding-left: 0;
padding-right: @radioDimension + 10px;
&:after,&:before{
right: 0;
}
}
input[type="checkbox"] + label.no_text{
height: @radioDimension;
width: @radioDimension;
display: block;
&:after,&:before{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
input[type="checkbox"] + label.with_check_icon{
&:after{
display: none !important;
}
&:before{
content: '\e90b';
}
}
input[type="checkbox"]:checked + label{
color: @c-darkBlack;
&:before{
opacity: 1;
visibility: visible;
}
&:after{
opacity: 0;
visibility: hidden;
}
}
input[type="checkbox"]:checked:disabled + label{
cursor: not-allowed;
&:after{
color: @ds-lightGray;
//background: url("../../img/form/disable_checkbox.svg") !important;
}
&:before{
opacity: 1;
color: @ds-lightGray;
visibility: visible;
//background: url("../../img/form/disable_checkbox.svg")!important;
}
}
input[type="checkbox"]:disabled + label{
cursor: not-allowed;
&:after{
color: @ds-lightGray;
visibility: visible;
opacity: .8;
//background: url("../../img/form/disable_checkbox.svg") !important;
}
&:before{
//background: url("../../img/form/disable_checkbox.svg")!important;
}
}
}
//placeholder color change style
.placeholder(@color:@ds-lightGray){
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: @color;
}
::-moz-placeholder { /* Firefox 19+ */
color: @color;
}
:-ms-input-placeholder { /* IE 10+ */
color: @color;
}
:-moz-placeholder { /* Firefox 18- */
color: @color;
}
}
//icon hover / normal state
.icon_item(@dimension,@normal,@hover){
.icon,._icon{
background-repeat: no-repeat!important;
-webkit-background-size: 100% !important;
background-size: auto !important;
background-position: center center !important;
height:@dimension;
width:@dimension;
background: url(@normal);
position: relative;
//top: -1px;
cursor: pointer;
}
.icon.d-block , ._icon.d-block{
margin: 0 auto;
}
.icon_text,.icon,._icon{
display: inline-block;
vertical-align: middle;
}
&:hover{
.icon,._icon{
background: url(@hover);
}
}
}
//circle boxes style
.circle_box(@dimension:20px,@border:1px solid @white,@background:@ds-lightGray){
float: left;
height: @dimension;
width: @dimension;
.border-radius(50%);
text-align: center;
overflow: hidden;
margin-left: -7px;
border:@border;
background: @background;
img{
max-width: 100%;
}
.text{
font-weight: bold;
color: @white;
letter-spacing: 0.4px;
font-size: 10px;
}
}