Created
December 28, 2017 16:10
-
-
Save szabomikierno/765acc21dcaf100e615bdb241ad5b296 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import '../../public.less'; | |
| .traders-container{ | |
| margin-bottom:50px; | |
| .trader-container{ | |
| background: rgba(16, 11, 45, 0.7); | |
| padding:20px; | |
| @media (max-width: 768px) { | |
| margin:50px 0; | |
| } | |
| h3{ | |
| margin:0 0 5px 0; | |
| font-size:14px; | |
| width:100px; | |
| text-transform: uppercase; | |
| } | |
| .trader-avatar{ | |
| display:inline-block; | |
| margin:5px 10px 0 0; | |
| } | |
| .trader-details{ | |
| vertical-align: top; | |
| padding: 5px; | |
| display:inline-block; | |
| p{ | |
| font-size:10px; | |
| text-transform: uppercase; | |
| margin-bottom:5px; | |
| margin-left:17px; | |
| } | |
| .trader-avg-rating{ | |
| margin-bottom:10px; | |
| padding:2px 10px; | |
| i{ | |
| color:@brand-color; | |
| font-size:18px; | |
| text-shadow: 0px 0px 18px rgba(18, 206, 161, 0.8); | |
| } | |
| } | |
| .trader-actions{ | |
| .btn{ | |
| margin-left: 5px; | |
| margin-right: 5px; | |
| &:before{ | |
| border-radius: 20px; | |
| -webkit-transform: skew(0deg); | |
| transform: skew(0deg); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .trade-status-wrapper{ | |
| background: rgba(16, 11, 45, 0.7); | |
| padding:20px; | |
| margin-top:-75px; | |
| h3{ | |
| text-transform: uppercase; | |
| margin-bottom:20px; | |
| } | |
| } | |
| .details-wrapper{ | |
| position:relative; | |
| margin-top:75px; | |
| margin-bottom:75px; | |
| .details{ | |
| position:relative; | |
| /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#091b28+0,132539+100 */ | |
| background: rgb(16, 11, 45); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgb(3, 0, 32) 0%, rgb(16, 11, 45) 100%); /* FF3.6-15 */ | |
| background: -webkit-linear-gradient(top, rgb(3, 0, 32) 0%,rgb(16, 11, 45) 100%); /* Chrome10-25,Safari5.1-6 */ | |
| background: linear-gradient(to bottom, rgb(3, 0, 32) 0%,rgb(16, 11, 45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(3, 0, 32)', endColorstr='rgb(16, 11, 45)',GradientType=0 ); /* IE6-9 */ | |
| height:200px; | |
| @media (max-width: 768px) { | |
| height:auto; | |
| } | |
| padding:20px; | |
| .order-details{ | |
| height: 125px; | |
| background: @main-bg-color; | |
| padding:20px; | |
| h4{ | |
| margin-bottom:0; | |
| font-size:16px; | |
| } | |
| p{ | |
| margin-top:0; | |
| } | |
| } | |
| .delivery-time{ | |
| font-size :12px; | |
| margin-bottom:5px; | |
| margin-top :5px; | |
| margin-left :10px; | |
| color :@brand-color; | |
| strong{ | |
| color:white; | |
| } | |
| } | |
| .product-image{ | |
| margin-top: -33px; | |
| padding:25px; | |
| border:solid 25px @main-bg-color; | |
| width:220px; | |
| height:220px; | |
| } | |
| .payment-details{ | |
| height:160px; | |
| background: @main-bg-color; | |
| padding:20px; | |
| h4{ | |
| margin-bottom:0; | |
| font-size:16px; | |
| } | |
| p{ | |
| margin-top:0; | |
| } | |
| .unit-price-container{ | |
| height:55px; | |
| p{ | |
| color:@brand-color; | |
| padding-top:22px; | |
| } | |
| } | |
| .multiplier-sign-container{ | |
| height:55px; | |
| i{ | |
| line-height:55px; | |
| } | |
| } | |
| .quantity-container{ | |
| height:55px; | |
| p{ | |
| color:@brand-color; | |
| padding-top:22px; | |
| } | |
| } | |
| .subtotal-container{ | |
| border-top: solid 1px #888; | |
| margin-top: 20px; | |
| padding: 5px; | |
| h4{ | |
| font-size:18px; | |
| } | |
| p{ | |
| color:@brand-color; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .checkpoints-container{ | |
| position:relative; | |
| .checkpoint-box-header-polygon{ | |
| height:50px; | |
| background:#100b2d; | |
| } | |
| .checkpoint-box-bottom-polygon-wrapper{ | |
| background: transparent; | |
| position: absolute; | |
| bottom: -23px; | |
| left: 0; | |
| right: 0; | |
| .checkpoint-box-bottom-polygon{ | |
| height: 50px; | |
| background: @main-bg-color; | |
| } | |
| } | |
| .checkpoint-box{ | |
| .checkpoint-box-header{ | |
| padding:5px 0 20px 0; | |
| margin-top:-20px; | |
| background:#100b2d; | |
| position:relative; | |
| h4{ | |
| text-transform:uppercase; | |
| } | |
| } | |
| .checkpoint-box-body{ | |
| background-size:cover; | |
| height:375px; | |
| padding:20px; | |
| background-color:rgba(3, 0, 32, 0.1); | |
| } | |
| } | |
| .right{ | |
| .checkpoint-box-body{ | |
| background-image:url('../../../img/page/order/checkpoint-bg-right.jpg'); | |
| } | |
| .checkpoint-box-header-polygon{ | |
| -webkit-clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); | |
| clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); | |
| } | |
| .checkpoint-box-bottom-polygon{ | |
| -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 55%); | |
| clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 55%); | |
| } | |
| } | |
| .left{ | |
| .checkpoint-box-body{ | |
| background-image:url('../../../img/page/order/checkpoint-bg.jpg'); | |
| } | |
| .checkpoint-box-header-polygon{ | |
| -webkit-clip-path: polygon(0 0, 100% 55%, 100% 100%, 0% 100%); | |
| clip-path: polygon(0 0, 100% 55%, 100% 100%, 0% 100%); | |
| } | |
| .checkpoint-box-bottom-polygon{ | |
| -webkit-clip-path: polygon(0% 0, 100% 55%, 100% 100%, 0 100%); | |
| clip-path: polygon(0% 0, 100% 55%, 100% 100%, 0 100%); | |
| } | |
| } | |
| .milestones-container{ | |
| .checkpoint-box-body{ | |
| position:relative; | |
| padding: 50px 100px; | |
| ol { | |
| li{ | |
| padding:20px 0; | |
| color :#aaa; | |
| .title{ | |
| cursor : pointer; | |
| } | |
| .milestone-tools{ | |
| border:solid 1px black; | |
| padding: 5px 20px; | |
| background: rgba(0,0,0,0.4); | |
| margin-left: -3px; | |
| h3{ | |
| font-size:12px; | |
| text-transform: uppercase; | |
| font-weight:bold; | |
| } | |
| } | |
| } | |
| li.finished{ | |
| color:#3e9f7e; | |
| } | |
| li.in-progress{ | |
| color:white; | |
| } | |
| } | |
| } | |
| } | |
| .payment-container{ | |
| .checkpoint-box-body{ | |
| position:relative; | |
| .payment{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; /* not part of solution */ | |
| font-size: 32px; | |
| .youplay-checkbox{ | |
| background: rgba(155,155,155,0.3); | |
| padding: 10px; | |
| } | |
| label{ | |
| font-size: 12px; | |
| text-transform:uppercase; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .trade-party, .trade-status{ | |
| background: rgba(0,0,0,0.8); | |
| padding:50px 20px; | |
| text-transform:uppercase; | |
| font-size:20px; | |
| font-weight:bold; | |
| } | |
| .trade-party{ | |
| color:#3e9f7e; | |
| p small{ | |
| color: #456; | |
| display: block; | |
| margin-bottom: -35px; | |
| letter-spacing: 5px; | |
| } | |
| } | |
| .trade-status.success{ | |
| color:green; | |
| } | |
| .trade-status.failed{ | |
| color:red; | |
| } | |
| .trade-status.in-progress{ | |
| color:white; | |
| } | |
| .order-container{ | |
| h2{ | |
| text-transform: uppercase; | |
| font-size :14px; | |
| } | |
| .hr{ | |
| margin-top: 47px; | |
| } | |
| .order-outer-wrapper{ | |
| background-color: #100b2d; | |
| padding :40px; | |
| .order-inner-wrapper{ | |
| background-color: #221D3F; | |
| h3{ | |
| font-size :16px; | |
| text-transform: uppercase; | |
| font-weight : bold; | |
| } | |
| .order-image-container{ | |
| border :solid 20px #100b2d; | |
| border-radius: 50%; | |
| padding : 22px; | |
| margin-top :-20px; | |
| } | |
| .order-item-details-inner-wrapper, .order-details-inner-wrapper{ | |
| background-color:#100b2d; | |
| height :90px; | |
| width : 90%; | |
| margin-left :13px; | |
| overflow-y : scroll; | |
| padding: 5px; | |
| .subtotal{ | |
| border-top: 1px solid white; | |
| margin-top: 10px; | |
| } | |
| h3{ | |
| font-size:14px; | |
| margin : 10px 0; | |
| } | |
| h4{ | |
| font-size :12px; | |
| margin : 5px; | |
| text-transform:uppercase; | |
| display :inline-block; | |
| font-weight : bold; | |
| } | |
| p{ | |
| font-size:12px; | |
| margin : 3px 10px; | |
| display :inline-block; | |
| float : right !important; | |
| color :@brand-color; | |
| } | |
| } | |
| .order-details-container{ | |
| margin-top:13px; | |
| .delivery-time{ | |
| margin-left:13px; | |
| font-size :12px; | |
| color :#3e9f7e; | |
| strong{ | |
| color:white; | |
| } | |
| } | |
| } | |
| } // .order-inner-wrapper | |
| } // .order-outer-wrapper | |
| .product-info-outer-wrapper{ | |
| background-color: #100b2d; | |
| cursor :pointer; | |
| .product-info-toggle{ | |
| position:relative; | |
| h3{ | |
| background :rgba(255, 255, 255, 0.1); | |
| padding :40px; | |
| margin :0; | |
| font-size :14px; | |
| text-transform: uppercase; | |
| i{ | |
| margin-left:3px; | |
| } | |
| } | |
| } | |
| .product-info-body{ | |
| padding:20px; | |
| h3{ | |
| font-size :14px; | |
| text-transform: uppercase; | |
| } | |
| } | |
| } | |
| .milestone-box-wrapper{ | |
| padding: 0 40px 0 20px; | |
| .milestone-box{ | |
| padding :0; | |
| background-color:#100b2d; | |
| .milestone-box-header{ | |
| background-color:rgba(255,255,255,0.1); | |
| .milestone-box-title{ | |
| text-transform:uppercase; | |
| padding :30px 0; | |
| font-size :16px; | |
| } | |
| } | |
| .milestone-box-body{ | |
| height : 450px; | |
| overflow-y: scroll; | |
| padding :50px 100px; | |
| .btn-group{ | |
| margin-top:10px; | |
| } | |
| ol { | |
| li{ | |
| padding:20px 0; | |
| color :#aaa; | |
| .title{ | |
| cursor : pointer; | |
| } | |
| .milestone-tools{ | |
| border:solid 1px black; | |
| padding: 0 10px; | |
| background: rgba(0,0,0,0.2); | |
| margin-left: -3px; | |
| h3{ | |
| font-size:12px; | |
| text-transform: uppercase; | |
| font-weight:bold; | |
| } | |
| } | |
| } | |
| li.finished{ | |
| color:#3e9f7e; | |
| } | |
| li.in-progress{ | |
| color:white; | |
| } | |
| } | |
| } | |
| .milestone-box-footer{ | |
| padding :10px 5px; | |
| background-color:rgba(0,0,0,0.1); | |
| color: #aaa; | |
| } | |
| } | |
| } | |
| .payment-box-wrapper{ | |
| padding: 0 20px 0 40px; | |
| .payment-box{ | |
| padding :0; | |
| background-color:#100b2d; | |
| .payment-box-header{ | |
| background-color:rgba(255,255,255,0.1); | |
| .payment-box-title{ | |
| text-transform:uppercase; | |
| padding :30px 0; | |
| font-size :16px; | |
| } | |
| } | |
| .payment-box-body{ | |
| height: 450px; | |
| position:relative; | |
| .payment{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; /* not part of solution */ | |
| font-size: 32px; | |
| .youplay-checkbox{ | |
| background: rgba(155,155,155,0.3); | |
| padding: 10px; | |
| } | |
| label{ | |
| font-size: 12px; | |
| text-transform:uppercase; | |
| } | |
| } | |
| } | |
| .payment-box-footer{ | |
| padding :10px 5px; | |
| background-color:rgba(0,0,0,0.1); | |
| color: #aaa; | |
| } | |
| } | |
| } | |
| } // .order-container | |
| .review-outer-wrapper{ | |
| background-repeat-y: no-repeat; | |
| background-position: bottom center; | |
| background-image: url('../../../img/page/order/flame.gif'); | |
| .review-wrapper{ | |
| .panel-heading{ | |
| background:#030020; | |
| text-transform: uppercase; | |
| h3{ | |
| padding: 5px 10px; | |
| letter-spacing: 4px; | |
| font-size: 18px; | |
| margin: 0; | |
| } | |
| } | |
| .panel-body{ | |
| background:rgba(16,11,45, 0.9); | |
| padding:20px; | |
| } | |
| margin-bottom:100px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment