// Extra small screen / phone
$screen-xs-min: 480px;
// Small screen / tablet
$screen-sm-min: 768px;
// Medium screen / desktop
$screen-md-min: 992px;
// Large screen / wide desktop
$screen-lg-min: 1200px;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
@mixin respondTo($media) {
@if $media=="xs" {
@media only screen and (max-width: $screen-xs-max) {
@content;
}
}
@else if $media=="sm" {
@media only screen and (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
@content;
}
}
@else if $media=="md" {
@media only screen and (max-width: $screen-md-max) and (min-width: $screen-md-min) {
@content;
}
}
@else if $media=="lg" {
@media only screen and (min-width: $screen-lg-min) {
@content;
}
}
}
@mixin respondToAbove($media) {
@if $media=="xs" {
@media only screen and (min-width: $screen-xs-max) {
@content;
}
}
@else if $media=="sm" {
@media only screen and (min-width: $screen-sm-min) {
@content;
}
}
@else if $media=="md" {
@media only screen and (min-width: $screen-md-min) {
@content;
}
}
@else if $media=="lg" {
@media only screen and (min-width: $screen-lg-min) {
@content;
}
}
}
@mixin respondToBelow($media) {
@if $media=="xs" {
@media only screen and (max-width: $screen-xs-max) {
@content;
}
}
@else if $media=="sm" {
@media only screen and (max-width: $screen-sm-max) {
@content;
}
}
@else if $media=="md" {
@media only screen and (max-width: $screen-md-max) {
@content;
}
}
@else if $media=="lg" {
@media only screen {
@content;
}
}
}
@mixin respondToTablet {
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@content;
}
}
@mixin respondToSmall-n-Medium {
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
@content;
}
}
@mixin respondToMobile() {
@include respondTo(xs) {
@content
}
}
@mixin respondToDesktop() {
@include respondToAbove(md) {
@content
}
}
@mixin clearfix {
&:before {
content: "";
display: table;
}
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
@mixin rounded_corners($radius: 5px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin input {
padding: 5px;
margin: 5px 0;
border: 1px solid $border_color;
height: 34px;
border-radius: 4px;
display: block;
width: 80%;
max-width: 80%;
@include respondTo(xs) {
width: 100%;
max-width: 100%;
}
outline: none;
&:focus {
border: 1px solid darken($border_color, 25%);
}
}
// Provides a cross-browser method to implement `display: inline-block;`
@mixin inline-block($alignment: middle) {
display: -moz-inline-stack;
display: inline-block;
@if $alignment and $alignment !=none {
vertical-align: $alignment;
}
*vertical-align: auto;
zoom: 1;
*display: inline;
}
@mixin background_gradient($min_color, $max_color, $color_stop1:0%, $color_stop2:100%) {
background: $min_color;
background: -moz-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -o-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -webkit-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -ms-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -webkit-gradient(linear, left top, left bottom, color-stop($color_stop1/100%, $min_color), color-stop($color_stop2/100%, $max_color));
background: linear-gradient(to bottom, $min_color $color_stop1, $max_color $color_stop2);
zoom: 1; // fix for ie7 issue
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
}
@mixin box-shadow($value) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}
@mixin font-size($sizeValue) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
//-------------
@mixin shadow-box {
border: 1px solid $border_color;
}
@mixin transition($value) {
transition: $value;
-moz-transition: $value;
-webkit-transition: $value;
}
@mixin flex {
float: none;
display: inline-block;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex-grow($value) {
-webkit-box-flex: $value;
-webkit-flex: $value;
-ms-flex: $value;
flex: $value;
}
@mixin flex-wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin flex-direction($value) {
-webkit-flex-direction: $value;
flex-direction: $value;
}
@mixin align-items($value) {
-ms-align-items: $value;
-moz-align-items: $value;
-webkit-align-items: $value;
align-items: $value;
}
@mixin justify-content($value) {
-ms-justify-content: $value;
-moz-justify-content: $value;
-webkit-justify-content: $value;
justify-content: $value;
}
@mixin flex-basis($value) {
-webkit-box-flex: $value;
-webkit-flex: $value;
-ms-flex: $value;
flex: $value;
}
@mixin transform($value) {
-ms-transform: $value;
-webkit-transform: $value;
transform: $value;
}
@mixin fontAwesome($fsize, $ascii, $fcolor) {
font: normal normal normal $fsize/1 FontAwesome;
content: $ascii;
color: $fcolor;
}
@mixin input-placeholder-font($value1, $value2) {
input::-webkit-input-placeholder {
color: $border_color;
@include font-size(1.2);
}
input::-moz-placeholder {
color: $border_color;
@include font-size(1.2);
}
input:-moz-placeholder {
color: $border_color;
@include font-size(1.2);
}
input:-ms-input-placeholder {
color: $border_color;
@include font-size(1.2);
}
}
@mixin radio-button {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
z-index: 1;
height: 25px;
cursor: pointer;
&+label,
&+span {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 20px;
margin-top: 10px;
line-height: 15px;
height: 15px;
&:before {
font-weight: normal;
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: absolute;
left: 0;
top: 0;
bottom: 1px;
background-color: #fff;
@include rounded_corners(50%);
border: 1px solid darken($border_color, 15%);
}
&:after {
@include transform(scale(1));
@include transition(linear all .25s);
content: "";
}
}
&:checked+label:after,
&:checked+span:after {
position: absolute;
background: #000;
@include rounded_corners(50%);
width: 15px;
height: 15px;
left: 0;
top: 0;
bottom: 4px;
pointer-events: none;
@include transform(scale(.5));
}
}
@mixin check-button {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
z-index: -1;
height: 25px;
cursor: pointer;
&:checked+label:after {
content: '';
position: absolute;
width: 9px;
height: 4.5px;
left: 3px;
bottom: 7px;
border-color: $secondary_color;
border-style: solid;
border-width: 0 0 2px 2px;
transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
pointer-events: none;
}
&+label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 20px;
line-height: 15px;
height: 15px;
&:before {
font-weight: normal;
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid darken($border_color, 15%);
}
}
}
@mixin theme-shadow {
@include box-shadow(0px 1px 4px 0px rgba(0, 0, 0, 0.2));
}
@mixin hindi {
html[lang='hi'] & {
@content
}
}
@mixin rtl {
html[lang='ar'] & {
@content
}
}
@mixin section_heading {
@include font-size(2.0);
text-transform: uppercase;
color: $header_color;
font-weight: bold;
line-height: 1;
margin: 0 0 $pdp_detail_gap;
font-family: $font-primary;
}
@mixin secondary_header {
margin: $home-space 0 $pdp_detail_gap;
line-height: 1;
font-weight: 300;
@include font-size(2.2);
color: $header_color;
font-family: $font-primary;
text-transform: capitalize;
}
@mixin close-icon {
font-size: 0 !important;
position: absolute;
height: 40px;
width: 40px;
right: 20px;
top: 20px;
font-size: 0px;
cursor: pointer;
z-index: 9;
border: 0;
background: transparent;
&:before,
&:after {
content: '';
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
position: absolute;
height: 2px;
background: white;
width: 50%;
transition: all .25s;
opacity: 0;
}
&:before {
transform: rotate(45deg);
opacity: 1;
}
&:after {
transform: rotate(-45deg);
opacity: 1;
}
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin animation($values){
-webkit-animation: ($values);
-moz-animation: ($values);
-ms-animation: ($values);
animation: ($values);
}
@mixin on-circle($item-count, $circle-size, $item-size) {
position: relative;
width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none;
>* {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -($item-size / 2);
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-of-type(#{$i}) {
@include transform(rotate($rot * 1deg) translateY(-($circle-size / 2)) rotate($rot * -1deg));
/* &:before{
@include transform(rotate($rot * 1deg));
} */
}
$rot: $rot+$angle;
}
}
}
$shadow : 0 6px 10px -2px rgba(0, 0, 0, .25);
$solid: #b71c1c;
$solid_2: #0af;
$dbc: #eee;
#body {
padding: 1px;
background: $dbc;
min-height: 100vh;
font-family: 'Josefin Sans', sans-serif;
text-transform: captalize;
letter-spacing: 2px;
&, & *{
transition: all .25s;
&:before,&:after{
transition: all .25s;
}
}
.out-wrap {
position: relative;
padding: 0 50px 50px;
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .25);
width: 50%;
margin: 50px auto;
background: $solid;
}
}
$cir-size: 300px;
$itm-size: $cir-size/5;
$menu-timing: 0.25s;
#rad{
position: relative;
position: relative;
width: $cir-size + ($itm-size/1.5)*2;
height: $cir-size + ($itm-size/1.5)*2;
margin: 100px auto;
padding: $itm-size/1.5;
border-radius: 50%;
background: transparent;
overflow: hidden;
.list{
@include on-circle(10, $cir-size, $itm-size);
margin: auto;
position: relative;
z-index: 2;
@include transform(scale(0));
>li{
text-align: center;
line-height: $itm-size;
border-radius: 50%;
cursor: pointer;
a{
text-decoration: none;
position: relative;
z-index: 2;
i:before{
color: #999;
font-size: $itm-size/3;
transition: all .55s;
}
}
&.active{
a i:before{
color: #fff;
}
}
}
}
.pointer{
position: absolute;
left: ($itm-size/1.5)*2;
right: ($itm-size/1.5)*2;
top: ($itm-size/1.5)*2;
bottom: ($itm-size/1.5)*2;
margin: auto;
border-radius: 50%;
pointer-events: none;
z-index: 1;
box-shadow: none;
&:before{
content: '';
background: #d32f2f;
left: 0;
right: 0;
top: -($itm-size/1.5)*2;
width: ($cir-size*3)/10;
height: ($cir-size*3)/10;
margin: auto;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
@include transform(scale(0));
}
&:after{
content: '';
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 50%;
z-index: 99;
position: absolute;
background: #eee;
@include transform(scale(0));
}
}
button{
height: $itm-size;
width: $itm-size;
z-index: 3;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 0;
cursor: pointer;
box-shadow: none;
background: transparent;
border-radius: 50%;
&:focus{
outline: none;
}
> span {
height: 2px;
background: #d32f2f;
width: 50%;
position: absolute;
@include transition(all $menu-timing 0.25s ease);
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
&:first-child {
bottom: auto;
left: auto;
top: 30%;
right: 25%;
}
&:last-child {
top: auto;
right: auto;
bottom: 30%;
left: 25%;
}
&:nth-child(2), &:nth-child(3) {
@include transition(all $menu-timing ease);
}
}
}
&.open{
background: #fff;
.list{
@include transform(scale(1));
}
.pointer{
box-shadow: 0 0 0 $itm-size/1.5 #fff;
&:after, &:before{
@include transform(scale(1));
}
}
button{
span {
&:first-child, &:last-child {
@include transition(all $menu-timing ease);
width: 0;
}
&:nth-child(2) {
@include transition(all $menu-timing 0.15s ease);
@include transform(rotate(45deg));
}
&:nth-child(3) {
@include transition(all $menu-timing 0.15s ease);
@include transform(rotate(135deg));
}
}
}
}
}
!
