mirror of
https://github.com/inspec/inspec
synced 2024-11-30 00:20:28 +00:00
bea3d15b4c
* Smaller triangle - slowed down grid animation * Remove slide-up from community footer - adjust slider speed * Beginning of tutorials * Added links * Tutorials sliders
517 lines
8.7 KiB
SCSS
517 lines
8.7 KiB
SCSS
// Alignment
|
|
|
|
.row {
|
|
display: flex;
|
|
}
|
|
|
|
.strict-center {
|
|
right: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.strict-right {
|
|
float: right;
|
|
text-align: right;
|
|
margin-left: auto;
|
|
|
|
@include nav-small{ //mobile
|
|
float: initial;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.strict-left {
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.relative-top {
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
.fit {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.fit-height {
|
|
height: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
.align {
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.align-vertical {
|
|
position: relative;
|
|
top: 25%;
|
|
transform: translateY(-25%);
|
|
-webkit-transform: translateY(-25%);
|
|
-moz-transform: translateY(-25%);
|
|
}
|
|
|
|
|
|
.align-vertical-50 {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
-webkit-transform: translateY(-50%);
|
|
-moz-transform: translateY(-50%);
|
|
}
|
|
|
|
.z-10 {
|
|
z-index: 10;
|
|
}
|
|
|
|
.z-20 {
|
|
z-index: 20;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
// margins
|
|
|
|
.margin-both-xl { // xl
|
|
margin-top: $percent_lg;
|
|
margin-bottom: $percent_lg;
|
|
|
|
@include nav-small { //mobile
|
|
margin-top: $percent_md;
|
|
margin-bottom: $percent_md;
|
|
}
|
|
}
|
|
|
|
.margin-top-xl {
|
|
margin-top: $percent_lg;
|
|
|
|
@include nav-small { //mobile
|
|
margin-top: $percent_md;
|
|
}
|
|
}
|
|
|
|
.margin-under-xl {
|
|
margin-bottom: $percent_lg;
|
|
|
|
@include nav-small { //mobile
|
|
margin-bottom: $percent_md;
|
|
}
|
|
}
|
|
|
|
.padding-top-xl {
|
|
padding-top: $percent_lg;
|
|
|
|
@include nav-small { //mobile
|
|
padding-top : $percent_md;
|
|
}
|
|
}
|
|
|
|
// default
|
|
|
|
.margin-both {
|
|
margin-top: $percent_md;
|
|
margin-bottom: $percent_md;
|
|
}
|
|
|
|
.pad-both {
|
|
padding-top: $percent_md;
|
|
padding-bottom: $percent_md;
|
|
}
|
|
|
|
.margin-both-offset {
|
|
margin-top: $percent_md + 80px; // add header height
|
|
margin-bottom: $percent_md;
|
|
|
|
@include nav-small {
|
|
margin-top: $percent_md + 60px;
|
|
}
|
|
}
|
|
|
|
.margin-top-offset {
|
|
margin-top: 80px; // add header height
|
|
|
|
@include nav-small {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
.margin-top {
|
|
margin-top: $percent_md;
|
|
}
|
|
|
|
.margin-under {
|
|
margin-bottom: $percent_md;
|
|
}
|
|
|
|
.padding-under {
|
|
padding-bottom: $percent_md;
|
|
}
|
|
|
|
// small
|
|
|
|
.margin-both-sm {
|
|
margin-top: $percent_sm;
|
|
margin-bottom: $percent_sm;
|
|
}
|
|
|
|
.margin-top-sm {
|
|
margin-top: $percent_sm;
|
|
}
|
|
|
|
.margin-under-sm {
|
|
margin-bottom: $percent_sm;
|
|
}
|
|
|
|
.margin-both-h-sm {
|
|
margin-left: $percent_sm;
|
|
margin-right: $percent_sm;
|
|
}
|
|
|
|
.margin-left-sm {
|
|
margin-left: $percent_sm;
|
|
}
|
|
|
|
.margin-right-sm {
|
|
margin-right: $percent_sm;
|
|
}
|
|
|
|
// xsmall
|
|
|
|
.margin-both-xs {
|
|
margin-top: $percent_xs;
|
|
margin-bottom: $percent_xs;
|
|
}
|
|
|
|
.margin-top-xs {
|
|
margin-top: $percent_xs;
|
|
}
|
|
|
|
.margin-under-xs {
|
|
margin-bottom: $percent_xs;
|
|
}
|
|
|
|
.pad-under-xs {
|
|
padding-bottom: $percent_xs;
|
|
}
|
|
|
|
.margin-both-h-xs {
|
|
margin-left: $percent_xs;
|
|
margin-right: $percent_xs;
|
|
}
|
|
|
|
.margin-left-xs {
|
|
margin-left: $percent_xs;
|
|
}
|
|
|
|
.margin-right-xs {
|
|
margin-right: $percent_xs;
|
|
}
|
|
|
|
.pad-top-xs {
|
|
padding-top: $percent_xs;
|
|
}
|
|
|
|
.pad-under-xs {
|
|
padding-bottom: $percent_xs;
|
|
}
|
|
|
|
|
|
.box-white { // White Box
|
|
width: 100%;
|
|
padding: $percent_sm;
|
|
border-radius: 8px;
|
|
background-color: white;
|
|
}
|
|
|
|
.box-dark { // White Box
|
|
width: 100%;
|
|
padding: $percent_sm;
|
|
border-radius: 8px;
|
|
background-color: $color-dark;
|
|
}
|
|
|
|
.box-scroll {
|
|
max-height: 120px;
|
|
overflow: scroll;
|
|
-ms-overflow-style: none; // IE 10+
|
|
overflow: -moz-scrollbars-none; // Firefox
|
|
}
|
|
|
|
.box-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tooltip-triangle {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 4px 8px 4px 0;
|
|
border-color: transparent $color_dark transparent transparent;
|
|
}
|
|
|
|
.shadow { // dropshadow
|
|
-webkit-box-shadow: 0px 15px 60px 0px $color_shadow;
|
|
-moz-box-shadow: 0px 15px 60px 0px $color_shadow;
|
|
box-shadow: 0px 15px 60px 0px $color_shadow;
|
|
}
|
|
|
|
.shadow-dark { // dropshadow for buttons
|
|
-webkit-box-shadow: 0px 15px 60px 0px $color_dark_shadow;
|
|
-moz-box-shadow: 0px 15px 60px 0px $color_dark_shadow;
|
|
box-shadow: 0px 15px 60px 0px $color_dark_shadow;
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: $color_dark;
|
|
}
|
|
|
|
.bg-gradient { // Default Blue Gradient
|
|
background: -moz-linear-gradient(-45deg, #5bc8a9 0%, #47b7d1 50%, #6063ef 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(-45deg, #5bc8a9 0%,#47b7d1 50%,#6063ef 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(135deg, #5bc8a9 0%,#47b7d1 50%,#6063ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc8a9', endColorstr='#6063ef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
}
|
|
|
|
.brdr-left {
|
|
border-width: 1.5px 0 1.5px 2px;
|
|
border-style: solid;
|
|
-webkit-border-image:
|
|
-webkit-linear-gradient(#6063ef, #47b7d1) 1 100%;
|
|
-moz-border-image:
|
|
-moz-linear-gradient( #6063ef, #47b7d1) 1 100%;
|
|
-o-border-image:
|
|
-o-linear-gradient(#6063ef, #47b7d1) 1 100%;
|
|
border-image:
|
|
linear-gradient(#6063ef, #47b7d1) 1 100%;
|
|
}
|
|
|
|
.triangle-right {
|
|
width: 80px;
|
|
height: 80px;
|
|
position: absolute;
|
|
margin-right: -25px;
|
|
margin-bottom: -25px;
|
|
right: 0;
|
|
bottom: 0;
|
|
clip: rect(auto, 90px, auto, 50px);
|
|
-webkit-transform: rotate(45deg) scale(0.5);
|
|
-moz-transform: rotate(45deg) scale(0.5);
|
|
transform: rotate(45deg) scale(0.5);
|
|
}
|
|
|
|
.triangle-right::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
right: 10px;
|
|
border-radius: 8px;
|
|
background: -moz-linear-gradient(-45deg, #5bc8a9 0%, #47b7d1 50%, #6063ef 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(-45deg, #5bc8a9 0%,#47b7d1 50%,#6063ef 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(135deg, #5bc8a9 0%,#47b7d1 50%,#6063ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc8a9', endColorstr='#6063ef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
// form
|
|
|
|
input[type="email"],
|
|
input[type="text"] {
|
|
color: $color_dark;
|
|
border: 1.5px solid white;
|
|
font-family: $main-font;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="text"]:hover,
|
|
input[type="email"]:focus,
|
|
input[type="email"]:hover {
|
|
border: 1.5px solid $color_purple;
|
|
}
|
|
|
|
input::-webkit-input-placeholder,
|
|
textarea::-webkit-input-placeholder {
|
|
color: $color_gray;
|
|
font-family: $main-font;
|
|
}
|
|
|
|
input:-moz-placeholder,
|
|
textarea:-moz-placeholder {
|
|
color: $color_gray;
|
|
font-family: $main-font;
|
|
}
|
|
|
|
input:-ms-input-placeholder,
|
|
textarea:-ms-input-placeholder {
|
|
color: $color_gray;
|
|
font-family: $main-font;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: $color_gray;
|
|
font-family: $main-font;
|
|
}
|
|
|
|
// Progress bar
|
|
|
|
progress { /* Positioning */
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1.6px;
|
|
color: $color_purple;
|
|
border: none;
|
|
background-color: transparent;
|
|
z-index: 500;
|
|
}
|
|
|
|
progress[value]::-webkit-progress-bar {
|
|
background-color: white;
|
|
}
|
|
|
|
progress[value]::-webkit-progress-value {
|
|
background-color: $color_purple;
|
|
}
|
|
|
|
progress[value]::-moz-progress-bar {
|
|
background-color: white;
|
|
}
|
|
|
|
progress[value]::-moz-progress-value {
|
|
background-color: $color_purple;
|
|
}
|
|
|
|
progress[value]::progress-bar {
|
|
background-color: white;
|
|
}
|
|
|
|
progress[value]::progress-value {
|
|
background-color: $color_purple;
|
|
}
|
|
|
|
//search bar
|
|
|
|
.searchbar{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
//search form
|
|
|
|
form.main-sidebar--search {
|
|
width: 100%;
|
|
}
|
|
|
|
//search input
|
|
|
|
form.main-sidebar--search input[type="text"] {
|
|
font-family: $main-font;
|
|
font-weight: 400;
|
|
width: 100%;
|
|
display: inline;
|
|
height: 45px;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
background: $color_white;
|
|
font-size: 1em;
|
|
color: $color_dark;
|
|
|
|
@include nav-small {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
//Search button
|
|
|
|
.search { // search icon
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 1.5px solid $color_white;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
position: relative;
|
|
float: right;
|
|
outline: none;
|
|
|
|
i {
|
|
width: 20px;
|
|
margin-left: 8px;
|
|
height: auto;
|
|
}
|
|
|
|
@include nav-small {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// overriding some of Swiftype's styles
|
|
|
|
.st-query-present, .st-install-xzyJV6P7pgscygGyyTm8 .st-ui-result .st-ui-type-heading, .st-ui-type-detail {
|
|
font-family: $main-font;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1em !important;
|
|
color: $color_dark !important;
|
|
}
|
|
|
|
a.st-ui-result .st-ui-type-heading, span.st-ui-type-heading {
|
|
color: $color_purple !important;
|
|
}
|
|
|
|
.st-ui-type-detail {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
a.st-ui-result .st-ui-type-detail {
|
|
max-height: 45px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a.st-ui-result {
|
|
border-bottom: 1.5px solid #E9EDF2 !important;
|
|
}
|
|
|
|
.st-query-present {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.st-query-present a {
|
|
text-decoration: none !important;
|
|
}
|