discourse/app/assets/stylesheets/common/foundation/base.scss
Jarek Radosz 494fe7f2f6
UX: Adjust list and onebox margins (#13131)
Lists – made the indent smaller (helps on mobile), added vertical margin
Onebox – added top margin
2021-05-25 23:52:33 -04:00

157 lines
2.4 KiB
SCSS

// --------------------------------------------------
// Base styles for HTML elements
// --------------------------------------------------
html {
color: var(--primary);
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $line-height-large;
background-color: var(--secondary);
overflow-y: scroll;
direction: ltr;
&.text-size-smallest {
font-size: $base-font-size-smallest;
}
&.text-size-smaller {
font-size: $base-font-size-smaller;
}
&.text-size-larger {
font-size: $base-font-size-larger;
}
&.text-size-largest {
font-size: $base-font-size-largest;
}
}
// Links
// --------------------------------------------------
a {
color: var(--tertiary);
text-decoration: none;
cursor: pointer;
&:visited {
color: var(--tertiary);
}
&:hover {
color: var(--tertiary);
}
&:active {
color: var(--tertiary);
}
}
// Typography
// --------------------------------------------------
hr {
display: block;
height: 1px;
margin: 1em 0;
border: 0;
border-top: 1px solid var(--primary-low);
padding: 0;
}
// Lists
// --------------------------------------------------
ul,
dd {
margin: 1em 0 1em 1.25em;
padding: 0;
}
.cooked ul,
.cooked ol,
.cooked dd {
clear: both;
}
.cooked ul,
.d-editor-preview ul {
padding-left: 1.25em;
}
li,
.cooked li,
.d-editor-preview li {
> ul,
> ol {
margin: 0;
}
}
// Embedded content
// --------------------------------------------------
img {
vertical-align: middle;
}
// Forms
// --------------------------------------------------
fieldset {
margin: 0;
border: 0;
padding: 0;
}
pre code {
overflow: auto;
-moz-tab-size: 4;
tab-size: 4;
&.lang-markdown {
white-space: pre-wrap;
}
}
// TODO figure out a clean place to put stuff like this
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
// Tables
// --------------------------------------------------
table {
border-collapse: collapse;
}
tbody {
border-top: 3px solid var(--primary-low);
}
tr {
border-bottom: 1px solid var(--primary-low);
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
}
}
// https://en.wikipedia.org/wiki/Ruby_character
ruby > rt {
font-size: 72%; // ~10px with 14px base
}
// Buttons (was in normalized)
// --------------------------------------------------
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
}