demarches-normaliennes/app/assets/stylesheets/common.scss

87 lines
1.8 KiB
SCSS
Raw Normal View History

2017-07-06 17:52:16 +02:00
@import "colors";
@import "constants";
@import "mixins";
2017-07-03 14:02:57 +02:00
@import "placeholders";
@import "typography";
body,
input,
textarea,
select {
@extend %new-type;
font-size: 16px;
line-height: 1.42857143;
}
2017-06-13 17:46:08 +02:00
dt {
margin-bottom: 0.5em;
}
2017-07-17 14:52:09 +02:00
.page-wrapper {
position: relative;
2017-07-31 14:00:28 +02:00
min-height: 100%;
2017-07-17 14:52:09 +02:00
}
2018-09-12 16:42:04 +02:00
// Mobile Safari doesn't bubble mouse events by default, unless:
//
// - the target element of the event is a link or a form field.
// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
//
// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
//
// This is a problem for us, because we bind a lot of click events as
// `document.on('click', '.my-element', …)` which requires proper bubbling.
.ios .page-wrapper {
cursor: pointer;
}
2017-06-13 17:46:08 +02:00
h1 {
font-size: 36px;
font-weight: bold;
}
2017-07-03 14:02:57 +02:00
strong {
font-weight: bold;
}
a[target="_blank"]::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
}
a {
color: $blue-france-500;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
sup {
vertical-align: super;
font-size: 0.83em;
}
small {
font-size: small;
}
2017-07-03 14:02:57 +02:00
.container {
@include horizontal-padding($default-padding);
max-width: $page-width + 2 * $default-padding;
margin-left: auto;
margin-right: auto;
2017-07-03 14:02:57 +02:00
}
.small-container {
@include horizontal-padding($default-padding);
max-width: $small-page-width + 2 * $default-padding;
margin-left: auto;
margin-right: auto;
}