8889841chome/clixcotz/gj.clix.co.tz/wp-content/themes/superio/sass/template/_form.scss000064400000027576150514226620023605 0ustar00// btn .btn-action-icon{ height: 30px; line-height: 30px; text-align: center; width: 30px; @include border-radius($border-radius-base); display: inline-block; color: $theme-color; background-color: var(--superio-theme-color-007); @include transition(all 0.3s ease-in-out 0s); font-size:12px; position:relative; &:focus, &:hover{ color: #fff; background-color: $theme-color; } &:before{ content:''; position:absolute; display: block; @include size(100%,100%); top:0; left:0; z-index:1; background-color:#fff; @include opacity(0); background-image:url(#{$image-theme-path}loading.gif); background-repeat: no-repeat; background-position:center center; background-size: 15px auto; @include transition(all 0.3s ease-in-out 0s); } &.loading{ &:before{ @include opacity(0.9); } } } .tooltip-inner{ font-size: 12px; padding:6px 15px; @include border-radius($border-radius-base); } .btn-icon i{ font-size: 24px; line-height: 1; vertical-align: middle; display:inline-block; @media(min-width: 1200px){ font-size: 28px !important; .pre{ @include rtl-margin-right(12px !important); } .next{ @include rtl-margin-left(12px !important); } } } .btn-show-filter i{ @media(min-width: 1200px){ font-size: 25px !important; vertical-align: middle; } } .btn-link-job, .button, .btn{ outline:none !important; .pre{ display: inline-block; @include rtl-margin-right(8px); } .next{ display: inline-block; @include rtl-margin-left(8px); } } .btn-candidate-alert, .btn-job-alert{ &:before{ content: "\f142"; font-family: "Flaticon"; @include rtl-margin-right(10px); font-size: 25px; line-height:0; vertical-align: sub; display: inline-block; } } .btn-outline-light{ @include button-variant-outline( #FFFFFF, transparent, #FFFFFF, $brand-primary, #FFFFFF, $brand-primary); } .btn-shop{ padding:0 0 3px; font-size:14px; font-weight:500; text-transform:uppercase; border-bottom:2px solid #f43434; } .btn-outline{ @include button-outline(default, #fff, $theme-color ); @include button-outline(primary, $brand-primary, #fff ); @include button-outline(success, $brand-success, #FFFFFF ); @include button-outline(info, $brand-info, #FFFFFF ); @include button-outline(danger, $brand-danger, #FFFFFF ); @include button-outline(warning, $brand-warning, #FFFFFF ); } .btn-inverse{ @include button-inverse(primary, $brand-primary, #FFFFFF ); @include button-inverse(success, $brand-success, #FFFFFF ); @include button-inverse(info, $brand-info, #FFFFFF ); @include button-inverse(danger, $brand-danger, #FFFFFF ); @include button-inverse(warning, $brand-warning, #FFFFFF ); @include button-inverse(theme, $theme-color, #FFFFFF ); } .btn-compare.btn-outline{ color:#4c4c4c; background:#fff; border:1px solid #e9e9e9; height:$input-height-base; &:hover,&:active{ color: #fff; background:#4c4c4c; border-color:#4c4c4c; } } .view-more-btn{ i{ @include rtl-margin-left(12px); } } .reamore{ font-size:14px; font-weight:500; color:$theme-color !important; text-transform:uppercase; padding:0 0 4px; border-bottom:2px solid $theme-color; i{ @include rtl-margin-left(8px); } } .btn-browse{ text-transform:uppercase; font-size: 12px; padding: 10px 15px; border:1px solid #eaeff5; @include border-radius(50px); line-height: 1.42857143; &:hover,&:focus{ background:$theme-color; color: #fff; border-color:$theme-color; } } .apus-loadmore-btn{ display:inline-block; font-size:14px; font-weight:500; background:$theme-color; color:#fff; text-transform:uppercase; @include transition(all 0.2s ease-in-out 0s); padding:12px 30px; @include border-radius(4px); &:hover,&:focus{ color:#fff; background:$brand-primary; } } .viewmore-products-btn{ position:relative; &:before{ content: ''; position: absolute; top: -2px; left: -2px; @include size(calc(100% + 4px),calc(100% + 4px)); z-index:2; @include opacity(0); background:rgba(255,255,255,0.9) url(#{$image-theme-path}loading-quick.gif) no-repeat scroll center center / 20px auto; } &.loading{ &:before{ @include opacity(1); } } } button:focus, .btn:focus{ outline:none !important; @include box-shadow(none !important); } .radius-0{ @include border-radius(0 !important); } .radius-circle{ @include border-radius(100px !important); } .btn-3d{ @include box-shadow(0 0 10px 0 var(--superio-theme-color-08)); } .read-more{ font-size:12px; font-weight:600; text-transform:uppercase; color:$theme-color; } .btn-white{ background: #fff; color: $link-color; border-color:#fff; &:active, &:hover{ background: #fff; color: $link-color; border-color:#fff; text-decoration: underline; } } .btn-purple{ background: #bc7cbf; color: #fff; border-color:#bc7cbf; &:active, &:hover{ color:#fff; background:darken(#bc7cbf, 5%); border-color:darken(#bc7cbf, 5%); } } .btn-brown { background: transparent; color:#c0c0c0; border-color: #4e4f4f; &:focus, &:hover{ color:#fff; background:transparent; border-color: #fff; } } .btn-back { padding: 8px 15px; @include border-radius(2px); background: rgba(255, 58, 114, .1); color:#ff7c39; border-color: #ff7c39; &:focus, &:hover{ color:#fff; background:rgba(255, 58, 114, 1); border-color: #ff7c39; } } .btn-white.btn-br-white{ background: #fff; color: $link-color; border-color:#fff; &:active, &:hover{ color: $link-color; background:darken(#fff,15%); border-color:darken(#fff,15%); } } .btn-readmore{ position:relative; display: inline-block; padding:0 0 2px; color: $theme-color; &:after{ content:''; position:absolute; bottom:0; @include rtl-right(0); @include size(0,1px); display: block; background:$theme-color; @include transition(all 0.4s ease-in-out 0s); } i{ display: inline-block; @include rtl-margin-left(4px); font-size: 12px; } span{ display: inline-block; @include rtl-margin-right(4px); font-size: 21px; line-height: 1; } &:hover{ &:after{ @include rtl-left(0); width:100%; } } &.green-color{ color: #34A853; &:after{ background-color: #34A853; } } &.white-color{ color: #fff; &:after{ background-color: #fff; } } } .btn-lighten{ border-color:#fff; color:#fff; background: transparent; &:hover{ color: #fff; background: transparent; border-color:#fff; } } .btn-outline.btn-white{ background: transparent; color: #fff; border-color:#fff; &:active, &:hover{ color: #fff; background: $theme-color; border-color: $theme-color; } } .btn-pink{ @include button-variant(#fff, #e3a3a2, #e3a3a2); } .btn-primary.btn-inverse{ &:active, &:hover{ background:#fff !important; color: $brand-primary !important; border-color:$brand-primary !important; } } .btn-theme{ color: #fff; background-color: $theme-color; border-color: $theme-color; &:hover,&:focus,&:active{ color: #fff; background-color: $theme-color-hover; border-color: $theme-color-hover; } } .btn-dark { @include button-variant(#252525,#cccccc, #cccccc); } .btn-theme-second{ @include button-variant(#fff, $theme-color-second, $theme-color-second); } .btn-theme.btn-outline{ color: $theme-color; border-color: $theme-color; background: transparent; &:hover,&:active{ color: #fff; background: $theme-color; border-color: $theme-color; } } .more-link{ color: $theme-color; font-size: 14px; &:hover{ text-decoration: underline; } } .btn-shaded-sm{ position: relative; &:before{ content: ''; position: absolute; top:0px; left: 0px; border-width:20px 10px; border-style: solid; border-color: transparent transparent transparent rgba(255,255,255,0.4); } } /* Search ------------------------------------------------*/ .search-popup{ .dropdown-menu{ padding: 10px; } } .btn-action{ @include border-radius(4px); cursor: pointer; display: inline-block; font-size: 11px; font-weight: 900; line-height: 30px; margin-bottom: 0; padding: 0px 10px; text-align: center; text-transform: uppercase; @include transition(all 0.4s ease 0s); vertical-align: middle; white-space: nowrap; } .searchform{ .input-search{ padding:15px; @include rtl-border-right(0); line-height: 1.5; } .btn-search{ vertical-align: top; color: #adafac; padding:12px $padding-xs-horizontal; } .input-group-btn{ line-height: 100%; } } // Search categories .search-category{ .btn{ @include rtl-margin-left(10px !important); @include border-radius($border-radius-small !important ); } .wpo-search-inner{ label.form-control{ border:none; border-bottom-right-radius: $border-radius-small; border-top-right-radius: $border-radius-small; } } select { border:none; text-transform: capitalize; font-weight: 500; } } /* comment form ------------------------------------------------*/ .chosen-container{ width: 100% !important; } .input-group-form{ @include border-radius(3px); background: $input-group-form-bg; margin: $input-group-form-margin; .form-control-reversed{ border: 0px; background: $input-form-bg; color: darken($white, 20%); @include font-size(font-size,14px); height: 34px; &:hover, &:focus{ @include box-shadow(none); } } .input-group-addon{ border: 0; background: $input-form-bg; @include border-left-radius(4px); } } .btn-app{ @include transition(all 0.3s ease-in-out 0s); white-space: nowrap; font-size: 13px; line-height: 1.4; padding:7px 15px; @media(min-width: 1200px){ padding:9px 22px; font-size: 14px; } border:0; @include border-radius($border-radius-base); color: $theme-color; background: var(--superio-theme-color-01); &:hover,&:focus{ background: $theme-color; color: #fff; } .app-icon{ font-size: 25px; @media(min-width: 1200px){ font-size: 28px; } width: 26px; line-height: 1; display: inline-block; } .name-app{ @include transition(all 0.3s ease-in-out 0s); margin:0; font-size: 14px; font-weight: 500; @media(min-width: 1200px){ font-size: 16px; } } .inner{ @include rtl-padding-left(15px); @media(min-width: 1200px){ @include rtl-padding-left(20px); } } &.st_white{ color: #fff; background-color: rgba(#fff,0.1); &:hover,&:focus{ background: rgba(#fff,0.2); color: #fff; } } &.st_dark{ background: #202124; color: #fff; &:hover,&:focus{ color: #fff; background-color: $theme-color; } } &.st_blue{ background: #fff; color: #131A51; } } .btn-red-outline{ color: #D93025; background-color: #fff; border-color: #fff; &:hover,&:focus{ color: #D93025; background-color: #fff; border-color: #fff; text-decoration: underline; } } .btn-theme-lighten{ border:0; padding:10px $padding-base-horizontal; background: var(--superio-theme-color-007); color: $theme-color; &:hover,&:focus{ color: #fff; background: $theme-color; } } .view_all{ i{ @include rtl-margin-left(2px); display: inline-block; } } .btn-login{ border:1px solid var(--superio-theme-color-001); padding:9px $padding-base-horizontal; background: var(--superio-theme-color-007); color: $theme-color; a{ @include transition(all 0.3s ease-in-out 0s); } &,a{ color: $theme-color; } &:hover,&:focus{ background: $theme-color; border-color: $theme-color; &,a{ color: #fff; } } }