Skip to content
Snippets Groups Projects
Commit 8897b066 authored by Séamus O'Sullivan's avatar Séamus O'Sullivan
Browse files

Add just-the-docs Gem. 

Remove all the old just-the-docs components, and replace with a
dependency on the just-the-docs Ruby Gem (v0.10).
There is an outstanding issue with the flip cards on the home page, due
to modifications to JTD's scss which enabled this.
parent 1ed64bec
No related branches found
No related tags found
1 merge request!28Update Jekyll setup
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 2002 deletions
_sass/labels 2.scss deleted 100644 → 0
+ 0
− 37
View file @ 1ed64bec
//
// Labels (not the form kind)
//
.label,
.label-blue {
display: inline-block;
padding-top: 0.16em;
padding-right: 0.56em;
padding-bottom: 0.16em;
padding-left: 0.56em;
margin-right: $sp-2;
margin-left: $sp-2;
color: $white;
text-transform: uppercase;
vertical-align: middle;
background-color: $blue-100;
@include fs-2;
border-radius: 12px;
}
.label-green {
background-color: $green-200;
}
.label-purple {
background-color: $purple-100;
}
.label-red {
background-color: $red-200;
}
.label-yellow {
color: $grey-dk-200;
background-color: $yellow-200;
}
_sass/labels.scss deleted 100644 → 0
+ 0
− 33
View file @ 1ed64bec
// Labels (not the form kind)
.label,
.label-blue {
display: inline-block;
padding: 0.16em 0.56em;
margin-right: $sp-2;
margin-left: $sp-2;
color: $white;
text-transform: uppercase;
vertical-align: middle;
background-color: $blue-100;
@include fs-2;
border-radius: 12px;
}
.label-green {
background-color: $green-200;
}
.label-purple {
background-color: $purple-100;
}
.label-red {
background-color: $red-200;
}
.label-yellow {
color: $grey-dk-200;
background-color: $yellow-200;
}
_sass/layout.scss deleted 100644 → 0
+ 0
− 524
View file @ 1ed64bec
// The basic two column layout
.side-bar {
z-index: 0;
display: flex;
flex-wrap: wrap;
background-color: $sidebar-color;
@include mq(md) {
flex-flow: column nowrap;
position: fixed;
width: $nav-width-md;
height: 100%;
border-right: $border $border-color;
align-items: flex-end;
}
@include mq(lg) {
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
min-width: $nav-width;
}
}
.main {
@include mq(md) {
position: relative;
max-width: $content-width;
margin-left: $nav-width-md;
}
@include mq(lg) {
margin-left: calc(
(100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
);
}
}
.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
@include mq(md) {
padding-top: $gutter-spacing;
padding-bottom: $gutter-spacing;
}
}
.main-header {
z-index: 0;
display: none;
background-color: $sidebar-color;
@include mq(md) {
display: flex;
justify-content: space-between;
height: $header-height;
background-color: $body-background-color;
border-bottom: $border $border-color;
}
&.nav-open {
display: block;
@include mq(md) {
display: flex;
}
}
}
.site-nav,
.site-header,
.site-footer {
width: 100%;
@include mq(lg) {
width: $nav-width;
}
}
.site-nav {
display: none;
&.nav-open {
display: block;
}
@include mq(md) {
display: block;
padding-top: $sp-8;
padding-bottom: $gutter-spacing-sm;
overflow-y: auto;
flex: 1 1 auto;
}
}
.site-header {
display: flex;
min-height: $header-height;
align-items: center;
@include mq(md) {
height: $header-height;
max-height: $header-height;
border-bottom: $border $border-color;
}
}
.site-title {
@include container;
flex-grow: 1;
display: flex;
height: 100%;
align-items: center;
padding-top: $sp-3;
padding-bottom: $sp-3;
color: $body-heading-color;
@include fs-6;
@include mq(md) {
padding-top: $sp-2;
padding-bottom: $sp-2;
}
}
@if variable-exists(logo) {
.site-logo {
width: 100%;
height: 100%;
background-image: url($logo);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
}
.site-button {
display: flex;
height: 100%;
padding: $gutter-spacing-sm;
align-items: center;
}
@include mq(md) {
.site-header .site-button {
display: none;
}
}
.site-title:hover {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 80%,
rgba($feedback-color, 0) 100%
);
}
.site-button:hover {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 100%
);
}
// stylelint-disable selector-max-type
body {
position: relative;
padding-bottom: $sp-10;
overflow-y: scroll;
@include mq(md) {
position: static;
padding-bottom: 0;
}
}
// stylelint-enable selector-max-type
.site-footer {
@include container;
position: absolute;
bottom: 0;
left: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
color: $grey-dk-000;
@include fs-2;
@include mq(md) {
position: static;
justify-self: end;
}
}
.icon {
width: $sp-5;
height: $sp-5;
color: $link-color;
}
// Flip buttons on home page
a:hover {
text-decoration: underline;
}
/* Hero Unit ----------------------*/
.hero-unit {
height: 640px;
// background: url(https://static.pexels.com/photos/2884/building-vintage-bike-monument.jpg) no-repeat center center;
background: url(https://git.fmrib.ox.ac.uk/open-science/community/Open-WIN-Community/-/blob/master/img/img-hero-unit-bg.png) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.hero-unit h1,
.hero-unit h2,
.hero-unit h3,
.hero-unit h4,
.hero-unit h5,
.hero-unit h6 {
margin-top: -0.5rem;
margin-bottom: 0;
color: white;
}
.hero-unit h1 {
font-weight: bold;
}
.hero-unit hgroup {
margin: 3rem 0;
}
.hero-unit .card-icon { /* front of card */
display: block;
margin: 0.5rem auto 0;
font-size: 2rem;
color: white;
}
.hero-unit .clients {
margin: 2rem auto;
}
.hero-unit .clients a {
color: white;
}
.clients .fa-stack-2x {
color: gray;
}
.clients:hover .fa-stack-2x {
color: #333333;
}
/* Card design - front */
.button.large {
margin: 0;
padding: 3.25rem;
}
.button.large a {
color: white;
font-size: 1.75rem;
font-weight: 100;
margin-top: 2rem;
}
/* Card design - back */
.panel i {
font-size: 2rem;
display: block;
float: left;
width: 20%;
opacity: 0.5;
}
.panel a,
.panel p,
.panel small {
width: 80%;
float: right;
}
.panel a {
margin-bottom: 0.5rem;
}
.panel a:hover {
text-decoration: underline;
}
.panel small {
margin-top: -0.5rem;
font-style: italic;
}
/* Buttons Card Flipper
* Source: https://cssdeck.com/labs/rxcleo5w
*/
.flip-cards {
float: left;
width: 100%;
height: 100%;
padding-left: 1rem;
}
.flip-cards li {
float: left;
width: 33.3%;
height: 180px;
position: relative;
padding: 0;
}
.flip-cards li:hover {
cursor: pointer;
}
.flip-cards li:hover .card-front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform: perspective(1000) rotateY(180deg);
-moz-transform: perspective(1000) rotateY(180deg);
-ms-transform: perspective(1000) rotateY(180deg);
-o-transform: perspective(1000) rotateY(180deg);
transform: perspective(1000) rotateY(180deg);
}
.flip-cards li:hover .card-back {
z-index: 950;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: perspective(1000) rotateY(0deg);
-moz-transform: perspective(1000) rotateY(0deg);
-ms-transform: perspective(1000) rotateY(0deg);
-o-transform: perspective(1000) rotateY(0deg);
transform: perspective(1000) rotateY(0deg);
}
.flip-cards .card-front,
.flip-cards .card-back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.flip-cards .card-front {
-webkit-transform: perspective(1000) rotateY(0);
-moz-transform: perspective(1000) rotateY(0);
-ms-transform: perspective(1000) rotateY(0);
-o-transform: perspective(1000) rotateY(0);
transform: perspective(1000) rotateY(0);
z-index: 900;
}
.flip-cards .card-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 800;
}
/* Button Card Colors */
.flip-cards .panel {
border: none;
}
.flip-cards .panel i,
.flip-cards .panel p,
.flip-cards .panel a,
.flip-cards .panel small {
color: white;
}
/* First button color */
.flip-cards li:first-child > .button {
background-color: rgba(121, 38, 44, 1);
}
.flip-cards li:first-child > .panel {
background-color: rgba(121, 38, 44, 0.8);
}
/* Second button color */
.flip-cards li:nth-child(2) > .button {
background-color: rgba(87, 65, 65, 1);
}
.flip-cards li:nth-child(2) > .panel {
background-color: rgba(87, 65, 65, 0.8);
}
/* Third button color */
.flip-cards li:nth-child(3) > .button {
background-color: rgba(191, 165, 164, 1);
}
.flip-cards li:nth-child(3) > .panel {
background-color: rgba(191, 165, 164, 0.8);
}
/* Fourth button color */
.flip-cards li:nth-child(4) > .button {
background-color: rgb(64, 109, 0);
}
.flip-cards li:nth-child(4) > .panel {
background-color: rgba(64, 109, 0, 0.8);
}
/* Fifth button color */
.flip-cards li:nth-child(5) > .button {
background-color: rgba(174, 118, 15);
}
.flip-cards li:nth-child(5) > .panel {
background-color: rgba(174, 118, 15, 0.8);
}
/* Sixth button color */
.flip-cards li:nth-child(6) > .button {
background-color: rgba(149, 147, 26);
}
.flip-cards li:nth-child(6) > .panel {
background-color: rgba(149, 147, 26, 0.8);
}
/* 7th button color */
.flip-cards li:nth-child(7) > .button {
background-color: rgb(60, 131, 213);
}
.flip-cards li:nth-child(7) > .panel {
background-color: rgba(60, 131, 213, 0.8);
}
/* 8th button color */
.flip-cards li:nth-child(8) > .button {
background-color: rgb(76, 81, 168);
}
.flip-cards li:nth-child(8) > .panel {
background-color: rgba(76, 81, 168, 0.8);
}
/* 9th (last) button color */
.flip-cards li:last-child > .button {
background-color: rgba(40, 57, 77, 1);
}
.flip-cards li:last-child > .panel {
background-color: rgba(40, 57, 77, 0.8);
color: white;
}
/*
* RESPONSIVENESS -------------------------------------------------
*/
@media only screen and ( max-width: 40em ) {
.hero-unit {
height: 800px;
}
.flip-cards li {
width: 50%;
/*height: 160px;*/
}
}
@media only screen and ( max-width: 30em ) {
.hero-unit h1 {
font-size: 1.75rem;
}
.hero-unit h3 {
font-size: 1.125rem;
}
}
@media only screen and ( max-width: 25em ) {
.hero-unit {
height: 920px;
}
.hero-unit hgroup {
margin: 2rem 0;
}
.hero-unit h1 {
font-size: 1.35rem;
padding-bottom: 0.25rem;
}
.hero-unit h3 {
font-size: 0.85rem;
}
.hero-unit .card-icon {
font-size: 1.35rem;
}
.hero-unit .card-back .card-icon {
font-size: 2rem;
margin: 0;
padding: 5px 0 20px 5px;
}
.flip-cards li {
width: 100%;
font-size: 1.35rem;
height: 120px;
}
.flip-cards .panel p {
display: none;
}
.flip-cards .panel small {
margin: 0;
}
.button.large {
padding: 2rem;
}
.button.large a {
font-size: 1.35rem;
}
}
_sass/modules 2.scss deleted 100644 → 0
+ 0
− 20
View file @ 1ed64bec
//
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
//
// Modules
//
@import "./base";
@import "./layout";
@import "./content";
@import "./navigation";
@import "./typography";
@import "./labels";
@import "./buttons";
@import "./search";
@import "./tables";
@import "./code";
@import "./utilities/utilities";
@import "./print";
_sass/modules.scss deleted 100644 → 0
+ 0
− 17
View file @ 1ed64bec
// Import external dependencies
@import "./vendor/normalize.scss/normalize";
// Modules
@import "./base";
@import "./layout";
@import "./content";
@import "./navigation";
@import "./typography";
@import "./labels";
@import "./buttons";
@import "./search";
@import "./tables";
@import "./code";
@import "./utilities/utilities";
@import "./print";
@import "./skiptomain";
_sass/navigation 2.scss deleted 100644 → 0
+ 0
− 219
View file @ 1ed64bec
//
// Main nav, breadcrumb, etc...
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
.nav-list {
padding: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
.nav-list-item {
@include fs-4;
position: relative;
margin: 0;
@include mq(md) {
@include fs-3;
}
.nav-list-link {
display: block;
min-height: $nav-list-item-height-sm;
padding-top: $sp-1;
padding-bottom: $sp-1;
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
@if $nav-list-expander-right {
padding-right: $nav-list-item-height-sm;
padding-left: $gutter-spacing-sm;
} @else {
padding-right: $gutter-spacing-sm;
padding-left: $nav-list-item-height-sm;
}
@include mq(md) {
min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
@if $nav-list-expander-right {
padding-right: $nav-list-item-height;
padding-left: $gutter-spacing;
} @else {
padding-right: $gutter-spacing;
padding-left: $nav-list-item-height;
}
}
&.active {
font-weight: 600;
text-decoration: none;
}
&:hover,
&.active {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 80%,
rgba($feedback-color, 0) 100%
);
}
}
.nav-list-expander {
position: absolute;
@if $nav-list-expander-right {
right: 0;
}
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4};
padding-right: #{$nav-list-item-height-sm / 4};
padding-bottom: #{$nav-list-item-height-sm / 4};
padding-left: #{$nav-list-item-height-sm / 4};
color: $link-color;
@include mq(md) {
width: $nav-list-item-height;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
}
&:hover {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 100%
);
}
@if $nav-list-expander-right {
svg {
transform: rotate(90deg);
}
}
}
> .nav-list {
display: none;
padding-left: $sp-3;
list-style: none;
.nav-list-item {
position: relative;
.nav-list-link {
color: $nav-child-link-color;
}
.nav-list-expander {
color: $nav-child-link-color;
}
}
}
&.active {
> .nav-list-expander svg {
@if $nav-list-expander-right {
transform: rotate(-90deg);
} @else {
transform: rotate(90deg);
}
}
> .nav-list {
display: block;
}
}
}
}
.nav-category {
padding-top: $sp-2;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-2;
padding-left: $gutter-spacing-sm;
font-weight: 600;
text-align: end;
text-transform: uppercase;
border-bottom: $border $border-color;
@include fs-2;
@include mq(md) {
padding-right: $gutter-spacing;
padding-left: $gutter-spacing;
margin-top: $gutter-spacing-sm;
text-align: start;
&:first-child {
margin-top: 0;
}
}
}
// Aux nav
.aux-nav {
height: 100%;
overflow-x: auto;
@include fs-2;
.aux-nav-list {
display: flex;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.aux-nav-list-item {
display: inline-block;
height: 100%;
padding: 0;
margin: 0;
}
@include mq(md) {
padding-right: $gutter-spacing-sm;
}
}
// Breadcrumb nav
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;
}
}
.breadcrumb-nav-list {
padding-left: 0;
margin-bottom: $sp-3;
list-style: none;
}
.breadcrumb-nav-list-item {
display: table-cell;
@include fs-2;
&::before {
display: none;
}
&::after {
display: inline-block;
margin-right: $sp-2;
margin-left: $sp-2;
color: $grey-dk-000;
content: "/";
}
&:last-child {
&::after {
content: "";
}
}
}
_sass/navigation.scss deleted 100644 → 0
+ 0
− 235
View file @ 1ed64bec
// Main nav, breadcrumb, etc...
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
.nav-list {
padding: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
.nav-list-item {
@include fs-4;
position: relative;
margin: 0;
@include mq(md) {
@include fs-3;
}
.nav-list-link {
display: block;
min-height: $nav-list-item-height-sm;
padding-top: $sp-1;
padding-bottom: $sp-1;
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
@if $nav-list-expander-right {
padding-right: $nav-list-item-height-sm;
padding-left: $gutter-spacing-sm;
} @else {
padding-right: $gutter-spacing-sm;
padding-left: $nav-list-item-height-sm;
}
@include mq(md) {
min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
@if $nav-list-expander-right {
padding-right: $nav-list-item-height;
padding-left: $gutter-spacing;
} @else {
padding-right: $gutter-spacing;
padding-left: $nav-list-item-height;
}
}
&.external > svg {
width: $sp-4;
height: $sp-4;
vertical-align: text-bottom;
}
&.active {
font-weight: 600;
text-decoration: none;
}
&:hover,
&.active {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 80%,
rgba($feedback-color, 0) 100%
);
}
}
.nav-list-expander {
position: absolute;
@if $nav-list-expander-right {
right: 0;
}
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding: #{$nav-list-item-height-sm * 0.25};
color: $link-color;
@include mq(md) {
width: $nav-list-item-height;
height: $nav-list-item-height;
padding: #{$nav-list-item-height * 0.25};
}
&:hover {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 100%
);
}
@if $nav-list-expander-right {
svg {
transform: rotate(90deg);
}
}
}
> .nav-list {
display: none;
padding-left: $sp-3;
list-style: none;
.nav-list-item {
position: relative;
.nav-list-link {
color: $nav-child-link-color;
}
.nav-list-expander {
color: $nav-child-link-color;
}
}
}
&.active {
> .nav-list-expander svg {
@if $nav-list-expander-right {
transform: rotate(-90deg);
} @else {
transform: rotate(90deg);
}
}
> .nav-list {
display: block;
}
}
}
}
.nav-category {
padding: $sp-2 $gutter-spacing-sm;
font-weight: 600;
text-align: start;
text-transform: uppercase;
border-bottom: $border $border-color;
@include fs-2;
@include mq(md) {
padding: $sp-2 $gutter-spacing;
margin-top: $gutter-spacing-sm;
text-align: start;
&:first-child {
margin-top: 0;
}
}
}
.nav-list.nav-category-list {
> .nav-list-item {
margin: 0;
> .nav-list {
padding: 0;
> .nav-list-item {
> .nav-list-link {
color: $link-color;
}
> .nav-list-expander {
color: $link-color;
}
}
}
}
}
// Aux nav
.aux-nav {
height: 100%;
overflow-x: auto;
@include fs-2;
.aux-nav-list {
display: flex;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.aux-nav-list-item {
display: inline-block;
height: 100%;
padding: 0;
margin: 0;
}
@include mq(md) {
padding-right: $gutter-spacing-sm;
}
}
// Breadcrumb nav
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;
}
}
.breadcrumb-nav-list {
padding-left: 0;
margin-bottom: $sp-3;
list-style: none;
}
.breadcrumb-nav-list-item {
display: table-cell;
@include fs-2;
&::before {
display: none;
}
&::after {
display: inline-block;
margin-right: $sp-2;
margin-left: $sp-2;
color: $grey-dk-000;
content: "/";
}
&:last-child {
&::after {
content: "";
}
}
}
_sass/print 2.scss deleted 100644 → 0
+ 0
− 40
View file @ 1ed64bec
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
@media print {
.site-footer,
.site-button,
#edit-this-page,
#back-to-top,
.site-nav,
.main-header {
display: none !important;
}
.side-bar {
width: 100%;
height: auto;
border-right: 0 !important;
}
.site-header {
border-bottom: 1px solid $border-color;
}
.site-title {
font-size: $root-font-size !important;
font-weight: 700 !important;
}
.text-small {
font-size: 8pt !important;
}
pre.highlight {
border: 1px solid $border-color;
}
.main {
max-width: none;
margin-left: 0;
}
}
_sass/print.scss deleted 100644 → 0
+ 0
− 40
View file @ 1ed64bec
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type
@media print {
.site-footer,
.site-button,
#edit-this-page,
#back-to-top,
.site-nav,
.main-header {
display: none !important;
}
.side-bar {
width: 100%;
height: auto;
border-right: 0 !important;
}
.site-header {
border-bottom: 1px solid $border-color;
}
.site-title {
font-size: $root-font-size !important;
font-weight: 700 !important;
}
.text-small {
font-size: 8pt !important;
}
pre.highlight {
border: 1px solid $border-color;
}
.main {
max-width: none;
margin-left: 0;
}
}
_sass/search.scss deleted 100644 → 0
+ 0
− 311
View file @ 1ed64bec
// Search input and autocomplete
.search {
position: relative;
z-index: 2;
flex-grow: 1;
height: $sp-10;
padding: $sp-2;
transition: padding linear #{$transition-duration * 0.5};
@include mq(md) {
position: relative !important;
width: auto !important;
height: 100% !important;
padding: 0;
transition: none;
}
}
.search-input-wrap {
position: relative;
z-index: 1;
height: $sp-8;
overflow: hidden;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
transition: height linear #{$transition-duration * 0.5};
@include mq(md) {
position: absolute;
width: 100%;
max-width: $search-results-width;
height: 100% !important;
border-radius: 0;
box-shadow: none;
transition: width ease $transition-duration;
}
}
.search-input {
position: absolute;
width: 100%;
height: 100%;
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
font-size: 16px;
color: $body-text-color;
background-color: $search-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 0;
@include mq(md) {
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
font-size: 14px;
background-color: $body-background-color;
transition: padding-left linear #{$transition-duration * 0.5};
}
&:focus {
outline: 0;
+ .search-label .search-icon {
color: $link-color;
}
}
}
.search-label {
position: absolute;
display: flex;
height: 100%;
padding-left: $gutter-spacing-sm;
@include mq(md) {
padding-left: $gutter-spacing;
transition: padding-left linear #{$transition-duration * 0.5};
}
.search-icon {
width: #{$sp-4 * 1.2};
height: #{$sp-4 * 1.2};
align-self: center;
color: $grey-dk-000;
}
}
.search-results {
position: absolute;
left: 0;
display: none;
width: 100%;
max-height: calc(100% - #{$sp-10});
overflow-y: auto;
background-color: $search-background-color;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
@include mq(md) {
top: 100%;
width: $search-results-width;
max-height: calc(100vh - 200%) !important;
}
}
.search-results-list {
padding-left: 0;
margin-bottom: $sp-1;
list-style: none;
@include fs-4;
@include mq(md) {
@include fs-3;
}
}
.search-results-list-item {
padding: 0;
margin: 0;
}
.search-result {
display: block;
padding: $sp-1 $sp-3;
&:hover,
&.active {
background-color: $feedback-color;
}
}
.search-result-title {
display: block;
padding-top: $sp-2;
padding-bottom: $sp-2;
@include mq(sm) {
display: inline-block;
width: 40%;
padding-right: $sp-2;
vertical-align: top;
}
}
.search-result-doc {
display: flex;
align-items: center;
word-wrap: break-word;
&.search-result-doc-parent {
opacity: 0.5;
@include fs-3;
@include mq(md) {
@include fs-2;
}
}
.search-result-icon {
width: $sp-4;
height: $sp-4;
margin-right: $sp-2;
color: $link-color;
flex-shrink: 0;
}
.search-result-doc-title {
overflow: auto;
}
}
.search-result-section {
margin-left: #{$sp-4 + $sp-2};
word-wrap: break-word;
}
.search-result-rel-url {
display: block;
margin-left: #{$sp-4 + $sp-2};
overflow: hidden;
color: $search-result-preview-color;
text-overflow: ellipsis;
white-space: nowrap;
@include fs-1;
}
.search-result-previews {
display: block;
padding-top: $sp-2;
padding-bottom: $sp-2;
padding-left: $sp-4;
margin-left: $sp-2;
color: $search-result-preview-color;
word-wrap: break-word;
border-left: $border;
border-left-color: $border-color;
@include fs-2;
@include mq(sm) {
display: inline-block;
width: 60%;
padding-left: $sp-2;
margin-left: 0;
vertical-align: top;
}
}
.search-result-preview + .search-result-preview {
margin-top: $sp-1;
}
.search-result-highlight {
font-weight: bold;
}
.search-no-result {
padding: $sp-2 $sp-3;
@include fs-3;
}
.search-button {
position: fixed;
right: $sp-4;
bottom: $sp-4;
display: flex;
width: $sp-9;
height: $sp-9;
background-color: $search-background-color;
border: 1px solid rgba($link-color, 0.3);
border-radius: #{$sp-9 * 0.5};
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
align-items: center;
justify-content: center;
}
.search-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity ease $transition-duration, width 0s $transition-duration,
height 0s $transition-duration;
}
.search-active {
.search {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
}
.search-input-wrap {
height: $sp-10;
border-radius: 0;
@include mq(md) {
width: $search-results-width;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
}
}
.search-input {
background-color: $search-background-color;
@include mq(md) {
padding-left: 2.3rem;
}
}
.search-label {
@include mq(md) {
padding-left: 0.6rem;
}
}
.search-results {
display: block;
}
.search-overlay {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity ease $transition-duration, width 0s, height 0s;
}
@include mq(md) {
.main {
position: fixed;
right: 0;
left: 0;
}
}
.main-header {
padding-top: $sp-10;
@include mq(md) {
padding-top: 0;
}
}
}
_sass/skiptomain.scss deleted 100644 → 0
+ 0
− 30
View file @ 1ed64bec
// Skipnav
// Skip to main content
a.skip-to-main {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -999;
}
a.skip-to-main:focus,
a.skip-to-main:active {
color: $link-color;
background-color: $body-background-color;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow: auto;
margin: 10px 35%;
padding: 5px;
border-radius: 15px;
border: 4px solid $btn-primary-color;
text-align: center;
font-size: 1.2em;
z-index: 999;
}
_sass/support/_functions.scss deleted 100644 → 0
+ 0
− 9
View file @ 1ed64bec
@function rem($size, $unit: "") {
$rem-size: $size / $root-font-size;
@if $unit == false {
@return #{$rem-size};
} @else {
@return #{$rem-size}rem;
}
}
_sass/support/_variables 2.scss deleted 100644 → 0
+ 0
− 153
View file @ 1ed64bec
//
// Typography
//
$body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif !default;
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$body-line-height: 1.4 !default;
$content-line-height: 1.6 !default;
$body-heading-line-height: 1.25 !default;
//
// Font size
// `-sm` suffix is the size at the small (and above) media query
//
$font-size-1: 9px !default;
$font-size-1-sm: 10px !default;
$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small
$font-size-3: 12px !default; //h5
$font-size-4: 14px !default;
$font-size-5: 16px !default; //h3
$font-size-6: 18px !default; //h2
$font-size-7: 24px !default;
$font-size-8: 32px !default; //h1
$font-size-9: 36px !default;
$font-size-10: 42px !default;
$font-size-10-sm: 48px !default;
//
// Colors
//
$white: #fff !default;
$grey-dk-000: #959396 !default;
$grey-dk-100: #5c5962 !default;
$grey-dk-200: #44434d !default;
$grey-dk-250: #302d36 !default;
$grey-dk-300: #27262b !default;
$grey-lt-000: #f5f6fa !default;
$grey-lt-100: #eeebee !default;
$grey-lt-200: #ecebed !default;
$grey-lt-300: #e6e1e8 !default;
$purple-000: #7253ed !default;
$purple-100: #5e41d0 !default;
$purple-200: #4e26af !default;
$purple-300: #381885 !default;
$blue-000: #2c84fa !default;
$blue-100: #2869e6 !default;
$blue-200: #264caf !default;
$blue-300: #183385 !default;
$green-000: #41d693 !default;
$green-100: #11b584 !default;
$green-200: #009c7b !default;
$green-300: #026e57 !default;
$yellow-000: #ffeb82 !default;
$yellow-100: #fadf50 !default;
$yellow-200: #f7d12e !default;
$yellow-300: #e7af06 !default;
$red-000: #f77e7e !default;
$red-100: #f96e65 !default;
$red-200: #e94c4c !default;
$red-300: #dd2e2e !default;
$body-background-color: $white !default;
$sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
$feedback-color: darken($sidebar-color, 3%) !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
$search-result-preview-color: $grey-dk-000 !default;
$nav-child-link-color: $grey-dk-100 !default;
$link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
//
// Spacing
//
$spacing-unit: 1rem; // 1rem == 16px
$spacers: (
sp-0: 0,
sp-1: $spacing-unit * 0.25,
sp-2: $spacing-unit * 0.5,
sp-3: $spacing-unit * 0.75,
sp-4: $spacing-unit,
sp-5: $spacing-unit * 1.5,
sp-6: $spacing-unit * 2,
sp-7: $spacing-unit * 2.5,
sp-8: $spacing-unit * 3,
sp-9: $spacing-unit * 3.5,
sp-10: $spacing-unit * 4,
) !default;
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px
$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
//
// Borders
//
$border: 1px solid !default;
$border-radius: 4px !default;
$border-color: $grey-lt-100 !default;
//
// Grid system
//
$gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: $content-width - $nav-width !default;
$transition-duration: 400ms;
//
// Media queries in pixels
//
$media-queries: (
xs: 320px,
sm: 500px,
md: $content-width,
lg: $content-width + $nav-width,
xl: 1400px,
) !default;
_sass/support/_variables.scss deleted 100644 → 0
+ 0
− 129
View file @ 1ed64bec
// Typography
$body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
roboto, "Helvetica Neue", arial, sans-serif !default;
$mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$body-line-height: 1.4 !default;
$content-line-height: 1.6 !default;
$body-heading-line-height: 1.25 !default;
// Font size
// `-sm` suffix is the size at the small (and above) media query
$font-size-1: 9px !default;
$font-size-1-sm: 10px !default;
$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small
$font-size-3: 12px !default; // h5
$font-size-4: 14px !default;
$font-size-5: 16px !default; // h3
$font-size-6: 18px !default; // h2
$font-size-7: 24px !default;
$font-size-8: 32px !default; // h1
$font-size-9: 36px !default;
$font-size-10: 42px !default;
$font-size-10-sm: 48px !default;
// Colors
$white: #fff !default;
$grey-dk-000: #959396 !default;
$grey-dk-100: #5c5962 !default;
$grey-dk-200: #44434d !default;
$grey-dk-250: #302d36 !default;
$grey-dk-300: #27262b !default;
$grey-lt-000: #f5f6fa !default;
$grey-lt-100: #eeebee !default;
$grey-lt-200: #ecebed !default;
$grey-lt-300: #e6e1e8 !default;
$purple-000: #7253ed !default;
$purple-100: #5e41d0 !default;
$purple-200: #4e26af !default;
$purple-300: #381885 !default;
$blue-000: #2c84fa !default;
$blue-100: #2869e6 !default;
$blue-200: #264caf !default;
$blue-300: #183385 !default;
$green-000: #41d693 !default;
$green-100: #11b584 !default;
$green-200: #009c7b !default;
$green-300: #026e57 !default;
$yellow-000: #ffeb82 !default;
$yellow-100: #fadf50 !default;
$yellow-200: #f7d12e !default;
$yellow-300: #e7af06 !default;
$red-000: #f77e7e !default;
$red-100: #f96e65 !default;
$red-200: #e94c4c !default;
$red-300: #dd2e2e !default;
$body-background-color: $white !default;
$sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
$feedback-color: darken($sidebar-color, 3%) !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
$search-result-preview-color: $grey-dk-000 !default;
$nav-child-link-color: $grey-dk-100 !default;
$link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
// Spacing
$spacing-unit: 1rem; // 1rem == 16px
$spacers: (
sp-0: 0,
sp-1: $spacing-unit * 0.25,
sp-2: $spacing-unit * 0.5,
sp-3: $spacing-unit * 0.75,
sp-4: $spacing-unit,
sp-5: $spacing-unit * 1.5,
sp-6: $spacing-unit * 2,
sp-7: $spacing-unit * 2.5,
sp-8: $spacing-unit * 3,
sp-9: $spacing-unit * 3.5,
sp-10: $spacing-unit * 4,
) !default;
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px
$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
// Borders
$border: 1px solid !default;
$border-radius: 4px !default;
$border-color: $grey-lt-100 !default;
// Grid system
$gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: $content-width - $nav-width !default;
$transition-duration: 400ms;
// Media queries in pixels
$media-queries: (
xs: 320px,
sm: 500px,
md: $content-width,
lg: $content-width + $nav-width,
xl: 1400px,
) !default;
_sass/support/mixins/_buttons.scss deleted 100644 → 0
+ 0
− 27
View file @ 1ed64bec
// Colored button
@mixin btn-color($fg, $bg) {
color: $fg;
background-color: darken($bg, 2%);
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
&:hover,
&.zeroclipboard-is-hover {
color: $fg;
background-color: darken($bg, 4%);
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($bg, 5%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken($bg, 10%);
}
}
_sass/support/mixins/_layout.scss deleted 100644 → 0
+ 0
− 34
View file @ 1ed64bec
// Media query
// Media query mixin
// Usage:
// @include mq(md) {
// ..medium and up styles
// }
@mixin mq($name) {
// Retrieves the value from the key
$value: map-get($media-queries, $name);
// If the key exists in the map
@if $value {
// Prints a media query based on the value
@media (min-width: rem($value)) {
@content;
}
} @else {
@warn "No value could be retrieved from `#{$media-query}`. "
+ "Please make sure it is defined in `$media-queries` map.";
}
}
// Responsive container
@mixin container {
padding-right: $gutter-spacing-sm;
padding-left: $gutter-spacing-sm;
@include mq(md) {
padding-right: $gutter-spacing;
padding-left: $gutter-spacing;
}
}
_sass/support/mixins/_typography.scss deleted 100644 → 0
+ 0
− 84
View file @ 1ed64bec
@mixin fs-1 {
font-size: $font-size-1 !important;
@include mq(sm) {
font-size: $font-size-1-sm !important;
}
}
@mixin fs-2 {
font-size: $font-size-2 !important;
@include mq(sm) {
font-size: $font-size-3 !important;
}
}
@mixin fs-3 {
font-size: $font-size-3 !important;
@include mq(sm) {
font-size: $font-size-4 !important;
}
}
@mixin fs-4 {
font-size: $font-size-4 !important;
@include mq(sm) {
font-size: $font-size-5 !important;
}
}
@mixin fs-5 {
font-size: $font-size-5 !important;
@include mq(sm) {
font-size: $font-size-6 !important;
}
}
@mixin fs-6 {
font-size: $font-size-6 !important;
@include mq(sm) {
font-size: $font-size-7 !important;
line-height: $body-heading-line-height;
}
}
@mixin fs-7 {
font-size: $font-size-7 !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: $font-size-8 !important;
}
}
@mixin fs-8 {
font-size: $font-size-8 !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: $font-size-9 !important;
}
}
@mixin fs-9 {
font-size: $font-size-9 !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: $font-size-10 !important;
}
}
@mixin fs-10 {
font-size: $font-size-10 !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: $font-size-10-sm !important;
}
}
_sass/support/mixins/mixins.scss deleted 100644 → 0
+ 0
− 3
View file @ 1ed64bec
@import "./layout";
@import "./buttons";
@import "./typography";
_sass/support/support.scss deleted 100644 → 0
+ 0
− 3
View file @ 1ed64bec
@import "./variables";
@import "./functions";
@import "./mixins/mixins";
_sass/tables.scss deleted 100644 → 0
+ 0
− 54
View file @ 1ed64bec
// Tables
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
.table-wrapper {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: $sp-5;
overflow-x: auto;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
}
table {
display: table;
min-width: 100%;
border-collapse: separate;
}
th,
td {
@include fs-3;
min-width: 120px;
padding: $sp-2 $sp-3;
background-color: $table-background-color;
border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;
&:first-of-type {
border-left: 0;
}
}
tbody {
tr {
&:last-of-type {
th,
td {
border-bottom: 0;
}
td {
padding-bottom: $sp-3;
}
}
}
}
thead {
th {
border-bottom: $border $border-color;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment