mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 19:25:51 +00:00
Spacing and image fixes
- Move generic images to the folder for template assets - Redo docs landing page - Fix spacing issues on many pages - Remove lots of defunct styles
This commit is contained in:
mDuo13
@@ -2,39 +2,44 @@
|
||||
|
||||
.xrpl-footer {
|
||||
margin: 0 48px;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.xrpl-footer .card-body {
|
||||
margin-top: -15px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.xrpl-footer .card {
|
||||
padding-top: 24px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.xrpl-footer h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.xrpl-footer li {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
li {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.absolute_bottom_footer span {
|
||||
margin-right: 25px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.xrpl-footer .card-header h5 i {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
.card-body {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.xrpl-footer .card-grid .card {
|
||||
padding: 24px 48px 48px 48px;
|
||||
}
|
||||
.xrpl-footer .card-grid .card:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.xrpl-footer .card-grid .card {
|
||||
padding-left: 0;
|
||||
.card-header h5 i {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.card-grid .card {
|
||||
padding: 24px 48px 48px 48px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.absolute_bottom_footer span {
|
||||
margin-right: 25px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,16 +4,12 @@
|
||||
.landing a.card,
|
||||
.xrpl-footer a {
|
||||
color: $white;
|
||||
}
|
||||
.xrpl-footer a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.landing .curated-links a:hover,
|
||||
.landing .children-display a:hover,
|
||||
.xrpl-footer a:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.card-grid .section-hero.card {
|
||||
padding-left: 0;
|
||||
@@ -25,7 +21,6 @@
|
||||
|
||||
.content .children-display li a {
|
||||
/* Category landing pages */
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
text-decoration: none;
|
||||
@@ -35,9 +30,6 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
/* Common list modules (children, curated links) ---------------------------- */
|
||||
.curated-links ul,
|
||||
|
||||
@@ -1,28 +1,32 @@
|
||||
.landing section,
|
||||
.xrpl-footer .card-grid,
|
||||
#main_content_wrapper {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.landing section:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* main content area ----------------------------------- */
|
||||
.sidebar-primary .main {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
// Landings can be borderless full-width so bg images can touch the edges
|
||||
.landing {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Normally-padded pages
|
||||
.padded-landing,
|
||||
.sidebar-primary #main_content_wrapper {
|
||||
/* Mobile first */
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 0 3rem 3rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Card Grid styles ------------------------------------------------------------
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
background-color: $black;
|
||||
padding: 0;
|
||||
|
||||
&.card-grid-2x2 {
|
||||
@@ -174,43 +178,12 @@ section {
|
||||
|
||||
/* Responsive design for different viewscreens ------------------------------ */
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
// #main_content_wrapper {
|
||||
// padding: 0 24px;
|
||||
// }
|
||||
.navbar-brand img {
|
||||
width: 120px;
|
||||
}
|
||||
// .landing section:first-of-type h1:first-child {
|
||||
// font-size: 3em;
|
||||
// font-weight: 400;
|
||||
// }
|
||||
.section-hero .blurb {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.sidebar-primary .main {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
.right-sidebar .card {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#main_content_body {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
#main_content_body .container-fluid {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.xrpl-footer {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
#page-toc-wrapper {
|
||||
position: static;
|
||||
display: block;
|
||||
@@ -277,19 +250,19 @@ section {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
background: $black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.timeline-block:first-child .timeline-dot {
|
||||
border: 3px solid #FAFF1A;
|
||||
border: 3px solid $yellow-500;
|
||||
}
|
||||
|
||||
.timeline-block:nth-child(2) .timeline-dot {
|
||||
border: 3px solid #FF884B;
|
||||
border: 3px solid $orange-400;
|
||||
}
|
||||
.timeline-block:nth-child(3) .timeline-dot {
|
||||
border: 3px solid #C000E6;
|
||||
border: 3px solid $red-purple-600;
|
||||
}
|
||||
.timeline-block {
|
||||
display: flex;
|
||||
@@ -307,7 +280,7 @@ section {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
@include media-breakpoint-up(md) {
|
||||
.timeline:before {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
// Font Settings ===============================================================
|
||||
.marketing-wrapper {
|
||||
section {
|
||||
border-bottom: none;
|
||||
}
|
||||
.row {
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* HOME STYLINGS */
|
||||
#home-hero-marker {
|
||||
top: unset;
|
||||
@@ -39,7 +28,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 70px;
|
||||
@media (max-width: 991px) {
|
||||
padding-left: 2rem !important;
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
}
|
||||
.hc .h2 {
|
||||
@@ -76,13 +65,13 @@
|
||||
}
|
||||
}
|
||||
#page-impact-bg {
|
||||
background-image: url(../../img/backgrounds/bg-impact-top.png);
|
||||
background-image: url(../img/backgrounds/bg-impact-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 250px;
|
||||
background-size: contain;
|
||||
}
|
||||
#page-business-bg {
|
||||
background-image: url(../../img/backgrounds/bg-business-mid.png);
|
||||
background-image: url(../img/backgrounds/bg-business-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 72.5%;
|
||||
}
|
||||
@@ -97,7 +86,7 @@
|
||||
z-index: -1;
|
||||
}
|
||||
#page-exchanges-bg {
|
||||
background-image: url(../../img/backgrounds/bg-exchanges-top.png);
|
||||
background-image: url(../img/backgrounds/bg-exchanges-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 25%;
|
||||
}
|
||||
@@ -107,11 +96,17 @@
|
||||
margin-top: -446px;
|
||||
z-index: -1;
|
||||
}
|
||||
#page-wallets-bg {
|
||||
background-image: url(../../img/backgrounds/bg-wallets-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 5%;
|
||||
|
||||
.page-wallets {
|
||||
#main_content_body {
|
||||
background: url(../img/backgrounds/bg-wallets-bot.png) bottom right no-repeat;
|
||||
}
|
||||
|
||||
.fullwidth-bg {
|
||||
background: url(../img/backgrounds/bg-wallets-top.png) left 5% no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
#page-wallets-bot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -125,13 +120,13 @@
|
||||
z-index: -1;
|
||||
}
|
||||
#page-overview-bg {
|
||||
background-image: url(../../img/backgrounds/bg-overview-top.png);
|
||||
background-image: url(../img/backgrounds/bg-overview-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
#page-history-bg {
|
||||
background-image: url(../../img/backgrounds/bg-history-mid.png);
|
||||
background-image: url(../img/backgrounds/bg-history-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 60%;
|
||||
}
|
||||
@@ -142,229 +137,244 @@
|
||||
top: 302px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CALCULATOR STYLING */
|
||||
#data-selector li a {
|
||||
background: #22252B;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: -7px;
|
||||
margin-right: -7px;
|
||||
}
|
||||
#data-selector li.active a {
|
||||
background: $primary;
|
||||
color: $black;
|
||||
}
|
||||
.tab-content div {
|
||||
display: none;
|
||||
}
|
||||
.d-output {
|
||||
display: none;
|
||||
margin: 0 12px;
|
||||
max-width: 188px;
|
||||
width: 33%;
|
||||
@media only screen and (max-width: 992px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.d-output.active {
|
||||
display: block;
|
||||
animation-fill-mode: forwards;
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
@media only screen and (max-width: 992px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 1200px){
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 576px) {
|
||||
.d-output {
|
||||
display: none;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.viz-wrapper {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.d-output[data-comp="kWh"].active {
|
||||
display: inline-flex;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
#calculator-inputs-offset.offset {
|
||||
height: 248px;
|
||||
width: 100%;
|
||||
}
|
||||
#calculator-inputs-offset {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.d-output {
|
||||
margin: 16px;
|
||||
}
|
||||
#calculator-mobile-toggle.show {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 9999999;
|
||||
}
|
||||
#calculator-mobile-toggle.hide {
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
width: calc(100% - 30px);
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
background: $black;
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky.show .calc-inputs-wrapper {
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#calculator-inputs.sticky.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.viz-wrapper {
|
||||
position: relative;
|
||||
height: 204px;
|
||||
width: 184px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.viz-wrapper img {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
.dot {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 98px;
|
||||
left: 68px;
|
||||
transform-origin: center center;
|
||||
}
|
||||
#kWh-btc-dot {
|
||||
background-color: #FF671A;
|
||||
}
|
||||
#kWh-eth-dot {
|
||||
background-color: #4F5664;
|
||||
}
|
||||
#kWh-xrp-dot {
|
||||
background-color: $primary;
|
||||
}
|
||||
#kWh-pap-dot {
|
||||
}
|
||||
|
||||
.dash:before {
|
||||
content: url(../../img/icons/dash-line.png);
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
margin-left: 13px;
|
||||
.sustainability-bg {
|
||||
background: url(../../img/green/green-graphic.png) 0 3rem no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
||||
width: 100%; /* Specific width is required for Firefox. */
|
||||
background: transparent; /* Otherwise white in Chrome */
|
||||
z-index: 2;
|
||||
.page-docs-index {
|
||||
@include media-breakpoint-up(lg) {
|
||||
background: url(../img/backgrounds/bg-docs.png) no-repeat;
|
||||
background-position-x: left;
|
||||
background-position-y: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
|
||||
}
|
||||
.page-calculator {
|
||||
/* CALCULATOR STYLING */
|
||||
#data-selector li a {
|
||||
background: #22252B;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: -7px;
|
||||
margin-right: -7px;
|
||||
}
|
||||
#data-selector li.active a {
|
||||
background: $primary;
|
||||
color: $black;
|
||||
}
|
||||
.tab-content div {
|
||||
display: none;
|
||||
}
|
||||
.d-output {
|
||||
display: none;
|
||||
margin: 0 12px;
|
||||
max-width: 188px;
|
||||
width: 33%;
|
||||
@media only screen and (max-width: 992px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.d-output.active {
|
||||
display: block;
|
||||
animation-fill-mode: forwards;
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
@media only screen and (max-width: 992px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
@media only screen and (min-width: 576px) and (max-width: 1200px){
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 576px) {
|
||||
.d-output {
|
||||
display: none;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.viz-wrapper {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.d-output[data-comp="kWh"].active {
|
||||
display: inline-flex;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
#calculator-inputs-offset.offset {
|
||||
height: 248px;
|
||||
width: 100%;
|
||||
}
|
||||
#calculator-inputs-offset {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.d-output {
|
||||
margin: 16px;
|
||||
}
|
||||
#calculator-mobile-toggle.show {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 9999999;
|
||||
}
|
||||
#calculator-mobile-toggle.hide {
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
width: calc(100% - 30px);
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
background: $black;
|
||||
display: none;
|
||||
}
|
||||
#calculator-inputs.sticky.show .calc-inputs-wrapper {
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#calculator-inputs.sticky.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.viz-wrapper {
|
||||
position: relative;
|
||||
height: 204px;
|
||||
width: 184px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.viz-wrapper img {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
.dot {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 98px;
|
||||
left: 68px;
|
||||
transform-origin: center center;
|
||||
}
|
||||
#kWh-btc-dot {
|
||||
background-color: #FF671A;
|
||||
}
|
||||
#kWh-eth-dot {
|
||||
background-color: #4F5664;
|
||||
}
|
||||
#kWh-xrp-dot {
|
||||
background-color: $primary;
|
||||
}
|
||||
#kWh-pap-dot {
|
||||
}
|
||||
|
||||
/* Hides the slider so custom styles can be added */
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
.dash:before {
|
||||
content: url(../img/icons/dash-line.png);
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
box-sizing: content-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
width: 1px; /* Set a specific slider handle width */
|
||||
height: 1px; /* Slider handle height */
|
||||
background: $primary;
|
||||
padding: 0.125rem;
|
||||
border: 8px solid $black;
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
box-sizing: content-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
width: 1px; /* Set a specific slider handle width */
|
||||
height: 1px; /* Slider handle height */
|
||||
background: $primary;
|
||||
padding: 0.125rem;
|
||||
border: 8px solid $black;
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
input[type="range"] {
|
||||
background: $primary;
|
||||
height: 3px;
|
||||
}
|
||||
input[type=range] {
|
||||
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
||||
width: 100%; /* Specific width is required for Firefox. */
|
||||
background: transparent; /* Otherwise white in Chrome */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/** FF*/
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: $primary;
|
||||
}
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
/* IE*/
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background-color: $primary;
|
||||
}
|
||||
input[type="range"]::-ms-fill-upper {
|
||||
background-color: $gray-500;
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
/* Hides the slider so custom styles can be added */
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
box-sizing: content-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
width: 1px; /* Set a specific slider handle width */
|
||||
height: 1px; /* Slider handle height */
|
||||
background: $primary;
|
||||
padding: 0.125rem;
|
||||
border: 8px solid $black;
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
box-sizing: content-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
width: 1px; /* Set a specific slider handle width */
|
||||
height: 1px; /* Slider handle height */
|
||||
background: $primary;
|
||||
padding: 0.125rem;
|
||||
border: 8px solid $black;
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
input[type="range"] {
|
||||
background: $primary;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/** FF*/
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: $primary;
|
||||
}
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
/* IE*/
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background-color: $primary;
|
||||
}
|
||||
input[type="range"]::-ms-fill-upper {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,9 +7,17 @@
|
||||
white-space: pre;
|
||||
-webkit-transition: opacity 200ms ease, color 200ms ease;
|
||||
transition: opacity 200ms ease, color 200ms ease;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
img {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-brand:hover {
|
||||
opacity: 0.5;
|
||||
opacity: 1.0;
|
||||
// Hack: turn white logo to approximately $green
|
||||
filter: brightness(0.5) sepia(1) saturate(5000%) hue-rotate(114deg) brightness(1.96) saturate(87%);
|
||||
}
|
||||
|
||||
// Main Links ----------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user