.wheel-container { position:relative; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; cursor:pointer; z-index:500; } .wheel-container .wheel-inner { position:absolute; border-radius:100%; /* size set via minDistance and maxDistance */ margin:2em -2em -2em 2em; transform:scale(0)rotate(90deg); -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .wheel-container .wheel-center { background:#666; width:4em; height:4em; border-radius:100%; text-align:center; line-height:4.5em; } .wheel-container .wheel-center .fa { font-size:1.8em; color:white; } .wheel-container .wheel-inner .wheel-option-container { position:absolute; margin: -2em 2em 2em -2em; } .wheel-container .wheel-inner .wheel-option-container .wheel-option { position:relative; width:4em; height:4em; text-align:center; line-height:4.5em; box-sizing:border-box; display:block; border-radius:100%; color:white; } .wheel-container .wheel-inner .wheel-option-container .wheel-option .fa { font-size:1.8em; } .wheel-container.in { } .wheel-container.in .wheel-inner { transform:scale(1)rotate(0deg); } .wheel-container.in .wheel-center { } .wheel-container.in .wheel-center .fa { } .wheel-container.in .wheel-inner .wheel-option-container { } .wheel-container.in .wheel-option { } .wheel-container.in .wheel-inner .wheel-option-container .wheel-option .fa { } /* color template: N: 1, 2, 3 ... 99999 etc; FONTAWESOMEICON: facebook | envelope-o | etc; COLOR_HOVER: color when opened; COLOR_MUTED: color when mouse over; .wheel-container .wheel-option.option-index-N { background:#COLOR_MUTED; } OR .wheel-container .wheel-option.icon-FONTAWESOMEICON { background:#COLOR_MUTED; } div.wheel-container[data-selected="N"] .wheel-option.option-index-N { background:#COLOR_HOVER; } div.wheel-container[data-selected="N"] .wheel-center { background:#COLOR_HOVER; } */ /* ----------- Flat UI Colors -------------- */ .wheelzator-flat-ui .wheel-container .wheel-option.option-index-1 { background:#1abc9c; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-2 { background:#2ecc71; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-3 { background:#3498db; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-4 { background:#9b59b6; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-5 { background:#34495e; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-6 { background:#f1c40f; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-7 { background:#e67e22; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-8 { background:#e74c3c; } .wheelzator-flat-ui .wheel-container .wheel-option.option-index-9 { background:#95a5a6; } .wheelzator-flat-ui div.wheel-container[data-selected="1"] .wheel-option.option-index-1 { background:#16a085; } .wheelzator-flat-ui div.wheel-container[data-selected="2"] .wheel-option.option-index-2 { background:#27ae60; } .wheelzator-flat-ui div.wheel-container[data-selected="3"] .wheel-option.option-index-3 { background:#2980b9; } .wheelzator-flat-ui div.wheel-container[data-selected="4"] .wheel-option.option-index-4 { background:#8e44ad; } .wheelzator-flat-ui div.wheel-container[data-selected="5"] .wheel-option.option-index-5 { background:#2c3e50; } .wheelzator-flat-ui div.wheel-container[data-selected="6"] .wheel-option.option-index-6 { background:#f39c12; } .wheelzator-flat-ui div.wheel-container[data-selected="7"] .wheel-option.option-index-7 { background:#d35400; } .wheelzator-flat-ui div.wheel-container[data-selected="8"] .wheel-option.option-index-8 { background:#c0392b; } .wheelzator-flat-ui div.wheel-container[data-selected="9"] .wheel-option.option-index-9 { background:#7f8c8d; } .wheelzator-flat-ui div.wheel-container[data-selected="1"] .wheel-center { background:#16a085; } .wheelzator-flat-ui div.wheel-container[data-selected="2"] .wheel-center { background:#27ae60; } .wheelzator-flat-ui div.wheel-container[data-selected="3"] .wheel-center { background:#2980b9; } .wheelzator-flat-ui div.wheel-container[data-selected="4"] .wheel-center { background:#8e44ad; } .wheelzator-flat-ui div.wheel-container[data-selected="5"] .wheel-center { background:#2c3e50; } .wheelzator-flat-ui div.wheel-container[data-selected="6"] .wheel-center { background:#f39c12; } .wheelzator-flat-ui div.wheel-container[data-selected="7"] .wheel-center { background:#d35400; } .wheelzator-flat-ui div.wheel-container[data-selected="8"] .wheel-center { background:#c0392b; } .wheelzator-flat-ui div.wheel-container[data-selected="9"] .wheel-center { background:#7f8c8d; } /* ------- yes or no -------- */ .wheelzator-yes-no .wheel-container .wheel-option.option-index-1 { background:#88FF88; } .wheelzator-yes-no .wheel-container .wheel-option.option-index-2 { background:#FF8888; } .wheelzator-yes-no div.wheel-container[data-selected="1"] .wheel-option.option-index-1 { background:#00FF00; } .wheelzator-yes-no div.wheel-container[data-selected="2"] .wheel-option.option-index-2 { background:#FF0000; } .wheelzator-yes-no div.wheel-container[data-selected="1"] .wheel-center { background:#88FF88; } .wheelzator-yes-no div.wheel-container[data-selected="2"] .wheel-center { background:#FF8888; } /*-------- 4 levels of importance (bootstrap Success,Info,Warning,Danger colors) -------- */ .wheelzator-importance .wheel-container .wheel-option.option-index-1 { background:#95d195; } .wheelzator-importance .wheel-container .wheel-option.option-index-2 { background:#95d6e9; } .wheelzator-importance .wheel-container .wheel-option.option-index-3 { background:#f5ca8c; } .wheelzator-importance .wheel-container .wheel-option.option-index-4 { background:#e68f8d; } .wheelzator-importance div.wheel-container[data-selected="1"] .wheel-option.option-index-1 { background:#5cb85c; } .wheelzator-importance div.wheel-container[data-selected="2"] .wheel-option.option-index-2 { background:#31b0d5; } .wheelzator-importance div.wheel-container[data-selected="3"] .wheel-option.option-index-3 { background:#f0ad4e; } .wheelzator-importance div.wheel-container[data-selected="4"] .wheel-option.option-index-4 { background:#d9534f; } .wheelzator-importance div.wheel-container[data-selected="1"] .wheel-center { background:#5cb85c; } .wheelzator-importance div.wheel-container[data-selected="2"] .wheel-center { background:#31b0d5; } .wheelzator-importance div.wheel-container[data-selected="3"] .wheel-center { background:#f0ad4e; } .wheelzator-importance div.wheel-container[data-selected="4"] .wheel-center { background:#d9534f; } /* ------------- Blueish (another background) (using icon class) -------------- */ .wheelzator-blueish .wheel-container .wheel-option.icon-home { background:#5AAFFF; } .wheelzator-blueish .wheel-container .wheel-option.icon-headphones { background:#519DE5; } .wheelzator-blueish .wheel-container .wheel-option.icon-camera { background:#4383BF; } .wheelzator-blueish .wheel-container .wheel-option.icon-cog { background:#2D577F; } .wheelzator-blueish .wheel-container .wheel-option.icon-user { background:#162C40; } .wheelzator-blueish div.wheel-container[data-icon="home"] .wheel-option.icon-home { background:#0286FF; } .wheelzator-blueish div.wheel-container[data-icon="headphones"] .wheel-option.icon-headphones { background:#0279E5; } .wheelzator-blueish div.wheel-container[data-icon="camera"] .wheel-option.icon-camera { background:#0165BF; } .wheelzator-blueish div.wheel-container[data-icon="cog"] .wheel-option.icon-cog { background:#01437F; } .wheelzator-blueish div.wheel-container[data-icon="user"] .wheel-option.icon-user { background:#002240; } .wheelzator-blueish div.wheel-container[data-icon="home"] .wheel-center { background:#0286FF; } .wheelzator-blueish div.wheel-container[data-icon="headphones"] .wheel-center { background:#0279E5; } .wheelzator-blueish div.wheel-container[data-icon="camera"] .wheel-center { background:#0165BF; } .wheelzator-blueish div.wheel-container[data-icon="cog"] .wheel-center { background:#01437F; } .wheelzator-blueish div.wheel-container[data-icon="user"] .wheel-center { background:#002240; } /* extra stuff for blueish */ /* icon: popup effect on hover */ .wheelzator-blueish .wheel-option { box-shadow:0px 0px 0px 5px white; transform:scale(1); -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .wheelzator-blueish div.wheel-container[data-icon="home"] .wheel-option.icon-home, .wheelzator-blueish div.wheel-container[data-icon="headphones"] .wheel-option.icon-headphones, .wheelzator-blueish div.wheel-container[data-icon="camera"] .wheel-option.icon-camera, .wheelzator-blueish div.wheel-container[data-icon="cog"] .wheel-option.icon-cog , .wheelzator-blueish div.wheel-container[data-icon="user"] .wheel-option.icon-user { transform:scale(1.3); box-shadow:0px 0px 0px 0px white; } /* wheel donut-style also override spin effect, but maintain scale so it cannot be clicked */ .wheelzator-blueish .wheel-inner { box-shadow:inset 0px 0px 0px 100px rgba(93,116,191,.5); transform:scale(0); opacity:0; transition:none; transition:opacity .4s ease; } .wheelzator-blueish .in .wheel-inner { transform:scale(1); opacity:1; } .wheelzator-social .wheel-container .wheel-option.icon-facebook { background:#9daccc; } .wheelzator-social .wheel-container .wheel-option.icon-twitter { background:#aad6f7; } .wheelzator-social .wheel-container .wheel-option.icon-google-plus { background:#eea59c; } .wheelzator-social .wheel-container .wheel-option.icon-youtube { background:#dd7f7f; } .wheelzator-social .wheel-container .wheel-option.icon-linkedin { background:#7fbddb; } .wheelzator-social .wheel-container .wheel-option.icon-instagram { background:#85aac5; } .wheelzator-social .wheel-container .wheel-option.icon-pinterest { background:#e58f93; } .wheelzator-social .wheel-container .wheel-option.icon-whatsapp { background:#a3e29e; } .wheelzator-social .wheel-container .wheel-option.icon-vine { background:#7fdfc7; } .wheelzator-social .wheel-container .wheel-option.icon-snapchat { background:#fffe7f; } .wheelzator-social .wheel-container .wheel-option.icon-spotify { background:#7ff2b0; } .wheelzator-social .wheel-container .wheel-option.icon-tumblr { background:#98a7b6; } .wheelzator-social .wheel-container .wheel-option.icon-rss { background:#ffb27f; } .wheelzator-social div.wheel-container[data-icon="facebook"] .wheel-option.icon-facebook { background:#3b5998; } .wheelzator-social div.wheel-container[data-icon="twitter"] .wheel-option.icon-twitter { background:#55acee; } .wheelzator-social div.wheel-container[data-icon="google-plus"] .wheel-option.icon-google-plus { background:#dd4b39; } .wheelzator-social div.wheel-container[data-icon="youtube"] .wheel-option.icon-youtube { background:#bb0000; } .wheelzator-social div.wheel-container[data-icon="linkedin"] .wheel-option.icon-linkedin { background:#007bb5; } .wheelzator-social div.wheel-container[data-icon="instagram"] .wheel-option.icon-instagram { background:#125688; } .wheelzator-social div.wheel-container[data-icon="pinterest"] .wheel-option.icon-pinterest { background:#cb2027; } .wheelzator-social div.wheel-container[data-icon="whatsapp"] .wheel-option.icon-whatsapp { background:#4dc247; } .wheelzator-social div.wheel-container[data-icon="vine"] .wheel-option.icon-vine { background:#00bf8f; } .wheelzator-social div.wheel-container[data-icon="snapchat"] .wheel-option.icon-snapchat { background:#fffc00; } .wheelzator-social div.wheel-container[data-icon="spotify"] .wheel-option.icon-spotify { background:#00e461; } .wheelzator-social div.wheel-container[data-icon="tumblr"] .wheel-option.icon-tumblr { background:#32506d; } .wheelzator-social div.wheel-container[data-icon="rss"] .wheel-option.icon-rss { background:#ff6600; } .wheelzator-social div.wheel-container[data-icon="facebook"] .wheel-center { background:#3b5998; } .wheelzator-social div.wheel-container[data-icon="twitter"] .wheel-center { background:#55acee; } .wheelzator-social div.wheel-container[data-icon="google-plus"] .wheel-center { background:#dd4b39; } .wheelzator-social div.wheel-container[data-icon="youtube"] .wheel-center { background:#bb0000; } .wheelzator-social div.wheel-container[data-icon="linkedin"] .wheel-center { background:#007bb5; } .wheelzator-social div.wheel-container[data-icon="instagram"] .wheel-center { background:#125688; } .wheelzator-social div.wheel-container[data-icon="pinterest"] .wheel-center { background:#cb2027; } .wheelzator-social div.wheel-container[data-icon="whatsapp"] .wheel-center { background:#4dc247; } .wheelzator-social div.wheel-container[data-icon="vine"] .wheel-center { background:#00bf8f; } .wheelzator-social div.wheel-container[data-icon="snapchat"] .wheel-center { background:#fffc00; } .wheelzator-social div.wheel-container[data-icon="spotify"] .wheel-center { background:#00e461; } .wheelzator-social div.wheel-container[data-icon="tumblr"] .wheel-center { background:#32506d; } .wheelzator-social div.wheel-container[data-icon="rss"] .wheel-center { background:#ff6600; } .wheelzator-social .wheel-container .wheel-option.icon-facebook-square { background:#9daccc; } .wheelzator-social .wheel-container .wheel-option.icon-twitter-square { background:#aad6f7; } .wheelzator-social .wheel-container .wheel-option.icon-google-plus-square { background:#eea59c; } .wheelzator-social .wheel-container .wheel-option.icon-youtube-square { background:#dd7f7f; } .wheelzator-social .wheel-container .wheel-option.icon-linkedin-square { background:#7fbddb; } .wheelzator-social .wheel-container .wheel-option.icon-instagram-square { background:#85aac5; } .wheelzator-social .wheel-container .wheel-option.icon-pinterest-square { background:#e58f93; } .wheelzator-social .wheel-container .wheel-option.icon-whatsapp-square { background:#a3e29e; } .wheelzator-social .wheel-container .wheel-option.icon-vine-square { background:#7fdfc7; } .wheelzator-social .wheel-container .wheel-option.icon-snapchat-square { background:#fffe7f; } .wheelzator-social .wheel-container .wheel-option.icon-spotify-square { background:#7ff2b0; } .wheelzator-social .wheel-container .wheel-option.icon-tumblr-square { background:#98a7b6; } .wheelzator-social .wheel-container .wheel-option.icon-rss-square { background:#ffb27f; } .wheelzator-social div.wheel-container[data-icon="facebook-square"] .wheel-option.icon-facebook-square { background:#3b5998; } .wheelzator-social div.wheel-container[data-icon="twitter-square"] .wheel-option.icon-twitter-square { background:#55acee; } .wheelzator-social div.wheel-container[data-icon="google-plus-square"] .wheel-option.icon-google-plus-square { background:#dd4b39; } .wheelzator-social div.wheel-container[data-icon="youtube-square"] .wheel-option.icon-youtube-square { background:#bb0000; } .wheelzator-social div.wheel-container[data-icon="linkedin-square"] .wheel-option.icon-linkedin-square { background:#007bb5; } .wheelzator-social div.wheel-container[data-icon="instagram-square"] .wheel-option.icon-instagram-square { background:#125688; } .wheelzator-social div.wheel-container[data-icon="pinterest-square"] .wheel-option.icon-pinterest-square { background:#cb2027; } .wheelzator-social div.wheel-container[data-icon="whatsapp-square"] .wheel-option.icon-whatsapp-square { background:#4dc247; } .wheelzator-social div.wheel-container[data-icon="vine-square"] .wheel-option.icon-vine-square { background:#00bf8f; } .wheelzator-social div.wheel-container[data-icon="snapchat-square"] .wheel-option.icon-snapchat-square { background:#fffc00; } .wheelzator-social div.wheel-container[data-icon="spotify-square"] .wheel-option.icon-spotify-square { background:#00e461; } .wheelzator-social div.wheel-container[data-icon="tumblr-square"] .wheel-option.icon-tumblr-square { background:#32506d; } .wheelzator-social div.wheel-container[data-icon="rss-square"] .wheel-option.icon-rss-square { background:#ff6600; } .wheelzator-social div.wheel-container[data-icon="facebook-square"] .wheel-center { background:#3b5998; } .wheelzator-social div.wheel-container[data-icon="twitter-square"] .wheel-center { background:#55acee; } .wheelzator-social div.wheel-container[data-icon="google-plus-square"] .wheel-center { background:#dd4b39; } .wheelzator-social div.wheel-container[data-icon="youtube-square"] .wheel-center { background:#bb0000; } .wheelzator-social div.wheel-container[data-icon="linkedin-square"] .wheel-center { background:#007bb5; } .wheelzator-social div.wheel-container[data-icon="instagram-square"] .wheel-center { background:#125688; } .wheelzator-social div.wheel-container[data-icon="pinterest-square"] .wheel-center { background:#cb2027; } .wheelzator-social div.wheel-container[data-icon="whatsapp-square"] .wheel-center { background:#4dc247; } .wheelzator-social div.wheel-container[data-icon="vine-square"] .wheel-center { background:#00bf8f; } .wheelzator-social div.wheel-container[data-icon="snapchat-square"] .wheel-center { background:#fffc00; } .wheelzator-social div.wheel-container[data-icon="spotify-square"] .wheel-center { background:#00e461; } .wheelzator-social div.wheel-container[data-icon="tumblr-square"] .wheel-center { background:#32506d; } .wheelzator-social div.wheel-container[data-icon="rss-square"] .wheel-center { background:#ff6600; }