aboutsummaryrefslogtreecommitdiff
path: root/_sass/minimal-mistakes/_utilities.scss
diff options
context:
space:
mode:
Diffstat (limited to '_sass/minimal-mistakes/_utilities.scss')
-rw-r--r--_sass/minimal-mistakes/_utilities.scss562
1 files changed, 562 insertions, 0 deletions
diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
new file mode 100644
index 0000000..427e383
--- /dev/null
+++ b/_sass/minimal-mistakes/_utilities.scss
@@ -0,0 +1,562 @@
+/* ==========================================================================
+ UTILITY CLASSES
+ ========================================================================== */
+
+/*
+ Visibility
+ ========================================================================== */
+
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+
+.hidden,
+.is--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, 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;
+}
+
+/*
+ Task lists
+ ========================================================================== */
+
+.task-list {
+ padding:0;
+
+ li {
+ list-style-type: none;
+ }
+
+ .task-list-item-checkbox {
+ margin-right: 0.5em;
+ opacity: 1;
+ }
+}
+
+.task-list .task-list {
+ margin-left: 1em;
+}
+
+/*
+ Alignment
+ ========================================================================== */
+
+/* clearfix */
+
+.cf {
+ clear: both;
+}
+
+.wrapper {
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+}
+
+/*
+ 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 {
+ .fas,
+ .fab,
+ .far,
+ .fal {
+ color: $text-color;
+ }
+
+ .fa-behance,
+ .fa-behance-square {
+ color: $behance-color;
+ }
+
+ .fa-bitbucket {
+ color: $bitbucket-color;
+ }
+
+ .fa-dribbble,
+ .fa-dribble-square {
+ color: $dribbble-color;
+ }
+
+ .fa-facebook,
+ .fa-facebook-square,
+ .fa-facebook-f {
+ 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-gitlab {
+ color: $gitlab-color;
+ }
+
+ .fa-instagram {
+ color: $instagram-color;
+ }
+
+ .fa-lastfm,
+ .fa-lastfm-square {
+ color: $lastfm-color;
+ }
+
+ .fa-linkedin,
+ .fa-linkedin-in {
+ color: $linkedin-color;
+ }
+
+ .fa-mastodon,
+ .fa-mastodon-square {
+ color: $mastodon-color;
+ }
+
+ .fa-pinterest,
+ .fa-pinterest-p,
+ .fa-pinterest-square {
+ color: $pinterest-color;
+ }
+
+ .fa-reddit {
+ color: $reddit-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,
+ .fa-vimeo-v {
+ color: $vimeo-color;
+ }
+
+ .fa-vine {
+ color: $vine-color;
+ }
+
+ .fa-youtube {
+ color: $youtube-color;
+ }
+
+ .fa-xing,
+ .fa-xing-square {
+ color: $xing-color;
+ }
+}
+
+/*
+ Navicons
+ ========================================================================== */
+
+.navicon {
+ position: relative;
+ width: $navicon-width;
+ height: $navicon-height;
+ background: $primary-color;
+ margin: auto;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ width: $navicon-width;
+ height: $navicon-height;
+ background: $primary-color;
+ -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);
+ }
+}
+
+.greedy-nav__toggle:hover {
+ .navicon,
+ .navicon:before,
+ .navicon:after {
+ background: mix(#000, $primary-color, 25%);
+ }
+
+ &.close {
+ .navicon {
+ background: transparent;
+ }
+ }
+}
+
+/*
+ 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;
+}
+
+/*
+ Google Custom Search Engine
+ ========================================================================== */
+
+.gsc-control-cse {
+ table,
+ tr,
+ td {
+ border: 0; /* remove table borders widget */
+ }
+}
+
+/*
+ Responsive Video Embed
+ ========================================================================== */
+
+.responsive-video-container {
+ position: relative;
+ margin-bottom: 1em;
+ padding-bottom: 56.25%;
+ height: 0;
+ overflow: hidden;
+ max-width: 100%;
+
+ iframe,
+ object,
+ embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+// full screen video fixes
+:-webkit-full-screen-ancestor {
+ .masthead,
+ .page__footer {
+ position: static;
+ }
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-07-08 21:34:06 +0000