mirror of
https://github.com/hacks-guide/Guide_3DS.git
synced 2025-08-30 20:00:09 +02:00
mm 4.0.9
This commit is contained in:
Plailect
@@ -131,7 +131,7 @@
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: mix(#fff, $gray, 50%);
|
||||
color: $link-color;
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@@ -236,9 +236,9 @@
|
||||
width: 100%;
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0); /* hide*/
|
||||
-webkit-transform: scaleX(0) translate3d(0, 0 , 0);
|
||||
-ms-transform: scaleX(0) translate3d(0, 0 , 0);
|
||||
transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
@@ -314,20 +314,104 @@
|
||||
========================================================================== */
|
||||
|
||||
.nav__list {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
ul {
|
||||
margin-bottom: 1em;
|
||||
input[type="checkbox"],
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.125em 0;
|
||||
color: inherit;
|
||||
@include breakpoint(max-width ($large - 1px)) {
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5em 2.5em 0.5em 1em;
|
||||
color: $gray;
|
||||
font-size: $type-size-6;
|
||||
font-weight: bold;
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius;
|
||||
z-index: 20;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.25em;
|
||||
width: 0.75em;
|
||||
height: 0.125em;
|
||||
line-height: 1;
|
||||
background-color: $gray;
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-color: $gray;
|
||||
background-color: mix(white, #000, 20%);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* selected*/
|
||||
input:checked + label {
|
||||
color: white;
|
||||
background-color: mix(white, #000, 20%);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// on hover show expand
|
||||
label:hover:after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
input:checked + label:hover:after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25em 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
padding-top: 0.125em;
|
||||
padding-bottom: 0.125em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__list .nav__items {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.active {
|
||||
@@ -343,6 +427,33 @@
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(max-width ($large - 1px)) {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
opacity: 0%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
-webkit-transition: 0.3s ease-in-out;
|
||||
transition: 0.3s ease-in-out;
|
||||
-webkit-transform: translate(0, 10%);
|
||||
-ms-transform: translate(0, 10%);
|
||||
transform: translate(0, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(max-width ($large - 1px)) {
|
||||
.nav__list input:checked ~ .nav__items {
|
||||
-webkit-transition: 0.5s ease-in-out;
|
||||
transition: 0.5s ease-in-out;
|
||||
max-height: 9999px; // exaggerate max-height to accommodate tall lists
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
margin-top: 1em;
|
||||
-webkit-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.nav__title {
|
||||
|
||||
@@ -7,6 +7,9 @@
|
||||
========================================================================== */
|
||||
|
||||
.sidebar {
|
||||
-webkit-transform: translate3d(0, 0 , 0);
|
||||
transform: translate3d(0, 0 , 0);
|
||||
|
||||
@include clearfix();
|
||||
margin-bottom: 1em;
|
||||
|
||||
@@ -14,7 +17,7 @@
|
||||
@include span(2 of 12);
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@@ -30,10 +33,6 @@
|
||||
font-family: $sans-serif-narrow;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
font-size: $type-size-5;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-6;
|
||||
@@ -229,4 +228,4 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,141 +6,123 @@
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
$doc-font-size : 16;
|
||||
$doc-font-size : 16 !default;
|
||||
|
||||
/* paragraph indention */
|
||||
$paragraph-indent : false; // true, false (default)
|
||||
$indent-var : 1.3em;
|
||||
$paragraph-indent : false !default; // true, false (default)
|
||||
$indent-var : 1.3em !default;
|
||||
|
||||
/* system typefaces */
|
||||
$serif : Georgia, Times, serif;
|
||||
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
|
||||
$monospace : Monaco, Consolas, "Lucida Console", monospace;
|
||||
$serif : Georgia, Times, serif !default;
|
||||
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
|
||||
$monospace : Monaco, Consolas, "Lucida Console", monospace !default;
|
||||
|
||||
/* sans serif typefaces */
|
||||
$sans-serif-narrow : $sans-serif;
|
||||
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif;
|
||||
$sans-serif-narrow : $sans-serif !default;
|
||||
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
|
||||
|
||||
/* serif typefaces */
|
||||
$georgia : Georgia, serif;
|
||||
$times : Times, serif;
|
||||
$bodoni : "Bodoni MT", serif;
|
||||
$calisto : "Calisto MT", serif;
|
||||
$garamond : Garamond, serif;
|
||||
$georgia : Georgia, serif !default;
|
||||
$times : Times, serif !default;
|
||||
$bodoni : "Bodoni MT", serif !default;
|
||||
$calisto : "Calisto MT", serif !default;
|
||||
$garamond : Garamond, serif !default;
|
||||
|
||||
$global-font-family : $sans-serif;
|
||||
$header-font-family : $sans-serif;
|
||||
$caption-font-family : $serif;
|
||||
$global-font-family : $sans-serif !default;
|
||||
$header-font-family : $sans-serif !default;
|
||||
$caption-font-family : $serif !default;
|
||||
|
||||
/* type scale */
|
||||
$type-size-1 : 2.441em; // ~39.056px
|
||||
$type-size-2 : 1.953em; // ~31.248px
|
||||
$type-size-3 : 1.563em; // ~25.008px
|
||||
$type-size-4 : 1.25em; // ~20px
|
||||
$type-size-5 : .9em; // ~16px
|
||||
$type-size-6 : 0.75em; // ~12px
|
||||
$type-size-7 : 0.6875em; // ~11px
|
||||
$type-size-8 : 0.625em; // ~10px
|
||||
$type-size-1 : 2.441em !default; // ~39.056px
|
||||
$type-size-2 : 1.953em !default; // ~31.248px
|
||||
$type-size-3 : 1.563em !default; // ~25.008px
|
||||
$type-size-4 : 1.25em !default; // ~20px
|
||||
$type-size-5 : .9em !default; // ~16px
|
||||
$type-size-6 : 0.75em !default; // ~12px
|
||||
$type-size-7 : 0.6875em !default; // ~11px
|
||||
$type-size-8 : 0.625em !default; // ~10px
|
||||
|
||||
|
||||
/*
|
||||
Colors
|
||||
========================================================================== */
|
||||
|
||||
$gray : #7a8288;
|
||||
$dark-gray : mix(#000, $gray, 40%);
|
||||
$darker-gray : mix(#000, $gray, 60%);
|
||||
$light-gray : mix(#fff, $gray, 50%);
|
||||
$lighter-gray : mix(#fff, $gray, 90%);
|
||||
$gray : #7a8288 !default;
|
||||
$dark-gray : mix(#000, $gray, 40%) !default;
|
||||
$darker-gray : mix(#000, $gray, 60%) !default;
|
||||
$light-gray : mix(#fff, $gray, 50%) !default;
|
||||
$lighter-gray : mix(#fff, $gray, 90%) !default;
|
||||
|
||||
$body-color : #fff;
|
||||
$background-color : #fff;
|
||||
$code-background-color : #fafafa;
|
||||
$code-background-color-dark : $light-gray;
|
||||
$text-color : $darker-gray;
|
||||
$border-color : $lighter-gray;
|
||||
$body-color : #fff !default;
|
||||
$background-color : #fff !default;
|
||||
$code-background-color : #fafafa !default;
|
||||
$code-background-color-dark : $light-gray !default;
|
||||
$text-color : $dark-gray !default;
|
||||
$border-color : $lighter-gray !default;
|
||||
|
||||
$primary-color : #7a8288;
|
||||
$success-color : #62c462;
|
||||
$warning-color : #f89406;
|
||||
$danger-color : #ee5f5b;
|
||||
$info-color : #52adc8;
|
||||
$primary-color : #7a8288 !default;
|
||||
$success-color : #62c462 !default;
|
||||
$warning-color : #f89406 !default;
|
||||
$danger-color : #ee5f5b !default;
|
||||
$info-color : #52adc8 !default;
|
||||
|
||||
/* brands */
|
||||
$behance-color : #1769FF;
|
||||
$dribbble-color : #ea4c89;
|
||||
$facebook-color : #3b5998;
|
||||
$flickr-color : #ff0084;
|
||||
$foursquare-color : #0072b1;
|
||||
$github-color : #171516;
|
||||
$google-plus-color : #dd4b39;
|
||||
$instagram-color : #517fa4;
|
||||
$lastfm-color : #d51007;
|
||||
$linkedin-color : #007bb6;
|
||||
$pinterest-color : #cb2027;
|
||||
$rss-color : #fa9b39;
|
||||
$soundcloud-color : #ff3300;
|
||||
$stackoverflow-color : #fe7a15;
|
||||
$tumblr-color : #32506d;
|
||||
$twitter-color : #55acee;
|
||||
$vimeo-color : #1ab7ea;
|
||||
$vine-color : #00bf8f;
|
||||
$youtube-color : #bb0000;
|
||||
$xing-color : #006567;
|
||||
$behance-color : #1769FF !default;
|
||||
$dribbble-color : #ea4c89 !default;
|
||||
$facebook-color : #3b5998 !default;
|
||||
$flickr-color : #ff0084 !default;
|
||||
$foursquare-color : #0072b1 !default;
|
||||
$github-color : #171516 !default;
|
||||
$google-plus-color : #dd4b39 !default;
|
||||
$instagram-color : #517fa4 !default;
|
||||
$lastfm-color : #d51007 !default;
|
||||
$linkedin-color : #007bb6 !default;
|
||||
$pinterest-color : #cb2027 !default;
|
||||
$rss-color : #fa9b39 !default;
|
||||
$soundcloud-color : #ff3300 !default;
|
||||
$stackoverflow-color : #fe7a15 !default;
|
||||
$tumblr-color : #32506d !default;
|
||||
$twitter-color : #55acee !default;
|
||||
$vimeo-color : #1ab7ea !default;
|
||||
$vine-color : #00bf8f !default;
|
||||
$youtube-color : #bb0000 !default;
|
||||
$xing-color : #006567 !default;
|
||||
|
||||
|
||||
/* links */
|
||||
$link-color : $info-color;
|
||||
$link-color-hover : mix(#000, $link-color, 25%);
|
||||
$link-color-visited : mix(#fff, $link-color, 25%);
|
||||
$masthead-link-color : $primary-color;
|
||||
$masthead-link-color-hover : mix(#000, $primary-color, 25%);
|
||||
$link-color : $info-color !default;
|
||||
$link-color-hover : mix(#000, $link-color, 25%) !default;
|
||||
$link-color-visited : mix(#fff, $link-color, 25%) !default;
|
||||
$masthead-link-color : $primary-color !default;
|
||||
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
|
||||
|
||||
|
||||
/*
|
||||
Breakpoints
|
||||
========================================================================== */
|
||||
|
||||
@include breakpoint-set("to ems", true);
|
||||
|
||||
$small : 768px;
|
||||
$medium : 900px;
|
||||
$medium-wide : 1024px;
|
||||
$large : 1280px;
|
||||
$x-large : 1400px;
|
||||
$small : 768px !default;
|
||||
$medium : 900px !default;
|
||||
$medium-wide : 1024px !default;
|
||||
$large : 1280px !default;
|
||||
$x-large : 1400px !default;
|
||||
|
||||
|
||||
/*
|
||||
Grid
|
||||
========================================================================== */
|
||||
|
||||
$right-sidebar-width-narrow : 200px;
|
||||
$right-sidebar-width : 300px;
|
||||
$right-sidebar-width-wide : 400px;
|
||||
|
||||
$susy: (
|
||||
columns: 12,
|
||||
// column-width: 90px,
|
||||
gutters: 1/4,
|
||||
math: fluid,
|
||||
output: float,
|
||||
gutter-position: after,
|
||||
container: $large,
|
||||
global-box-sizing: border-box,
|
||||
// debug: (
|
||||
// image: show,
|
||||
// color: blue,
|
||||
// output: overlay,
|
||||
// toggle: top right,
|
||||
// ),
|
||||
);
|
||||
$right-sidebar-width-narrow : 200px !default;
|
||||
$right-sidebar-width : 300px !default;
|
||||
$right-sidebar-width-wide : 400px !default;
|
||||
|
||||
|
||||
/*
|
||||
Other
|
||||
========================================================================== */
|
||||
|
||||
$border-radius : 4px;
|
||||
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
|
||||
$navicon-width : 28px;
|
||||
$navicon-height : 4px;
|
||||
$global-transition : all 0.2s ease-in-out;
|
||||
$border-radius : 4px !default;
|
||||
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
|
||||
$navicon-width : 28px !default;
|
||||
$navicon-height : 4px !default;
|
||||
$global-transition : all 0.2s ease-in-out !default;
|
||||
|
||||
Reference in New Issue
Block a user