_sass/_utilities.scss in minimal-mistakes-jekyll-4.1.0 vs _sass/_utilities.scss in minimal-mistakes-jekyll-4.1.1
- old
+ new
@@ -1,470 +1,470 @@
-/* ==========================================================================
- UTILITY CLASSES
- ========================================================================== */
-
-/*
- Visibility
- ========================================================================== */
-
-/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
-
-.hidden {
- display: none;
- visibility: hidden;
-}
-
-/* for preloading images */
-
-.load {
- display: none;
-}
-
-.transparent {
- opacity: 0;
-}
-
-/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
-
-.visually-hidden,
-.screen-reader-text,
-.screen-reader-text span,
-.screen-reader-shortcut {
- position: absolute !important;
- clip: rect(1px, 1px, 1px, 1px);
- height: 1px !important;
- width: 1px !important;
- border: 0 !important;
- overflow: hidden;
-}
-
-body:hover .visually-hidden a,
-body:hover .visually-hidden input,
-body:hover .visually-hidden button {
- display: none !important;
-}
-
-/* screen readers */
-
-.screen-reader-text:focus,
-.screen-reader-shortcut:focus {
- clip: auto !important;
- height: auto !important;
- width: auto !important;
- display: block;
- font-size: 1em;
- font-weight: bold;
- padding: 15px 23px 14px;
- background: #fff;
- z-index: 100000;
- text-decoration: none;
- box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
-}
-
-
-/*
- Skip links
- ========================================================================== */
-
-.skip-link {
- position: fixed;
- z-index: 20;
- margin: 0;
- font-family: $sans-serif;
- white-space: nowrap;
-}
-
-.skip-link li {
- height: 0;
- width: 0;
- list-style: none;
-}
-
-
-/*
- Type
- ========================================================================== */
-
-.text-left {
- text-align: left;
-}
-
-.text-center {
- text-align: center;
-}
-
-.text-right {
- text-align: right;
-}
-
-.text-justify {
- text-align: justify;
-}
-
-.text-nowrap {
- white-space: nowrap;
-}
-
-
-/*
- Alignment
- ========================================================================== */
-
-/* clearfix */
-
-.cf { clear: both; }
-
-.wrapper {
- @include container();
-}
-
-
-/*
- Images
- ========================================================================== */
-
-/* image align left */
-
-.align-left {
- display: block;
- margin-left: auto;
- margin-right: auto;
-
- @include breakpoint($small) {
- float: left;
- margin-right: 1em;
- }
-}
-
-/* image align right */
-
-.align-right {
- display: block;
- margin-left: auto;
- margin-right: auto;
-
- @include breakpoint($small) {
- float: right;
- margin-left: 1em;
- }
-}
-
-/* image align center */
-
-.align-center {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-/* file page content container */
-
-.full {
- @include breakpoint($large){
- margin-right: -1 * span(2.5 of 12) !important;
- }
-}
-
-/*
- Icons
- ========================================================================== */
-
-.icon {
- display: inline-block;
- fill: currentColor;
- width: 1em;
- height: 1.1em;
- line-height: 1;
- position: relative;
- top: -0.1em;
- vertical-align: middle;
-}
-
-/* social icons*/
-
-.social-icons {
- .fa {
- color: #000;
- }
-
- .fa-behance,
- .fa-behance-square {
- color: $behance-color;
- }
-
- .fa-dribbble {
- color: $dribbble-color;
- }
-
- .fa-facebook,
- .fa-facebook-square {
- color: $facebook-color;
- }
-
- .fa-flickr {
- color: $flickr-color;
- }
-
- .fa-foursquare {
- color: $foursquare-color;
- }
-
- .fa-github,
- .fa-github-alt,
- .fa-github-square {
- color: $github-color;
- }
-
- .fa-google-plus,
- .fa-google-plus-square {
- color: $google-plus-color;
- }
-
- .fa-instagram {
- color: $instagram-color;
- }
-
- .fa-lastfm,
- .fa-lastfm-square {
- color: $lastfm-color;
- }
-
- .fa-linkedin,
- .fa-linkedin-square {
- color: $linkedin-color;
- }
-
- .fa-pinterest,
- .fa-pinterest-p,
- .fa-pinterest-square {
- color: $pinterest-color;
- }
-
- .fa-rss,
- .fa-rss-square {
- color: $rss-color;
- }
-
- .fa-soundcloud {
- color: $soundcloud-color;
- }
-
- .fa-stack-exchange,
- .fa-stack-overflow {
- color: $stackoverflow-color;
- }
-
- .fa-tumblr,
- .fa-tumblr-square {
- color: $tumblr-color;
- }
-
- .fa-twitter,
- .fa-twitter-square {
- color: $twitter-color;
- }
-
- .fa-vimeo,
- .fa-vimeo-square {
- color: $vimeo-color;
- }
-
- .fa-vine {
- color: $vine-color;
- }
-
- .fa-youtube,
- .fa-youtube-square,
- .fa-youtube-play {
- color: $youtube-color;
- }
-
- .fa-xing,
- .fa-xing-square {
- color: $xing-color;
- }
-}
-
-
-/*
- Navicons
- ========================================================================== */
-
-.navicon {
- position: relative;
- width: $navicon-width;
- height: $navicon-height;
- background: #fff;
- margin: auto;
- -webkit-transition: 0.3s;
- transition: 0.3s;
-
- &:before,
- &:after {
- content: "";
- position: absolute;
- left: 0;
- width: $navicon-width;
- height: $navicon-height;
- background: #fff;
- -webkit-transition: 0.3s;
- transition: 0.3s;
- }
-
- &:before {
- top: (-2 * $navicon-height);
- }
-
- &:after {
- bottom: (-2 * $navicon-height);
- }
-}
-
-.close .navicon {
- /* hide the middle line*/
- background: transparent;
-
- /* overlay the lines by setting both their top values to 0*/
- &:before, &:after{
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- top: 0;
- width: $navicon-width;
- }
-
- /* rotate the lines to form the x shape*/
- &:before{
- -webkit-transform: rotate3d(0,0,1,45deg);
- transform: rotate3d(0,0,1,45deg);
- }
- &:after{
- -webkit-transform: rotate3d(0,0,1,-45deg);
- transform: rotate3d(0,0,1,-45deg);
- }
-}
-
-
-/*
- Sticky, fixed to top content
- ========================================================================== */
-
-.sticky {
- @include breakpoint($large) {
- @include clearfix();
- position: -webkit-sticky;
- position: sticky;
- top: 2em;
-
- > * {
- display: block;
- }
- }
-}
-
-
-/*
- Wells
- ========================================================================== */
-
-.well {
- min-height: 20px;
- padding: 19px;
- margin-bottom: 20px;
- background-color: #f5f5f5;
- border: 1px solid #e3e3e3;
- border-radius: $border-radius;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-
-/*
- Modals
- ========================================================================== */
-
-.show-modal {
- overflow: hidden;
- position: relative;
-
- &:before {
- position: absolute;
- content: "";
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- background-color: rgba(255, 255, 255, 0.85);
- }
-
- .modal {
- display: block;
- }
-}
-
-.modal {
- display: none;
- position: fixed;
- width: 300px;
- top: 50%;
- left: 50%;
- margin-left: -150px;
- margin-top: -150px;
- min-height: 0;
- z-index: 9999;
- background: #fff;
- border: 1px solid $border-color;
- border-radius: $border-radius;
- box-shadow: $box-shadow;
-
- &__title {
- margin: 0;
- padding: 0.5em 1em;
- }
-
- &__supporting-text {
- padding: 0 1em 0.5em 1em;
- }
-
- &__actions {
- padding: 0.5em 1em;
- border-top: 1px solid $border-color;
- }
-}
-
-
-/*
- Footnotes
- ========================================================================== */
-
-.footnote {
- color: mix(#fff, $gray, 25%);
- text-decoration: none;
-}
-
-.footnotes {
- color: mix(#fff, $gray, 25%);
-
- ol, li, p {
- margin-bottom: 0;
- font-size: $type-size-6;
- }
-}
-
-a.reversefootnote {
- color: $gray;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-}
-
-
-/*
- Required
- ========================================================================== */
-
-.required {
- color: $danger-color;
- font-weight: bold;
+/* ==========================================================================
+ UTILITY CLASSES
+ ========================================================================== */
+
+/*
+ Visibility
+ ========================================================================== */
+
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+/* for preloading images */
+
+.load {
+ display: none;
+}
+
+.transparent {
+ opacity: 0;
+}
+
+/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
+
+.visually-hidden,
+.screen-reader-text,
+.screen-reader-text span,
+.screen-reader-shortcut {
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px !important;
+ width: 1px !important;
+ border: 0 !important;
+ overflow: hidden;
+}
+
+body:hover .visually-hidden a,
+body:hover .visually-hidden input,
+body:hover .visually-hidden button {
+ display: none !important;
+}
+
+/* screen readers */
+
+.screen-reader-text:focus,
+.screen-reader-shortcut:focus {
+ clip: auto !important;
+ height: auto !important;
+ width: auto !important;
+ display: block;
+ font-size: 1em;
+ font-weight: bold;
+ padding: 15px 23px 14px;
+ background: #fff;
+ z-index: 100000;
+ text-decoration: none;
+ box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+}
+
+
+/*
+ Skip links
+ ========================================================================== */
+
+.skip-link {
+ position: fixed;
+ z-index: 20;
+ margin: 0;
+ font-family: $sans-serif;
+ white-space: nowrap;
+}
+
+.skip-link li {
+ height: 0;
+ width: 0;
+ list-style: none;
+}
+
+
+/*
+ Type
+ ========================================================================== */
+
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.text-justify {
+ text-align: justify;
+}
+
+.text-nowrap {
+ white-space: nowrap;
+}
+
+
+/*
+ Alignment
+ ========================================================================== */
+
+/* clearfix */
+
+.cf { clear: both; }
+
+.wrapper {
+ @include container();
+}
+
+
+/*
+ Images
+ ========================================================================== */
+
+/* image align left */
+
+.align-left {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+
+ @include breakpoint($small) {
+ float: left;
+ margin-right: 1em;
+ }
+}
+
+/* image align right */
+
+.align-right {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+
+ @include breakpoint($small) {
+ float: right;
+ margin-left: 1em;
+ }
+}
+
+/* image align center */
+
+.align-center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* file page content container */
+
+.full {
+ @include breakpoint($large){
+ margin-right: -1 * span(2.5 of 12) !important;
+ }
+}
+
+/*
+ Icons
+ ========================================================================== */
+
+.icon {
+ display: inline-block;
+ fill: currentColor;
+ width: 1em;
+ height: 1.1em;
+ line-height: 1;
+ position: relative;
+ top: -0.1em;
+ vertical-align: middle;
+}
+
+/* social icons*/
+
+.social-icons {
+ .fa {
+ color: #000;
+ }
+
+ .fa-behance,
+ .fa-behance-square {
+ color: $behance-color;
+ }
+
+ .fa-dribbble {
+ color: $dribbble-color;
+ }
+
+ .fa-facebook,
+ .fa-facebook-square {
+ color: $facebook-color;
+ }
+
+ .fa-flickr {
+ color: $flickr-color;
+ }
+
+ .fa-foursquare {
+ color: $foursquare-color;
+ }
+
+ .fa-github,
+ .fa-github-alt,
+ .fa-github-square {
+ color: $github-color;
+ }
+
+ .fa-google-plus,
+ .fa-google-plus-square {
+ color: $google-plus-color;
+ }
+
+ .fa-instagram {
+ color: $instagram-color;
+ }
+
+ .fa-lastfm,
+ .fa-lastfm-square {
+ color: $lastfm-color;
+ }
+
+ .fa-linkedin,
+ .fa-linkedin-square {
+ color: $linkedin-color;
+ }
+
+ .fa-pinterest,
+ .fa-pinterest-p,
+ .fa-pinterest-square {
+ color: $pinterest-color;
+ }
+
+ .fa-rss,
+ .fa-rss-square {
+ color: $rss-color;
+ }
+
+ .fa-soundcloud {
+ color: $soundcloud-color;
+ }
+
+ .fa-stack-exchange,
+ .fa-stack-overflow {
+ color: $stackoverflow-color;
+ }
+
+ .fa-tumblr,
+ .fa-tumblr-square {
+ color: $tumblr-color;
+ }
+
+ .fa-twitter,
+ .fa-twitter-square {
+ color: $twitter-color;
+ }
+
+ .fa-vimeo,
+ .fa-vimeo-square {
+ color: $vimeo-color;
+ }
+
+ .fa-vine {
+ color: $vine-color;
+ }
+
+ .fa-youtube,
+ .fa-youtube-square,
+ .fa-youtube-play {
+ color: $youtube-color;
+ }
+
+ .fa-xing,
+ .fa-xing-square {
+ color: $xing-color;
+ }
+}
+
+
+/*
+ Navicons
+ ========================================================================== */
+
+.navicon {
+ position: relative;
+ width: $navicon-width;
+ height: $navicon-height;
+ background: #fff;
+ margin: auto;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ width: $navicon-width;
+ height: $navicon-height;
+ background: #fff;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ }
+
+ &:before {
+ top: (-2 * $navicon-height);
+ }
+
+ &:after {
+ bottom: (-2 * $navicon-height);
+ }
+}
+
+.close .navicon {
+ /* hide the middle line*/
+ background: transparent;
+
+ /* overlay the lines by setting both their top values to 0*/
+ &:before, &:after{
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ top: 0;
+ width: $navicon-width;
+ }
+
+ /* rotate the lines to form the x shape*/
+ &:before{
+ -webkit-transform: rotate3d(0,0,1,45deg);
+ transform: rotate3d(0,0,1,45deg);
+ }
+ &:after{
+ -webkit-transform: rotate3d(0,0,1,-45deg);
+ transform: rotate3d(0,0,1,-45deg);
+ }
+}
+
+
+/*
+ Sticky, fixed to top content
+ ========================================================================== */
+
+.sticky {
+ @include breakpoint($large) {
+ @include clearfix();
+ position: -webkit-sticky;
+ position: sticky;
+ top: 2em;
+
+ > * {
+ display: block;
+ }
+ }
+}
+
+
+/*
+ Wells
+ ========================================================================== */
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: $border-radius;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+
+/*
+ Modals
+ ========================================================================== */
+
+.show-modal {
+ overflow: hidden;
+ position: relative;
+
+ &:before {
+ position: absolute;
+ content: "";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 999;
+ background-color: rgba(255, 255, 255, 0.85);
+ }
+
+ .modal {
+ display: block;
+ }
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ width: 300px;
+ top: 50%;
+ left: 50%;
+ margin-left: -150px;
+ margin-top: -150px;
+ min-height: 0;
+ z-index: 9999;
+ background: #fff;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ box-shadow: $box-shadow;
+
+ &__title {
+ margin: 0;
+ padding: 0.5em 1em;
+ }
+
+ &__supporting-text {
+ padding: 0 1em 0.5em 1em;
+ }
+
+ &__actions {
+ padding: 0.5em 1em;
+ border-top: 1px solid $border-color;
+ }
+}
+
+
+/*
+ Footnotes
+ ========================================================================== */
+
+.footnote {
+ color: mix(#fff, $gray, 25%);
+ text-decoration: none;
+}
+
+.footnotes {
+ color: mix(#fff, $gray, 25%);
+
+ ol, li, p {
+ margin-bottom: 0;
+ font-size: $type-size-6;
+ }
+}
+
+a.reversefootnote {
+ color: $gray;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+
+/*
+ Required
+ ========================================================================== */
+
+.required {
+ color: $danger-color;
+ font-weight: bold;
}
\ No newline at end of file