base.css in AT Tools 8.2
@charset "UTF-8";
/**
* Page
* - page layout additions and overrides.
============================================================================ */
.page {
position: relative;
min-height: 100%;
min-width: 100%;
}
.page-top, .page-bottom {
padding: 0;
margin: 0;
}
.l-pr {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.l-rw {
padding: 0 0.625em;
}
.l-r {
transition: all, 225ms, ease-in-out;
}
/**
* Elements
* - set element global styles, basically whenever this element appears
* it should look like this by default.
============================================================================ */
html {
font-size: 100%;
line-height: 1.5em;
}
body {
font-family: sans-serif;
padding: 0;
margin: 0;
-webkit-font-smoothing: subpixel-antialiased;
}
[dir="rtl"] body {
text-align: right;
}
html,
body {
height: 100%;
}
* {
box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
ul,
ol,
dd,
dl,
p,
figure,
pre,
table,
hr,
form,
fieldset {
margin: 0 0 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1rem;
line-height: 1.125;
}
h1, h2, h3, h5 {
font-weight: 400;
}
h4, h6 {
font-weight: 600;
}
h1, .h1 {
font-size: 2rem;
}
h2, .h2 {
font-size: 1.625rem;
}
h3, .h3 {
font-size: 1.25rem;
}
h4, .h4,
h5, .h5 {
font-size: 1rem;
}
h6, .h6 {
font-size: 0.75rem;
}
h1 small, .h1 small {
font-size: 1.625rem;
}
h2 small, .h2 small {
font-size: 1.25rem;
}
h3 small, .h3 small,
h4 small, .h4 small {
font-size: 1rem;
}
@media screen and (min-width: 60.0625em) {
h1, .h1 {
font-size: 2.625rem;
}
h2, .h2 {
font-size: 2rem;
}
h3, .h3 {
font-size: 1.625rem;
}
h4, .h4,
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1rem;
}
h1 small, .h1 small {
font-size: 2rem;
}
h2 small, .h2 small {
font-size: 1.625rem;
}
h3 small, .h3 small {
font-size: 1.25rem;
}
h4 small, .h4 small {
font-size: 1rem;
}
}
p:empty {
display: none;
}
small {
font-size: 0.75rem;
}
img {
height: auto;
line-height: 0;
display: inline-block;
}
img,
embed,
object,
video {
max-width: 100%;
}
video {
position: relative;
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
}
img,
audio,
canvas,
video {
vertical-align: middle;
}
svg {
max-height: 100%;
}
svg:not(:root) {
overflow: hidden;
}
figcaption {
font-size: 0.75rem;
line-height: 1.25rem;
padding: 0.5rem 0;
margin: auto;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover, a:focus {
text-decoration: underline;
}
a img {
border: 0;
}
ul,
ol,
dl {
padding-left: 3.25rem;
padding-right: 0;
}
dt {
font-weight: 600;
}
dd {
margin-left: 1rem;
}
[dir="rtl"] dd {
margin-left: 0;
margin-right: 1rem;
}
blockquote {
padding: 1rem;
margin-left: 3.25rem;
margin-right: 0;
border-left: 5px solid;
}
blockquote.simple-quote {
border: 0 none;
padding: 0;
margin: 0;
}
blockquote p {
font-weight: 300;
}
@media screen and (min-width: 60.0625em) {
blockquote p {
font-size: 1.25rem;
}
}
blockquote p:first-child {
margin-top: 0;
}
blockquote p:first-child:before {
font-family: FontAwesome, sans-serif;
content: "";
padding: 0 0.3125rem 0 0;
margin: 0;
text-align: left;
width: 1.25rem;
display: none;
}
.fa-loaded blockquote p:first-child:before {
display: inline-block;
}
[dir="rtl"] blockquote p:first-child:before {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
blockquote p:last-of-type {
margin-bottom: 0;
}
blockquote small {
display: block;
}
blockquote small:before {
content: '\2014 \00A0';
}
blockquote.pull-right {
padding-left: 0;
border-right: 5px solid;
border-left: 0;
}
blockquote.pull-right p,
blockquote.pull-right small {
text-align: right;
}
blockquote.pull-right small:before {
content: '';
}
blockquote.pull-right small:after {
content: '\00A0 \2014';
}
hr {
height: 1px;
border: 0;
border-top: 1px solid;
padding: 0;
box-sizing: border-box;
}
code,
pre,
var,
kbd,
samp {
font-family: "Courier New", Courier, monospace;
overflow-x: auto;
}
pre {
padding: 1rem;
}
[hidden],
template {
display: none !important;
}
/**
* Media
* - styles for media objects such as iframe, video, embedding codes etc.
============================================================================ */
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/**
* List Styles
============================================================================ */
ul.inline, ul.links.inline {
padding: 0;
}
ul.inline:before, ul.inline:after, ul.links.inline:before, ul.links.inline:after {
content: " ";
display: table;
}
ul.inline:after, ul.links.inline:after {
clear: both;
}
ul.inline li {
display: inline-block;
margin: 0 0 0 0;
list-style: none;
}
ul.inline li ul,
ul.inline li ol {
display: inline-block;
}
[dir="rtl"] ul.inline li {
margin-right: 0;
margin-left: 0;
}
.no-bullets li {
list-style: none;
}
.no-padding {
padding: 0;
}
.item-list__title {
font-weight: 700;
}
.item-list__list {
padding: 0;
}
.item-list__item {
list-style: none;
}
.item-list a {
padding: 0.125rem 0;
margin: 0.125rem 0;
}
.item-list--comma-list {
display: inline;
}
.item-list--comma-list .item-list__comma-list,
.item-list__comma-list li,
[dir="rtl"] .item-list--comma-list .item-list__comma-list,
[dir="rtl"] .item-list__comma-list li {
margin: 0;
}
.list-horizontal {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.list-horizontal li {
margin: 0 1rem 0 1rem;
list-style: none;
}
[dir="rtl"] .list-horizontal li {
margin-right: 16px;
margin-left: 16px;
}
.list-multicolumn {
padding: 0;
}
.list-multicolumn:before, .list-multicolumn:after {
content: " ";
display: table;
}
.list-multicolumn:after {
clear: both;
}
.list-multicolumn > li {
font-weight: 700;
list-style: none;
}
.list-multicolumn ul, .list-multicolumn ol {
font-weight: 400;
padding: 0;
}
@media screen and (max-width: 60em) {
.list-multicolumn:before, .list-multicolumn:after {
content: " ";
display: table;
}
.list-multicolumn:after {
clear: both;
}
.list-multicolumn > li {
width: 12em;
float: left;
list-style: none;
}
.list-multicolumn ul, .list-multicolumn ol {
padding: 0;
}
.list-multicolumn a {
display: block;
}
}
@media screen and (max-width: 60em) {
.dl-horizontal dt {
float: left;
clear: left;
text-align: left;
width: 11em;
}
.dl-horizontal dt:after {
content: ":";
}
.dl-horizontal dd {
margin-left: 12em;
overflow: hidden;
}
}
.list-group {
padding-left: 0;
margin-left: 0;
}
/**
* Skip link
* - Allows keyboard users to quickly skip to the main content of the page.
============================================================================ */
.skip-link {
color: #fff;
background-color: #444;
border-radius: 0 0 2px 2px;
opacity: 0;
transition: opacity 0.15s ease-in;
z-index: 50;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
text-align: center;
padding: 0.375rem 1rem;
}
@media screen and (max-width: 45em) {
.skip-link {
left: 10%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.skip-link:visited, .skip-link:active, .skip-link:focus {
color: #fff;
}
.skip-link:focus {
text-decoration: none;
opacity: 1;
}
.skip-link.visually-hidden.focusable:focus {
position: absolute !important;
width: 11.25rem;
}
@media screen and (max-width: 45em) {
.skip-link.visually-hidden.focusable:focus {
width: 80%;
}
}
/**
* Feed Icons
* - icons are SVG, SEE feed-icon.html.twig in AT Core templates directory.
============================================================================ */
.feed-icon {
display: block;
width: 1rem;
height: 1rem;
}
/**
* Links
* Links are used on node and comments, e.g. read more. They're also used by
* blocks such as the language switcher and Devel modules switch user block.
============================================================================ */
.links {
list-style: none;
padding: 0;
}
.links.inline {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.links.inline li {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 0 16px 0 0;
}
.links.inline li[class*='hidden'] {
display: none;
}
[dir="rtl"] .links.inline li {
margin: 0 0 0 16px;
}
/**
* Node previews
* - style the preview bar a little better than default.
============================================================================ */
.node-preview-container {
position: relative;
z-index: 499;
width: 100%;
min-width: 100%;
background-color: #d1e8f5;
background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 1.25rem 0;
}
.node-preview-container form {
max-width: 75em;
margin-left: auto;
margin-right: auto;
}
.node-preview-container form:after {
content: " ";
display: block;
clear: both;
}
@media screen and (max-width: 45em) {
.node-preview-container .form-item-view-mode {
display: block !important;
}
}
.node-preview-backlink {
float: left;
margin-right: 1.25rem;
}
@media screen and (max-width: 45em) {
.node-preview-backlink {
float: none;
display: block;
margin: 0 0 0.75rem;
}
}
.node-preview-backlink:before {
font-family: FontAwesome, sans-serif;
content: "";
padding: 0 0.5rem 0 0;
margin: 0;
display: none;
}
.fa-loaded .node-preview-backlink:before {
display: inline-block;
}
[dir="rtl"] .node-preview-backlink:before {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.node-preview-form-select {
margin: 1.25rem 0;
padding: 0 1.25rem;
}
.node-preview-form-select .form-select {
min-width: 10rem;
}
/**
* CK Editor
* - classes and styles set by CK Editor.
============================================================================ */
.text-align-justify {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/**
* States.
============================================================================ */
/**
* AT attribution message
* - a toggle setting in the theme settings, you can turn it on/off using
* the Markup overrides extension.
============================================================================ */
.l-attribution {
-webkit-order: 100;
-ms-flex-order: 100;
order: 100;
}
.attribution .l-rw {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 2rem;
text-align: right;
}
.attribution__link {
text-decoration: none;
font-size: 0.75rem;
}
/**
* Utility
* - useful classes to be used anywhere.
============================================================================ */
.is-flexposition-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 100%;
width: 100%;
}
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
.is-vertical-center {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.is-vertical-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.is-vertical-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.is-horizontal-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.is-horizontal-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.is-horizontal-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
/*# sourceMappingURL=base.css.map */
File
at_theme_generator/starterkits/starterkit/styles/css/components/base.css
View source
- @charset "UTF-8";
- /**
- * Page
- * - page layout additions and overrides.
- ============================================================================ */
- .page {
- position: relative;
- min-height: 100%;
- min-width: 100%;
- }
-
- .page-top, .page-bottom {
- padding: 0;
- margin: 0;
- }
-
- .l-pr {
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
-
- .l-rw {
- padding: 0 0.625em;
- }
-
- .l-r {
- transition: all, 225ms, ease-in-out;
- }
-
- /**
- * Elements
- * - set element global styles, basically whenever this element appears
- * it should look like this by default.
- ============================================================================ */
- html {
- font-size: 100%;
- line-height: 1.5em;
- }
-
- body {
- font-family: sans-serif;
- padding: 0;
- margin: 0;
- -webkit-font-smoothing: subpixel-antialiased;
- }
-
- [dir="rtl"] body {
- text-align: right;
- }
-
- html,
- body {
- height: 100%;
- }
-
- * {
- box-sizing: border-box;
- }
-
- article,
- aside,
- details,
- figcaption,
- figure,
- footer,
- header,
- main,
- menu,
- nav,
- section,
- summary {
- display: block;
- }
-
- ul,
- ol,
- dd,
- dl,
- p,
- figure,
- pre,
- table,
- hr,
- form,
- fieldset {
- margin: 0 0 1.25rem;
- }
-
- h1, h2, h3, h4, h5, h6 {
- margin: 0 0 1rem;
- line-height: 1.125;
- }
-
- h1, h2, h3, h5 {
- font-weight: 400;
- }
-
- h4, h6 {
- font-weight: 600;
- }
-
- h1, .h1 {
- font-size: 2rem;
- }
-
- h2, .h2 {
- font-size: 1.625rem;
- }
-
- h3, .h3 {
- font-size: 1.25rem;
- }
-
- h4, .h4,
- h5, .h5 {
- font-size: 1rem;
- }
-
- h6, .h6 {
- font-size: 0.75rem;
- }
-
- h1 small, .h1 small {
- font-size: 1.625rem;
- }
-
- h2 small, .h2 small {
- font-size: 1.25rem;
- }
-
- h3 small, .h3 small,
- h4 small, .h4 small {
- font-size: 1rem;
- }
-
- @media screen and (min-width: 60.0625em) {
- h1, .h1 {
- font-size: 2.625rem;
- }
- h2, .h2 {
- font-size: 2rem;
- }
- h3, .h3 {
- font-size: 1.625rem;
- }
- h4, .h4,
- h5, .h5 {
- font-size: 1.25rem;
- }
- h6, .h6 {
- font-size: 1rem;
- }
- h1 small, .h1 small {
- font-size: 2rem;
- }
- h2 small, .h2 small {
- font-size: 1.625rem;
- }
- h3 small, .h3 small {
- font-size: 1.25rem;
- }
- h4 small, .h4 small {
- font-size: 1rem;
- }
- }
-
- p:empty {
- display: none;
- }
-
- small {
- font-size: 0.75rem;
- }
-
- img {
- height: auto;
- line-height: 0;
- display: inline-block;
- }
-
- img,
- embed,
- object,
- video {
- max-width: 100%;
- }
-
- video {
- position: relative;
- width: 100%;
- height: 100%;
- background-color: #000;
- overflow: hidden;
- }
-
- img,
- audio,
- canvas,
- video {
- vertical-align: middle;
- }
-
- svg {
- max-height: 100%;
- }
-
- svg:not(:root) {
- overflow: hidden;
- }
-
- figcaption {
- font-size: 0.75rem;
- line-height: 1.25rem;
- padding: 0.5rem 0;
- margin: auto;
- }
-
- a {
- text-decoration: none;
- cursor: pointer;
- }
-
- a:hover, a:focus {
- text-decoration: underline;
- }
-
- a img {
- border: 0;
- }
-
- ul,
- ol,
- dl {
- padding-left: 3.25rem;
- padding-right: 0;
- }
-
- dt {
- font-weight: 600;
- }
-
- dd {
- margin-left: 1rem;
- }
-
- [dir="rtl"] dd {
- margin-left: 0;
- margin-right: 1rem;
- }
-
- blockquote {
- padding: 1rem;
- margin-left: 3.25rem;
- margin-right: 0;
- border-left: 5px solid;
- }
-
- blockquote.simple-quote {
- border: 0 none;
- padding: 0;
- margin: 0;
- }
-
- blockquote p {
- font-weight: 300;
- }
-
- @media screen and (min-width: 60.0625em) {
- blockquote p {
- font-size: 1.25rem;
- }
- }
-
- blockquote p:first-child {
- margin-top: 0;
- }
-
- blockquote p:first-child:before {
- font-family: FontAwesome, sans-serif;
- content: "";
- padding: 0 0.3125rem 0 0;
- margin: 0;
- text-align: left;
- width: 1.25rem;
- display: none;
- }
-
- .fa-loaded blockquote p:first-child:before {
- display: inline-block;
- }
-
- [dir="rtl"] blockquote p:first-child:before {
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
- -webkit-transform: scale(-1, 1);
- -ms-transform: scale(-1, 1);
- transform: scale(-1, 1);
- }
-
- blockquote p:last-of-type {
- margin-bottom: 0;
- }
-
- blockquote small {
- display: block;
- }
-
- blockquote small:before {
- content: '\2014 \00A0';
- }
-
- blockquote.pull-right {
- padding-left: 0;
- border-right: 5px solid;
- border-left: 0;
- }
-
- blockquote.pull-right p,
- blockquote.pull-right small {
- text-align: right;
- }
-
- blockquote.pull-right small:before {
- content: '';
- }
-
- blockquote.pull-right small:after {
- content: '\00A0 \2014';
- }
-
- hr {
- height: 1px;
- border: 0;
- border-top: 1px solid;
- padding: 0;
- box-sizing: border-box;
- }
-
- code,
- pre,
- var,
- kbd,
- samp {
- font-family: "Courier New", Courier, monospace;
- overflow-x: auto;
- }
-
- pre {
- padding: 1rem;
- }
-
- [hidden],
- template {
- display: none !important;
- }
-
- /**
- * Media
- * - styles for media objects such as iframe, video, embedding codes etc.
- ============================================================================ */
- .embed-container {
- position: relative;
- padding-bottom: 56.25%;
- height: 0;
- overflow: hidden;
- max-width: 100%;
- }
-
- .embed-container iframe,
- .embed-container object,
- .embed-container embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-
- /**
- * List Styles
- ============================================================================ */
- ul.inline, ul.links.inline {
- padding: 0;
- }
-
- ul.inline:before, ul.inline:after, ul.links.inline:before, ul.links.inline:after {
- content: " ";
- display: table;
- }
-
- ul.inline:after, ul.links.inline:after {
- clear: both;
- }
-
- ul.inline li {
- display: inline-block;
- margin: 0 0 0 0;
- list-style: none;
- }
-
- ul.inline li ul,
- ul.inline li ol {
- display: inline-block;
- }
-
- [dir="rtl"] ul.inline li {
- margin-right: 0;
- margin-left: 0;
- }
-
- .no-bullets li {
- list-style: none;
- }
-
- .no-padding {
- padding: 0;
- }
-
- .item-list__title {
- font-weight: 700;
- }
-
- .item-list__list {
- padding: 0;
- }
-
- .item-list__item {
- list-style: none;
- }
-
- .item-list a {
- padding: 0.125rem 0;
- margin: 0.125rem 0;
- }
-
- .item-list--comma-list {
- display: inline;
- }
-
- .item-list--comma-list .item-list__comma-list,
- .item-list__comma-list li,
- [dir="rtl"] .item-list--comma-list .item-list__comma-list,
- [dir="rtl"] .item-list__comma-list li {
- margin: 0;
- }
-
- .list-horizontal {
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
-
- .list-horizontal li {
- margin: 0 1rem 0 1rem;
- list-style: none;
- }
-
- [dir="rtl"] .list-horizontal li {
- margin-right: 16px;
- margin-left: 16px;
- }
-
- .list-multicolumn {
- padding: 0;
- }
-
- .list-multicolumn:before, .list-multicolumn:after {
- content: " ";
- display: table;
- }
-
- .list-multicolumn:after {
- clear: both;
- }
-
- .list-multicolumn > li {
- font-weight: 700;
- list-style: none;
- }
-
- .list-multicolumn ul, .list-multicolumn ol {
- font-weight: 400;
- padding: 0;
- }
-
- @media screen and (max-width: 60em) {
- .list-multicolumn:before, .list-multicolumn:after {
- content: " ";
- display: table;
- }
- .list-multicolumn:after {
- clear: both;
- }
- .list-multicolumn > li {
- width: 12em;
- float: left;
- list-style: none;
- }
- .list-multicolumn ul, .list-multicolumn ol {
- padding: 0;
- }
- .list-multicolumn a {
- display: block;
- }
- }
-
- @media screen and (max-width: 60em) {
- .dl-horizontal dt {
- float: left;
- clear: left;
- text-align: left;
- width: 11em;
- }
- .dl-horizontal dt:after {
- content: ":";
- }
- .dl-horizontal dd {
- margin-left: 12em;
- overflow: hidden;
- }
- }
-
- .list-group {
- padding-left: 0;
- margin-left: 0;
- }
-
- /**
- * Skip link
- * - Allows keyboard users to quickly skip to the main content of the page.
- ============================================================================ */
- .skip-link {
- color: #fff;
- background-color: #444;
- border-radius: 0 0 2px 2px;
- opacity: 0;
- transition: opacity 0.15s ease-in;
- z-index: 50;
- left: 50%;
- -webkit-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- transform: translateX(-50%);
- display: block;
- text-align: center;
- padding: 0.375rem 1rem;
- }
-
- @media screen and (max-width: 45em) {
- .skip-link {
- left: 10%;
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- }
- }
-
- .skip-link:visited, .skip-link:active, .skip-link:focus {
- color: #fff;
- }
-
- .skip-link:focus {
- text-decoration: none;
- opacity: 1;
- }
-
- .skip-link.visually-hidden.focusable:focus {
- position: absolute !important;
- width: 11.25rem;
- }
-
- @media screen and (max-width: 45em) {
- .skip-link.visually-hidden.focusable:focus {
- width: 80%;
- }
- }
-
- /**
- * Feed Icons
- * - icons are SVG, SEE feed-icon.html.twig in AT Core templates directory.
- ============================================================================ */
- .feed-icon {
- display: block;
- width: 1rem;
- height: 1rem;
- }
-
- /**
- * Links
- * Links are used on node and comments, e.g. read more. They're also used by
- * blocks such as the language switcher and Devel modules switch user block.
- ============================================================================ */
- .links {
- list-style: none;
- padding: 0;
- }
-
- .links.inline {
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- }
-
- .links.inline li {
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin: 0 16px 0 0;
- }
-
- .links.inline li[class*='hidden'] {
- display: none;
- }
-
- [dir="rtl"] .links.inline li {
- margin: 0 0 0 16px;
- }
-
- /**
- * Node previews
- * - style the preview bar a little better than default.
- ============================================================================ */
- .node-preview-container {
- position: relative;
- z-index: 499;
- width: 100%;
- min-width: 100%;
- background-color: #d1e8f5;
- background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4);
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- padding: 1.25rem 0;
- }
-
- .node-preview-container form {
- max-width: 75em;
- margin-left: auto;
- margin-right: auto;
- }
-
- .node-preview-container form:after {
- content: " ";
- display: block;
- clear: both;
- }
-
- @media screen and (max-width: 45em) {
- .node-preview-container .form-item-view-mode {
- display: block !important;
- }
- }
-
- .node-preview-backlink {
- float: left;
- margin-right: 1.25rem;
- }
-
- @media screen and (max-width: 45em) {
- .node-preview-backlink {
- float: none;
- display: block;
- margin: 0 0 0.75rem;
- }
- }
-
- .node-preview-backlink:before {
- font-family: FontAwesome, sans-serif;
- content: "";
- padding: 0 0.5rem 0 0;
- margin: 0;
- display: none;
- }
-
- .fa-loaded .node-preview-backlink:before {
- display: inline-block;
- }
-
- [dir="rtl"] .node-preview-backlink:before {
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
- -webkit-transform: scale(-1, 1);
- -ms-transform: scale(-1, 1);
- transform: scale(-1, 1);
- }
-
- .node-preview-form-select {
- margin: 1.25rem 0;
- padding: 0 1.25rem;
- }
-
- .node-preview-form-select .form-select {
- min-width: 10rem;
- }
-
- /**
- * CK Editor
- * - classes and styles set by CK Editor.
- ============================================================================ */
- .text-align-justify {
- -webkit-hyphens: auto;
- -ms-hyphens: auto;
- hyphens: auto;
- }
-
- /**
- * States.
- ============================================================================ */
- /**
- * AT attribution message
- * - a toggle setting in the theme settings, you can turn it on/off using
- * the Markup overrides extension.
- ============================================================================ */
- .l-attribution {
- -webkit-order: 100;
- -ms-flex-order: 100;
- order: 100;
- }
-
- .attribution .l-rw {
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- min-height: 2rem;
- text-align: right;
- }
-
- .attribution__link {
- text-decoration: none;
- font-size: 0.75rem;
- }
-
- /**
- * Utility
- * - useful classes to be used anywhere.
- ============================================================================ */
- .is-flexposition-container {
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- height: 100%;
- width: 100%;
- }
-
- .flex-container {
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- width: 100%;
- }
-
- .is-vertical-center {
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- }
-
- .is-vertical-top {
- -webkit-align-items: flex-start;
- -ms-flex-align: start;
- align-items: flex-start;
- }
-
- .is-vertical-bottom {
- -webkit-align-items: flex-end;
- -ms-flex-align: end;
- align-items: flex-end;
- }
-
- .is-horizontal-center {
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
-
- .is-horizontal-left {
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- }
-
- .is-horizontal-right {
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- }
- /*# sourceMappingURL=base.css.map */