Skip to content

Instantly share code, notes, and snippets.

@blubbll

blubbll/gist:d15280714be8f06e5ad5f41c9d804b05

Created November 2, 2020 16:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save blubbll/d15280714be8f06e5ad5f41c9d804b05 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save blubbll/d15280714be8f06e5ad5f41c9d804b05 to your computer and use it in GitHub Desktop.
Download ZIP
bss2
Raw
gistfile1.txt
// Spacelab 4.5.3
// Bootswatch
/* navbar demo no margin */
body > div > div.bs-docs-section.clearfix > div > div > div:nth-child(3) {
margin: 0 !important;
}
// Variables ===================================================================
$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" !default;
@import url($web-font-path);
// Mixins ======================================================================
@mixin btn-shadow($color) {
@include gradient-y-three-colors(
lighten($color, 15%),
$color,
50%,
darken($color, 4%)
);
filter: none;
border: 1px solid darken($color, 10%);
}
// Navbar ======================================================================
.navbar {
&.bg-primary {
z-index: 1;
padding-bottom: 0;
border-bottom: none !important;
form {
/*demo*/
display: none;
}
.navbar-brand {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.nav-link,
.navbar-brand {
text-shadow: 1px 1px 1px #000;
cursor: pointer;
transition: color ease-in-out 0.2s;
font-size: $h3-font-size;
}
.nav-item {
&.active{
transform: translate(0, 1px);
}
&.active .nav-link {
text-decoration: none;
font-weight: bold;
color: #fff;
background: $indigo
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAlCAYAAACQ/8NdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFOEE3NkYwQkI3QjhERjExOUU2OERGREZFNzgzNEE4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMjVCQjNEOUJFQUIxMURGODk1Qzk4NzA2NjkwMEQwNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMjVCQjNEOEJFQUIxMURGODk1Qzk4NzA2NjkwMEQwNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NUFEMTlFRDRCQkJERjExOEQ2N0JDMDZDRkY5N0FBQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFOEE3NkYwQkI3QjhERjExOUU2OERGREZFNzgzNEE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpYtHEAAAAAwSURBVHjaYvz37182AwHA8v///1MEFQHx/6Gq6N+oSf+GtZv+jYb48DZpsCkCCDAATJgqimW+acYAAAAASUVORK5CYII=")
repeat-x !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.nav-link {
color: #a5cae4;
display: block;
float: left;
font-size: 14px;
font-weight: 700;
height: 35px;
line-height: 35px;
outline: 0;
padding: 0 15px;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
transition: filter 99ms ease !important;
vertical-align: text-bottom;
&:hover {
text-decoration: none;
filter: brightness(1.3);
font-weight: bold;
color: #fff;
background: transparent
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAlCAYAAACQ/8NdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFOEE3NkYwQkI3QjhERjExOUU2OERGREZFNzgzNEE4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMjVCQjNEOUJFQUIxMURGODk1Qzk4NzA2NjkwMEQwNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMjVCQjNEOEJFQUIxMURGODk1Qzk4NzA2NjkwMEQwNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NUFEMTlFRDRCQkJERjExOEQ2N0JDMDZDRkY5N0FBQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFOEE3NkYwQkI3QjhERjExOUU2OERGREZFNzgzNEE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpYtHEAAAAAwSURBVHjaYvz37182AwHA8v///1MEFQHx/6Gq6N+oSf+GtZv+jYb48DZpsCkCCDAATJgqimW+acYAAAAASUVORK5CYII=")
repeat-x !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
&:active {
text-decoration: none;
filter: brightness(0.7);
}
}
}
}
&.bg-dark {
border-top: 1px solid rgba(252, 252, 252, 0.42)!important;
border-bottom: 1px solid rgb(3, 42, 70);
height: 37px;
line-height: 35px;
padding: 0;
background: $indigo !important;
border-bottom: 1px solid rgb(3, 42, 70)!important;
.nav-item {
&.active {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
background: rgba(255, 255, 255, 0.25);
border: 1px solid #6cb2e4;
border-top-color: rgb(0, 0, 0);
border-top-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
outline: 0;
}
.nav-link {
font-size: 11px;
color: #fff;
padding: 0 10px;
margin-top: 3px;
border: 1px solid transparent;
display: block;
text-shadow: 0 1px 1px $indigo;
line-height: 28px !important;
&:hover {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
border: 1px solid #6cb2e4;
border-top-color: rgb(0, 0, 0);
border-top-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
outline: 0;
}
&:active {
filter: brightness(0.9);
}
}
}
input{
width: 250px;
height: 24px;
color: white!important;
background: rgba(0,0,0,.1)!important;
border-color: rgba(255,255,255, .1);
&::placeholder{
color: black!important;
font-style: italic!important;
}
}
.navbar-brand {
display: none !important;
}
}
&.bg-primary {
@include btn-shadow(map-get($theme-colors, "primary"));
}
&.bg-dark {
@include btn-shadow(map-get($theme-colors, "secondary"));
}
&.bg-light {
@include btn-shadow(map-get($theme-colors, "light"));
.nav-link,
.navbar-brand {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-brand {
color: $navbar-light-color;
&:hover {
color: $info;
}
}
}
}
// Buttons =====================================================================
.btn {
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
&-link {
text-shadow: none;
}
}
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include btn-shadow($value);
}
.btn-#{$color}:not(.disabled):hover {
@include btn-shadow(darken($value, 4%));
}
}
[class*="btn-outline-"] {
text-shadow: none;
}
// Indicators ==================================================================
.badge {
&-secondary {
color: $white;
}
}
// Containers ==================================================================
.card,
.list-group-item {
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
}
}
// Breadcrumb
.breadcrumb{
font-size: 14px;
font-family: Georgia, "Times New Roman", serif;
overflow: hidden;
zoom: 1;
max-width: 100%;
height: 36px;
padding: 0;
margin: 15px 0;
background: #F1F1EC
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAlCAYAAACQ/8NdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFOEE3NkYwQkI3QjhERjExOUU2OERGREZFNzgzNEE4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMjVCQjNEOUJFQUIxMURGODk1Qzk4NzA2NjkwMEQwNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMjVCQjNEOEJFQUIxMURGODk1Qzk4NzA2NjkwMEQwNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NUFEMTlFRDRCQkJERjExOEQ2N0JDMDZDRkY5N0FBQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFOEE3NkYwQkI3QjhERjExOUU2OERGREZFNzgzNEE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpYtHEAAAAAwSURBVHjaYvz37182AwHA8v///1MEFQHx/6Gq6N+oSf+GtZv+jYb48DZpsCkCCDAATJgqimW+acYAAAAASUVORK5CYII=")
repeat-x !important;
border: 1px solid #d5d5d5;
border-radius: 6px;
overflow: hidden;
zoom: 1;
clear: both;
box-sizing: border-box;
.breadcrumb-item{
&.active{
font-style: italic;
}
cursor: pointer;
padding-left: 32px;
padding-right: 5px;
+ .breadcrumb-item{
&:hover{
text-shadow: 0 0 0.03px black;
text-decoration: underline;
}
&::before{
content: "❭" !important;
font-style: normal!important;
text-shadow: none!important;
top: 0px;
left: 5px;
font-size: 48px;
color: #d5d5d5;
position: absolute;
}}
line-height: 36px;
display: block;
float: left;
position: relative;
zoom: 1;
max-width: 50%;
a{
cursor: pointer;
color: rgba(0, 0, 0, .5);
text-decoration: none;
padding: 0 10px 0 1px;
margin-bottom: -1px;
outline: 0 none;
-moz-outline-style: 0 none;
text-decoration: none;
}
}
}
//pagination
.pagination{
.page-item{
&.active{
.page-link{
color: #FFF;
background-color: $indigo;
border-color: $indigo;
position: relative;
}
}
.page-link{
color: rgb(143,108,63);
text-decoration: none;
background-color: #fff4e5;
border: 1px solid #f9bc6d;
border-radius: 4px !important;
text-align: center;
box-sizing: border-box;
display: block;
float: left;
margin-right: 3px;
&:focus, &:active, &:hover{
color: rgb(109,63,3);
text-decoration: none;
background-color: #f9d9b0;
border-color: rgb(230,140,23);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment