withfront/withstyle.css

Tools for frontend development especially with Bootstrap 3.x and jQuery 3.x also FontAwesome, jsCookie and more

@import url('css/margin-tools.css');
@import url('css/style/w-overlay.css');
@import url('css/style/w-style.css');
/*@import url('css/style/w-corner_ribbon.css');*/
@import url('css/padding-tools.css');
@import url('css/text-tools.css');
@import url('css/text/social-colors.css');
@import url('css/xs-tools.css');
@import url('css/sm-tools.css');
@import url('css/thirdparty/fontawesome47.css');
@import url('css/thirdparty/flag-icon-css.css');
@import url('css/thirdparty/blueimp-gallery.css');
@import url('css/thirdparty/bootstrap3to4.css');
@import url('css/thirdparty/bootstrap-datepicker.css');
@import url('css/thirdparty/bootstrap-tooltip.css');
/* @import url('css/thirdparty/bootstrap-tabs.css'); */
/* @import url('css/thirdparty/twitter-typeahead.css'); */
/* @import url('css/thirdparty/datatable-rowreorder.css'); */
@import url('css/plugins/w-slick.css');
@import url('css/widget/w-go2top.css');
@import url('css/widget/w-loader.css');
@import url('css/widget/w-appear_btn.css');
@import url('css/widget/w-bottom_btns.css');
@import url('css/widget/w-sliding-panel.css');
@import url('css/web/w-cookie_choice.css');

/* for use see https://github.com/arturmamedov/withFront/blob/master/js/form/w-honey_pot.js */
._the_email_confirm_group {
    display: none !important;
}

/* A little style for class placeholder applied on option (suggest to use in combination with: selected disabled trick) */
select option.placeholder, select option:disabled, select option[disabled], select option[disabled="disabled"] {
    color: #999999;
}

/* modal wide */
.modal-wide {
    width: 90% !important;
}
.modal-wide .modal-body {
    overflow-y: auto;
}
/* Bootstrap v3 Modal Fade CSS quick Fix [issue#17622]  */
body { padding-right: 0 !important }

/* for jq highlight */
.highlight {
    background: #00ff9e;
}

/* Bug fixes for touch drag/scroll */
.withNicescroll, .w-nicescroll {
    -ms-touch-action: auto !important;
    touch-action: auto !important;
}
.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: auto !important;
    touch-action: auto !important;
}


/* * * js gDiv() withAlert style * * */
.withAlert {
    position: fixed !important;
    top: 55px;
    left: 15%;
    width: 70%;
    text-align: center;
    z-index: 5000;
}


.showhideBox {
    cursor: pointer;
}


/* * * Bootstrap btn * * * */
/* circle */
.btn-circle, .btn-group-circle > .btn {
    border-radius: 50%;
    height: 36px;
    padding: 8px 12px;
    width: 36px;
}

/* FLAT */
.btn-flat, .btn-group-flat > .btn {
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

/* Extra Large */
.btn-xlg, .btn-group-xlg > .btn {
    font-size: 30px;
    line-height: 1.33333;
    padding: 12px 22px;
}



/* fast positions and after style="inline top,bottommleft,right: ?px" */
.relpos {
    position: relative;
}

.abspos {
    position: absolute;
}

/* or more fast way */
.rightpos {
    right: 0px;
}

.leftpos {
    left: 0px;
}

.toppos {
    top: 0px;
}

.bottompos {
    bottom: 0px;
}

/* with 5px */
.rightpos-5 {
    right: 5px;
}

.leftpos-5 {
    left: 5px;
}

.toppos-5 {
    top: 5px;
}

.bottompos-5 {
    bottom: 5px;
}
/* with 10px */
.rightpos-10 {right: 10px;}
.leftpos-10 {left: 10px;}
.toppos-10 {top: 10px;}
.bottompos-10 {bottom: 10px;}
/* with 30px */
.rightpos-30 {right: 30px;}
.leftpos-30 {left: 30px;}
.toppos-30 {top: 30px;}
.bottompos-30 {bottom: 30px;}


/* #animation: for on-target */
.target { background-color: #00e095; }
.on-target:target { animation: ontarget 8s; }
@keyframes ontarget {
    0% { background-color: #00e095; }
    100% { background-color: inherit; }
}
/* #animation: for pulse button */
.pulse-button { position: relative; }
.pulse-effect {
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-name: pulse;
    animation-timing-function: ease-out;
    border: 4px solid blue;
    border-radius: 50px;
    box-shadow: 0 0 5px #00A6D3;
    display: block;
    height: 35px;
    width: 35px;
    position: absolute;
    top: -2px;
    left: 2px;
}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(0.3);transform:scale(0.3);opacity:0.2}80%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}100%{-webkit-transform:scale(2.5);transform:scale(2.5);opacity:0}}
@-moz-keyframes pulse{0%{-moz-transform:scale(0.3);transform:scale(0.3);opacity:0.2}80%{-moz-transform:scale(1.5);transform:scale(1.5);opacity:0}100%{-moz-transform:scale(2.5);transform:scale(2.5);opacity:0}}
@-o-keyframes pulse{0%{-o-transform:scale(0.3);transform:scale(0.3);opacity:0.2}80%{-o-transform:scale(1.5);transform:scale(1.5);opacity:0}100%{-o-transform:scale(2.5);transform:scale(2.5);opacity:0}}
@keyframes pulse{0%{transform:scale(0.3);opacity:0.2}80%{transform:scale(1.5);opacity:0}100%{transform:scale(2.5);opacity:0}}

/* animation for blink */
.w-blink {animation: blinker 1s linear infinite;}
@keyframes blinker {50% {opacity: 0;}}

/* ^ ^ START: MEDIA QUERY ^ ^ */
@media (min-width: 768px) {
    /* from xs - to lg */
    /* from xs - to lg */
}

@media (max-width: 480px) {
    /* less then xs */
    .no-xs-padding {
        padding: 0px;
    }
    /* less then xs */
}

@media (max-width: 767px) and (min-width: 481px) {
    /* xs */
    /* xs*/
}

@media (min-width: 768px) and (max-width: 991px) {
    /* sm (from xs - to sm) */
    /* sm (from xs - to sm) */
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* md (from sm - to md) */
    /* md (from sm - to md) */
}

@media (min-width: 1200px) {
    /* lg */
    /* lg */
}

/* _ _ END: MEDIA QUERY _ _ */