mirror of
https://github.com/JKorf/CryptoExchange.Net
synced 2025-10-31 10:27:48 +00:00
537 lines
11 KiB
SCSS
537 lines
11 KiB
SCSS
/* =================================== */
|
|
/* 5. Elements
|
|
/* =================================== */
|
|
|
|
/*=== 5.1 List Style ===*/
|
|
|
|
.list-style-1 > li {
|
|
position: relative;
|
|
list-style-type: none;
|
|
line-height: 24px;
|
|
&:after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 12px;
|
|
left: -15px;
|
|
border-color: #000;
|
|
border-top: 1px solid;
|
|
border-right: 1px solid;
|
|
width: 6px;
|
|
height: 6px;
|
|
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
}
|
|
|
|
.list-style-2{padding:0;}
|
|
|
|
.list-style-2 > li {
|
|
list-style-type: none;
|
|
border-bottom: 1px solid #eaeaea;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
.list-style-2.list-style-light > li {
|
|
border-bottom: 1px solid rgba(250,250,250,0.12);
|
|
}
|
|
|
|
/*=== 5.2 Changelog ===*/
|
|
|
|
.changelog {
|
|
list-style: none;
|
|
padding: 0;
|
|
.badge {
|
|
width: 90px;
|
|
margin-right: 10px;
|
|
border-radius: .20rem;
|
|
text-transform: uppercase;
|
|
}
|
|
li {
|
|
line-height: 1.8;
|
|
}
|
|
}
|
|
|
|
|
|
/*=== 5.3 Accordion & Toggle ===*/
|
|
.accordion {
|
|
.card {
|
|
border: none;
|
|
margin-bottom: 16px;
|
|
margin-bottom: 1rem;
|
|
background-color: transparent;
|
|
}
|
|
.card-header {
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
a {
|
|
font-size: 16px;
|
|
font-weight:normal;
|
|
padding: 1rem 1.25rem 1rem 2.25rem;
|
|
display: block;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
&:hover{
|
|
text-decoration:none;
|
|
}
|
|
&:hover.collapsed {
|
|
color: $primary-color!important;
|
|
}
|
|
}
|
|
}
|
|
&:not(.accordion-alternate) .card-header a {
|
|
background-color: $primary-color;
|
|
color: #fff;
|
|
&.collapsed {
|
|
background-color: #f1f2f4;
|
|
color: #4c4d4d;
|
|
}
|
|
|
|
}
|
|
.card-header a {
|
|
&:before {
|
|
position: absolute;
|
|
content: " ";
|
|
left: 20px;
|
|
top: calc(50% + 2px);
|
|
width: 9px;
|
|
height: 9px;
|
|
border-color: #CCC;
|
|
border-top: 2px solid;
|
|
border-right: 2px solid;
|
|
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
@include transition(all 0.2s ease);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
&.collapsed:before {
|
|
top: calc(50% - 2px);
|
|
-webkit-transform: translate(-50%, -50%) rotate(135deg);
|
|
transform: translate(-50%, -50%) rotate(135deg);
|
|
}
|
|
}
|
|
.card-body {
|
|
line-height: 26px;
|
|
}
|
|
&.arrow-right .card-header a{
|
|
padding-left:1.25rem;
|
|
&:before {
|
|
right: 15px;
|
|
left: auto;
|
|
}
|
|
}
|
|
&.accordion-alternate {
|
|
.card {
|
|
margin: 0;
|
|
}
|
|
.card-header a {
|
|
padding-left: 1.40rem;
|
|
border-top: 1px solid #e4e9ec;
|
|
border-radius: 0px;
|
|
}
|
|
.card:first-of-type .card-header a {
|
|
border-top: 0px;
|
|
}
|
|
.card-header a {
|
|
&:before {
|
|
left: 6px;
|
|
}
|
|
&.collapsed {
|
|
color: #4c4d4d;
|
|
}
|
|
}
|
|
.card-body {
|
|
padding: 0rem 0 1rem 1.25rem;
|
|
}
|
|
&.arrow-right .card-header a{
|
|
padding-left:0;
|
|
&:before {
|
|
right: 0px;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
}
|
|
&.toggle .card-header a {
|
|
&:before {
|
|
content: "-";
|
|
border: none;
|
|
font-size: 20px;
|
|
height: auto;
|
|
top: calc(50% + 2px);
|
|
width: auto;
|
|
-webkit-transform: translate(-50%, -50%) rotate(180deg);
|
|
transform: translate(-50%, -50%) rotate(180deg);
|
|
}
|
|
&.collapsed:before {
|
|
content: "+";
|
|
top: calc(50% - 1px);
|
|
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
}
|
|
&.accordion-alternate.style-2 {
|
|
.card-header a {
|
|
&:before {
|
|
right: 2px;
|
|
left: auto;
|
|
-webkit-transform: translate(-50%, -50%) rotate(135deg);
|
|
transform: translate(-50%, -50%) rotate(135deg);
|
|
top: 50%;
|
|
}
|
|
&.collapsed:before {
|
|
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
padding-left: 0px;
|
|
}
|
|
.card-body {
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
&.accordion-alternate.popularRoutes {
|
|
.card-header {
|
|
.nav {
|
|
margin-top: 3px;
|
|
a {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
a {
|
|
padding: 0px 8px 0px 0px;
|
|
border: none;
|
|
font-size: inherit;
|
|
&:before {
|
|
content: none;
|
|
}
|
|
}
|
|
h5 {
|
|
cursor: pointer;
|
|
&:before {
|
|
position: absolute;
|
|
content: " ";
|
|
right: 0px;
|
|
top: 24px;
|
|
width: 10px;
|
|
height: 10px;
|
|
opacity: 0.6;
|
|
border-top: 2px solid;
|
|
border-right: 2px solid;
|
|
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
-webkit-transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
&.collapsed:before {
|
|
top: 24px;
|
|
-webkit-transform: translate(-50%, -50%) rotate(135deg);
|
|
transform: translate(-50%, -50%) rotate(135deg);
|
|
}
|
|
}
|
|
}
|
|
.card-body {
|
|
padding: 0;
|
|
}
|
|
.card {
|
|
border-bottom: 2px solid #e4e9ec;
|
|
padding: 15px 0px;
|
|
}
|
|
.routes-list {
|
|
margin: 1rem 0px 0px 0px;
|
|
padding: 0px;
|
|
list-style: none;
|
|
a {
|
|
color: inherit;
|
|
display: -ms-flexbox !important;
|
|
display: flex !important;
|
|
-ms-flex-align: center !important;
|
|
align-items: center !important;
|
|
&:hover {
|
|
color: #0071cc;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 5.4 Nav */
|
|
|
|
.nav .nav-item .nav-link{color: #222222;}
|
|
.nav.nav-light .nav-item .nav-link{color: #ddd;}
|
|
.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover{color: $primary-color;}
|
|
|
|
|
|
.nav-pills .nav-link:not(.active):hover{color: $primary-color;}
|
|
.nav-pills .nav-link.active,.nav-pills.nav-light .nav-link.active, .nav-pills .show > .nav-link{color:#fff;}
|
|
|
|
.nav.nav-separator .nav-item .nav-link{position:relative;}
|
|
.nav.nav-separator .nav-item + .nav-item .nav-link:after{
|
|
height: 14px;
|
|
width: 1px;
|
|
content: ' ';
|
|
background-color: rgba(0,0,0,0.2);
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
@include translateY(-7px);
|
|
}
|
|
.nav.nav-separator.nav-separator-light .nav-item + .nav-item .nav-link:after{
|
|
background-color: rgba(250,250,250,0.2);
|
|
}
|
|
|
|
.nav.nav-sm .nav-item .nav-link{font-size:14px;}
|
|
|
|
|
|
/*=== 5.5 Tabs ===*/
|
|
|
|
.nav-tabs {
|
|
border-bottom: 1px solid #d7dee3;
|
|
.nav-item .nav-link {
|
|
border:0;
|
|
background: transparent;
|
|
|
|
position: relative;
|
|
border-radius: 0;
|
|
padding:0.6rem 1rem;
|
|
color: #7b8084;
|
|
white-space: nowrap !important;
|
|
&.active {
|
|
&:after {
|
|
height: 2px;
|
|
width: 100%;
|
|
content: ' ';
|
|
background-color: $primary-color;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -3px;
|
|
left: 0;
|
|
@include translateY(-3px);
|
|
}
|
|
color: #0c2f55;
|
|
}
|
|
&:not(.active):hover {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
&.flex-column {
|
|
border-right: 1px solid #d7dee3;
|
|
border-bottom: 0px;
|
|
padding: 1.5rem 0;
|
|
.nav-item {
|
|
.nav-link {
|
|
border: 1px solid #d7dee3;
|
|
border-right: 0px;
|
|
background-color: #f6f7f8;
|
|
font-size: 14px;
|
|
padding: 0.75rem 1rem;
|
|
color: #535b61;
|
|
}
|
|
&:first-of-type .nav-link {
|
|
border-top-left-radius: 4px;
|
|
}
|
|
&:last-of-type .nav-link {
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.nav-link.active {
|
|
&:after {
|
|
height: 100%;
|
|
width: 2px;
|
|
background: #fff;
|
|
right: -1px;
|
|
left: auto;
|
|
}
|
|
background-color: transparent;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-tabs:not(.flex-column) {
|
|
.nav-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
.nav-tabs .nav-item .nav-link {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
margin-right: 10px;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
|
|
/*=== 5.6 Popup Img ===*/
|
|
.popup-img img{@include transition(all 0.2s ease-in-out);}
|
|
.popup-img:hover img{
|
|
opacity:0.8;
|
|
cursor: -webkit-zoom-in;
|
|
cursor: -moz-zoom-in;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
|
|
/*=== 5.7 Featured Box ===*/
|
|
.featured-box {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
h3, h4 {
|
|
font-size: 1.25rem;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
&:not(.style-5) .featured-box-icon {
|
|
display: inline-block;
|
|
font-size: 48px;
|
|
min-width: 55px;
|
|
min-height: 55px;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0.8rem;
|
|
color: #4c4d4d;
|
|
border-radius: 0;
|
|
}
|
|
&.style-1, &.style-2, &.style-3 {
|
|
padding-left: 50px;
|
|
padding-top: 8px;
|
|
}
|
|
&.style-1 .featured-box-icon, &.style-2 .featured-box-icon, &.style-3 .featured-box-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin-bottom: 0;
|
|
font-size: 30px;
|
|
-ms-flex-pack: center !important;
|
|
justify-content: center !important;
|
|
text-align: center;
|
|
}
|
|
&.style-2 p {
|
|
margin-left: -50px;
|
|
}
|
|
&.style-3 {
|
|
padding-left: 90px;
|
|
padding-top: 0px;
|
|
.featured-box-icon {
|
|
width: 70px;
|
|
height: 70px;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
&.style-4 {
|
|
text-align: center;
|
|
.featured-box-icon {
|
|
margin: 0 auto 24px;
|
|
margin: 0 auto 1.5rem;
|
|
width: 120px;
|
|
height: 120px;
|
|
text-align: center;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
@include box-shadow(0px 0px 50px rgba(0, 0, 0, 0.03));
|
|
}
|
|
}
|
|
|
|
&.style-5 {
|
|
text-align: center;
|
|
background: #fff;
|
|
border: 1px solid #f0f2f3;
|
|
@include box-shadow(0px 2px 5px rgba(0, 0, 0, 0.05));
|
|
@include transition(all 0.3s ease-in-out);
|
|
&:hover {
|
|
border: 1px solid #ebeded;
|
|
@include box-shadow(0px 5px 1.5rem rgba(0, 0, 0, 0.15));
|
|
}
|
|
h3 {
|
|
background: #f1f5f6;
|
|
font-size: 16px;
|
|
padding: 8px 0;
|
|
margin-bottom: 0px;
|
|
}
|
|
.featured-box-icon {
|
|
font-size: 50px;
|
|
margin: 44px 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@mixin featured-box-reverse {
|
|
text-align:right;
|
|
&.style-1, &.style-2{
|
|
padding-right:50px;
|
|
padding-left:0px;
|
|
.featured-box-icon{
|
|
left:auto;
|
|
right:0px;
|
|
}
|
|
}
|
|
&.style-2 p{
|
|
margin-right: -50px;
|
|
margin-left:0;
|
|
}
|
|
&.style-3{
|
|
padding-left:0;
|
|
padding-right:90px;
|
|
.featured-box-icon{
|
|
left:auto;
|
|
right:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.featured-box.featured-box-reverse{
|
|
@include featured-box-reverse;
|
|
}
|
|
|
|
@include media-breakpoint-up(xs) {
|
|
.featured-box.featured-box-reverse-sm{
|
|
@include featured-box-reverse;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.featured-box.featured-box-reverse-md{
|
|
@include featured-box-reverse;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
.featured-box.featured-box-reverse-lg{
|
|
@include featured-box-reverse;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
.featured-box.featured-box-reverse-xl{
|
|
@include featured-box-reverse;
|
|
}
|
|
} |