/*========================================================================================= File Name: demo.scss Description: CSS used for demo purpose only. Remove this css from your project. ---------------------------------------------------------------------------------------- Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ .fonticon-container{ > .fonticon-wrap{ float: left; width: 60px; height: 60px; line-height: 4.8rem; text-align: center; // border: 2px solid $primary; border-radius: 0.1875rem; margin-right: 1rem; margin-bottom: 1.5rem; > i{ font-size: 2.28rem; transition: all .2s ease-in-out; } &.youtube{ width: 100px; } } &:hover{ i{ color: $primary; font-size: 2.9rem; transform: scale(1.3); } } >.fonticon-classname, >.fonticon-unit{ display: block; font-size: 1.5rem; line-height: 1.2; } >.fonticon-unit{ font-size: 1rem; font-style: italic; } } .scroll-example{ padding: 0.5rem; position: relative; border: 2px solid darken($body-bg,10%); overflow: auto; .horz-scroll-content{ width:1200px; } } .browser{ background: #e0e0e0; border: 4px solid #e0e0e0; width: 100%; height: 12rem; padding-top: 20px; margin: 0 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .browser iframe { border: 0; background: #fff; height: 100%; width: 100%; } .loader-wrapper { height: 8em; } .maintenance-icon{ font-size:4rem; } .animationIcon{ right: 30px; bottom: 10px; }