Cleaned, de-duplicated/DRYed and organized discourse.css (common, mobile and desktop)
This commit is contained in:
minusfive
Robin Ward
parent
db929e58fc
commit
fd91e53e68
|
|
@ -1,45 +1,39 @@
|
|||
img.avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
// Common
|
||||
// global styles that apply to the Discourse application specifically
|
||||
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
||||
// throughout the Discourse application
|
||||
|
||||
.container {
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
@extend .clearfix;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 8px;
|
||||
.contents {
|
||||
position: relative;
|
||||
// Animation Keyframes
|
||||
@keyframes ping {
|
||||
from {
|
||||
transform: scale(0.25);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
margin-left: 12px;
|
||||
@keyframes rotate-forever {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
big {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
//setting a static limit on big and small prevents nesting abuse
|
||||
|
||||
|
||||
blockquote {
|
||||
@include post-aside;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a.no-href {
|
||||
cursor: pointer;
|
||||
@keyframes background-fade-highlight {
|
||||
0% {
|
||||
background-color: $tertiary-low;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Base Elements
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -52,56 +46,170 @@ body {
|
|||
@include clearfix;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
big {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
//setting a static limit on big and small prevents nesting abuse
|
||||
blockquote {
|
||||
@include post-aside;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
button.ok {
|
||||
background: $success;
|
||||
color: $secondary;
|
||||
@include hover {
|
||||
background: lighten($success, 10%);
|
||||
button {
|
||||
&.ok {
|
||||
background: $success;
|
||||
color: $secondary;
|
||||
|
||||
@include hover {
|
||||
background: lighten($success, 10%);
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
background: $danger;
|
||||
color: $secondary;
|
||||
|
||||
@include hover {
|
||||
background: lighten($danger, 10%);
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.cancel {
|
||||
background: $danger;
|
||||
color: $secondary;
|
||||
@include hover {
|
||||
background: lighten($danger, 10%);
|
||||
color: $secondary;
|
||||
ul.breadcrumb {
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
a.no-href {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// don't wrap relative dates; we want Jul 26, '15, not: Jul
|
||||
// 26,
|
||||
// '15
|
||||
span.relative-date {
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="radio"],
|
||||
&[type="checkbox"] {
|
||||
margin: 3px 0;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
&[type="submit"],
|
||||
&[type="reset"],
|
||||
&[type="button"],
|
||||
&[type="radio"],
|
||||
&[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
|
||||
}
|
||||
|
||||
.radio &[type="radio"],
|
||||
.checkbox &[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
}
|
||||
}
|
||||
|
||||
// Common Classes
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: 18px;
|
||||
padding-left: 18px;
|
||||
|
||||
.controls > &:first-child {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.radio.inline .radio.inline,
|
||||
.checkbox.inline .checkbox.inline {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
@extend .clearfix;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 8px;
|
||||
|
||||
.contents {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.boxed {
|
||||
&.white {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
// the default for table cells in topic list
|
||||
// is scale-color($primary, $lightness: 50%)
|
||||
// numbers get dimmer as they get colder
|
||||
.coldmap-high {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important;
|
||||
}
|
||||
.coldmap-med {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important;
|
||||
}
|
||||
.coldmap-low {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
|
||||
.coldmap {
|
||||
&-high {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important;
|
||||
}
|
||||
|
||||
&-med {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important;
|
||||
}
|
||||
|
||||
&-low {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
position: absolute;
|
||||
font-size: 2.143em;
|
||||
text-align: center;
|
||||
top: 120px;
|
||||
left: 500px;
|
||||
color: $primary;
|
||||
}
|
||||
.top-space {
|
||||
.top-space {
|
||||
margin-top: 10px;
|
||||
}
|
||||
ul.breadcrumb {
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
@include border-radius-all(8px);
|
||||
|
|
@ -113,18 +221,6 @@ ul.breadcrumb {
|
|||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
.container {
|
||||
height: 50px;
|
||||
.contents {
|
||||
padding-top: 10px;
|
||||
a[href] {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clear-transitions {
|
||||
transition:none !important;
|
||||
}
|
||||
|
|
@ -139,10 +235,6 @@ ul.breadcrumb {
|
|||
}
|
||||
}
|
||||
|
||||
input[type].invalid {
|
||||
background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
|
||||
}
|
||||
|
||||
.d-editor-input {
|
||||
resize: none;
|
||||
}
|
||||
|
|
@ -157,43 +249,6 @@ input[type].invalid {
|
|||
top: 60px !important;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
input {
|
||||
&[type="radio"], &[type="checkbox"] {
|
||||
margin: 3px 0;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
&[type="submit"], &[type="reset"], &[type="button"], &[type="radio"], &[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.radio, .checkbox {
|
||||
min-height: 18px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
.radio input[type="radio"], .checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
}
|
||||
.controls > {
|
||||
.radio:first-child, .checkbox:first-child {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.radio.inline, .checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio.inline .radio.inline, .checkbox.inline .checkbox.inline {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.flex-center-align {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -202,7 +257,10 @@ input {
|
|||
.unread-private-messages {
|
||||
color: $secondary;
|
||||
background: $success;
|
||||
&.badge-notification[href] {color: $secondary;}
|
||||
|
||||
&.badge-notification[href] {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.ring-backdrop-spotlight {
|
||||
|
|
@ -256,50 +314,12 @@ input {
|
|||
-webkit-animation-name: ping;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ping {
|
||||
from {
|
||||
$scale: 0.25;
|
||||
transform: scale($scale);
|
||||
-ms-transform: scale($scale);
|
||||
-webkit-transform: scale($scale);
|
||||
-o-transform: scale($scale);
|
||||
-moz-transform: scale($scale);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
$scale: 2;
|
||||
transform: scale($scale);
|
||||
-ms-transform: scale($scale);
|
||||
-webkit-transform: scale($scale);
|
||||
-o-transform: scale($scale);
|
||||
-moz-transform: scale($scale);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate-forever {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-forever {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -328,7 +348,6 @@ input {
|
|||
}
|
||||
|
||||
.content-list {
|
||||
|
||||
h3 {
|
||||
color: $primary-medium;
|
||||
font-size: 1.071em;
|
||||
|
|
@ -340,50 +359,106 @@ input {
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li:first-of-type {
|
||||
border-top: 1px solid $primary-low;
|
||||
}
|
||||
li {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-low;
|
||||
color: $primary;
|
||||
&:first-of-type {
|
||||
border-top: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-low;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// don't wrap relative dates, we want
|
||||
//
|
||||
// Jul 26, '15
|
||||
//
|
||||
// not
|
||||
//
|
||||
// Jul
|
||||
// 26,
|
||||
// '15
|
||||
//
|
||||
span.relative-date {
|
||||
white-space:nowrap;
|
||||
.form-vertical {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes background-fade-highlight {
|
||||
0% {
|
||||
background-color: $tertiary-low;
|
||||
// Special elements
|
||||
// Special elements
|
||||
#main {
|
||||
img.avatar {
|
||||
&.header {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
|
||||
.user-list {
|
||||
.user {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
position: absolute;
|
||||
font-size: 2.143em;
|
||||
text-align: center;
|
||||
top: 120px;
|
||||
left: 500px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
#footer {
|
||||
.container {
|
||||
height: 50px;
|
||||
.contents {
|
||||
padding-top: 10px;
|
||||
a[href] {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +1,43 @@
|
|||
// Desktop
|
||||
// global styles that apply to the Discourse application specifically
|
||||
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
||||
// throughout the Discourse application
|
||||
|
||||
@media all
|
||||
and (max-width : 570px) {
|
||||
body {
|
||||
min-width: 0;
|
||||
}
|
||||
.wrap,
|
||||
.full-width {
|
||||
min-width: 0;
|
||||
}
|
||||
// Base Elements
|
||||
body.widget-dragging {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
body.widget-dragging {
|
||||
cursor: ns-resize;
|
||||
// Common classes
|
||||
.boxed {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
.grippie {
|
||||
cursor: row-resize;
|
||||
padding: 4px 0px;
|
||||
|
||||
.boxed {
|
||||
height: 100%;
|
||||
&.white {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
#main {
|
||||
a.star {
|
||||
color: $secondary-medium;
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f005";
|
||||
}
|
||||
@include hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
img.avatar {
|
||||
&.header {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
&.medium {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
&.small {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
&.tiny {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.user-list {
|
||||
.user {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$grippie-border-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%));
|
||||
|
||||
.grippie {
|
||||
cursor: row-resize;
|
||||
padding: 4px 0px;
|
||||
}
|
||||
|
||||
.grippie:before {
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 27px;
|
||||
margin: auto;
|
||||
border-top: 3px double $grippie-border-color;
|
||||
border-top: 3px double dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
|
||||
.topic-statuses {
|
||||
float: left;
|
||||
padding: 0;
|
||||
|
||||
.topic-status {
|
||||
padding: 0 2px 0 0;
|
||||
margin: 0;
|
||||
|
||||
i {
|
||||
font-size: 1.071em;
|
||||
}
|
||||
|
|
@ -101,406 +48,515 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
body {
|
||||
.form-vertical input, .form-vertical textarea, .form-vertical select, .form-vertical .input-prepend, .form-vertical .input-append {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-vertical {
|
||||
.control-group {
|
||||
margin-bottom: 24px;
|
||||
&:before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
line-height: 2;
|
||||
}
|
||||
.controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-vertical {
|
||||
.control-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********************/
|
||||
/* bootstrap carryover */
|
||||
/***********************/
|
||||
code,
|
||||
pre {
|
||||
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* page not found styles */
|
||||
h1.page-not-found {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
body {
|
||||
.page-not-found {
|
||||
margin: 20px 0 40px 0;
|
||||
|
||||
input, textarea, select {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* page not found styles */
|
||||
h1.page-not-found {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.page-not-found {
|
||||
margin: 20px 0 40px 0;
|
||||
}
|
||||
|
||||
.page-not-found-search {
|
||||
&-search {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.popular-topics-title, .recent-topics-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.not-found-topic {
|
||||
> a { margin-right: 10px; line-height: 2;}
|
||||
}
|
||||
|
||||
.page-not-found-topics .span8 {
|
||||
&-topics .span8 {
|
||||
line-height: 1.5em;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// this removes the unwanted top margin on a paragraph under a heading
|
||||
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
|
||||
.popular-topics-title,
|
||||
.recent-topics-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.not-found-topic {
|
||||
> a {
|
||||
margin-right: 10px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// this removes the unwanted top margin on a paragraph under a heading
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
+ p {
|
||||
margin-top:0px;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0 0 18px;
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 0.929em;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: $primary;
|
||||
|
||||
&[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
label, input, button, select, textarea {
|
||||
font-size: 0.929em;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
|
||||
&[disabled],
|
||||
&[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $primary-low;
|
||||
border-color: $primary-low;
|
||||
}
|
||||
input, button, select, textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
&:focus:required:invalid {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
select, textarea {
|
||||
|
||||
&:focus:required:invalid:focus {
|
||||
border-color: $danger;
|
||||
box-shadow: 0 0 6px $danger;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 0.929em;
|
||||
line-height: 18px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 210px;
|
||||
|
||||
&[type="text"],
|
||||
&[type="password"],
|
||||
&[type="datetime"],
|
||||
&[type="datetime-local"],
|
||||
&[type="date"],
|
||||
&[type="month"],
|
||||
&[type="time"],
|
||||
&[type="week"],
|
||||
&[type="number"],
|
||||
&[type="email"],
|
||||
&[type="url"],
|
||||
&[type="search"],
|
||||
&[type="tel"],
|
||||
&[type="color"] {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 0.929em;
|
||||
line-height: 18px;
|
||||
color: $primary;
|
||||
}
|
||||
input {
|
||||
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 0.929em;
|
||||
line-height: 18px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 210px;
|
||||
}
|
||||
textarea {
|
||||
width: 210px;
|
||||
height: auto;
|
||||
background-color:$secondary;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
||||
}
|
||||
input {
|
||||
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
||||
}
|
||||
}
|
||||
textarea:focus {
|
||||
border-color: $tertiary;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
||||
}
|
||||
input {
|
||||
&[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
|
||||
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select, input[type="file"] {
|
||||
line-height: 28px;
|
||||
}
|
||||
textarea {
|
||||
width: 210px;
|
||||
height: auto;
|
||||
background-color:$secondary;
|
||||
border: 1px solid $primary-low;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
border: 1px solid $primary-low;
|
||||
&[multiple], &[size] {
|
||||
height: auto;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.input-xxlarge {
|
||||
width: 530px;
|
||||
select,
|
||||
input[type="file"] {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
border: 1px solid $primary-low;
|
||||
|
||||
&[multiple],
|
||||
&[size] {
|
||||
height: auto;
|
||||
}
|
||||
input[class*="span"], select[class*="span"], textarea[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.input-append {
|
||||
input[class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.input-prepend {
|
||||
input[class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
input, textarea {
|
||||
margin-left: 0;
|
||||
}
|
||||
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $primary-low;
|
||||
border-color: $primary-low;
|
||||
}
|
||||
input {
|
||||
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="radio"],
|
||||
&[type="checkbox"] {
|
||||
&[disabled],
|
||||
&[readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.controls-dropdown {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input {
|
||||
&-xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
.control-group {
|
||||
margin-bottom: 9px;
|
||||
&.warning {
|
||||
> label {
|
||||
color: $danger;
|
||||
|
||||
&-prepend,
|
||||
&-append {
|
||||
margin-bottom: 5px;
|
||||
|
||||
input[class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.checkbox, .radio, input, select, textarea {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-left: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: scale-color($danger, $lightness: 30%);
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend {
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-right: -1px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
|
||||
}
|
||||
}
|
||||
|
||||
&-append {
|
||||
input,
|
||||
select {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
&:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-prepend.input-append {
|
||||
input,
|
||||
select {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
&:first-child {
|
||||
margin-right: -1px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
&:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls-dropdown {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 9px;
|
||||
|
||||
&.warning,
|
||||
&.error {
|
||||
> label {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
|
||||
&:focus {
|
||||
border-color: scale-color($danger, $lightness: -30%);
|
||||
box-shadow: 0 0 6px $danger;
|
||||
}
|
||||
.input-prepend .add-on, .input-append .add-on {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
.add-on {
|
||||
color: $danger;
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
> label {
|
||||
color: $danger;
|
||||
}
|
||||
.checkbox, .radio, input, select, textarea {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
|
||||
border-color: scale-color($danger, $lightness: -30%);
|
||||
box-shadow: 0 0 6px $danger;
|
||||
}
|
||||
.input-prepend .add-on, .input-append .add-on {
|
||||
}
|
||||
|
||||
&.error {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
.add-on {
|
||||
color: $danger;
|
||||
background-color: scale-color($danger, $lightness: 30%);
|
||||
border-color: scale-color($danger, $lightness: -20%);
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
> label {
|
||||
color: $success;
|
||||
}
|
||||
.checkbox, .radio, input, select, textarea {
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
|
||||
}
|
||||
|
||||
&.success {
|
||||
> label {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
|
||||
&:focus {
|
||||
border-color: $success;
|
||||
box-shadow: 0 0 6px $success;
|
||||
}
|
||||
.input-prepend .add-on, .input-append .add-on {
|
||||
}
|
||||
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
.add-on {
|
||||
color: $success;
|
||||
background-color: scale-color($success, $lightness: 90%);
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
|
||||
border-color: $danger;
|
||||
box-shadow: 0 0 6px $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.input-prepend, .input-append {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-prepend input, .input-append input, .input-prepend select, .input-append select {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.input-prepend input:focus, .input-append input:focus, .input-prepend select:focus, .input-append select:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.input-prepend .add-on, .input-append .add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
}
|
||||
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
|
||||
margin-left: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-prepend .active, .input-append .active {
|
||||
background-color: scale-color($danger, $lightness: 30%);
|
||||
border-color: $danger;
|
||||
}
|
||||
.input-prepend {
|
||||
.add-on, .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.add-on:first-child, .btn:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
.input-append {
|
||||
input, select {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.add-on:last-child, .btn:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
.input-prepend.input-append {
|
||||
input, select {
|
||||
border-radius: 0;
|
||||
}
|
||||
.add-on:first-child, .btn:first-child {
|
||||
margin-right: -1px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.add-on:last-child, .btn:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .input-prepend, .form-horizontal .input-append {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-horizontal .hide {
|
||||
.form-horizontal {
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-horizontal {
|
||||
.control-group {
|
||||
margin-bottom: 18px;
|
||||
&:before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.control-indent {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.control-label {
|
||||
float: left;
|
||||
width: 140px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
.controls {
|
||||
margin-left: 160px;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bootbox.modal {
|
||||
.modal-footer {
|
||||
a.btn-primary {
|
||||
color: $secondary;
|
||||
}
|
||||
.control-group {
|
||||
@include clearfix;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.control-indent {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
float: left;
|
||||
width: 140px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-left: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.bootbox.modal {
|
||||
.modal-footer {
|
||||
a.btn-primary {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* bootstrap columns */
|
||||
|
||||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
.row {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.span24 {
|
||||
width: 1236px;
|
||||
float: left;
|
||||
.span {
|
||||
&4 {
|
||||
width: 196px;
|
||||
margin-right: 12px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&6 {
|
||||
width: 27.027%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&8 {
|
||||
width: 404px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&10 {
|
||||
width: 508px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&13 {
|
||||
width: 59.8198%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&15 {
|
||||
/* intentionally no width set here, do not add one */
|
||||
margin-left: 12px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&24 {
|
||||
width: 1236px;
|
||||
float: left;
|
||||
color: amarillo;
|
||||
}
|
||||
}
|
||||
.span15 {
|
||||
/* intentionally no width set here, do not add one */
|
||||
margin-left: 12px;
|
||||
float: left;
|
||||
|
||||
.offset {
|
||||
&2 {
|
||||
margin-left: 116px;
|
||||
}
|
||||
|
||||
&1 {
|
||||
margin-left: 64px;
|
||||
}
|
||||
}
|
||||
.span13 {
|
||||
width: 59.8198%;
|
||||
float: left;
|
||||
|
||||
// Special elements
|
||||
#main {
|
||||
a.star {
|
||||
color: $secondary-medium;
|
||||
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f005";
|
||||
}
|
||||
|
||||
@include hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.span10 {
|
||||
width: 508px;
|
||||
float: left;
|
||||
}
|
||||
.span8 {
|
||||
width: 404px;
|
||||
float: left;
|
||||
}
|
||||
.span6 {
|
||||
width: 27.027%;
|
||||
float: left;
|
||||
}
|
||||
.span4 {
|
||||
width: 196px;
|
||||
margin-right: 12px;
|
||||
float: left;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 116px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 64px;
|
||||
|
||||
// Media Queries
|
||||
@media all
|
||||
and (max-width : 570px) {
|
||||
|
||||
body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wrap,
|
||||
.full-width {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +1,75 @@
|
|||
// Mobile
|
||||
// global styles that apply to the Discourse application specifically
|
||||
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
||||
// throughout the Discourse application
|
||||
|
||||
// Base Elements
|
||||
body {
|
||||
background-color: $secondary;
|
||||
textarea {
|
||||
background-color:$secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// This sets the space between the application content and the edge of the
|
||||
// screen. This value is required in 'mobile/header.scss' to set the position
|
||||
// of the drop-down menu.
|
||||
$mobile-wrapper-padding: 10px;
|
||||
.wrap {
|
||||
padding: 0 $mobile-wrapper-padding;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
.boxed {
|
||||
.contents {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
&.white {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
#main {
|
||||
position: relative;
|
||||
img.avatar {
|
||||
&.header {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
&.medium {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
&.small {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
&.tiny {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.user-list {
|
||||
.user {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-group {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
textarea {
|
||||
background-color:$secondary;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
/* 13px left is intentional here to properly align with post quotes */
|
||||
padding: 10px 8px 10px 13px;
|
||||
|
||||
p {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
p:last-of-type {
|
||||
margin-bottom:0;
|
||||
|
||||
}
|
||||
|
||||
h1.page-not-found {
|
||||
line-height: 24px;
|
||||
margin: 5px 0 -5px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
&.popular-topics-title {
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&.recent-topics-title {
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Common classes
|
||||
.wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.boxed {
|
||||
.contents {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.topic-statuses {
|
||||
display: inline-block;
|
||||
|
||||
.topic-status {
|
||||
i {
|
||||
color: $secondary-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-statuses:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Styles used before the user is logged into discourse. For example, activating their
|
||||
// account or changing their email.
|
||||
|
||||
#simple-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
// somehow the image logo assumption inherits margins from earlier in the CSS stack
|
||||
// we must remove margins for text site titles
|
||||
h2#site-text-logo
|
||||
{
|
||||
margin: 0 0 0 10px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// categories should not be bold on mobile; they fight with the topic title too much
|
||||
|
|
@ -101,22 +78,6 @@ h2#site-text-logo
|
|||
}
|
||||
|
||||
.mobile-view .mobile-nav {
|
||||
&.messages-nav, &.notifications-nav, &.activity-nav, &.preferences-nav {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -55px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mobile-view .mobile-nav {
|
||||
a .fa {
|
||||
margin-right: 8px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
a {
|
||||
color: $primary;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $primary-low;
|
||||
|
|
@ -125,6 +86,24 @@ h2#site-text-logo
|
|||
position: relative;
|
||||
width: 45%;
|
||||
|
||||
&.messages-nav,
|
||||
&.notifications-nav,
|
||||
&.activity-nav,
|
||||
&.preferences-nav {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -55px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
|
||||
.fa {
|
||||
margin-right: 8px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
|
||||
> li > a {
|
||||
padding: 8px 10px;
|
||||
height: 100%;
|
||||
|
|
@ -132,6 +111,7 @@ h2#site-text-logo
|
|||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-icon-caret-down {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
|
@ -139,81 +119,63 @@ h2#site-text-logo
|
|||
|
||||
.drop {
|
||||
display: none;
|
||||
}
|
||||
.drop.expanded {
|
||||
left: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10000000;
|
||||
background-color: $secondary;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
box-sizing: border-box;
|
||||
li {
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
a {
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
&.expanded {
|
||||
left: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10000000;
|
||||
background-color: $secondary;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* page not found styles */
|
||||
h1.page-not-found {
|
||||
line-height: 24px;
|
||||
margin: 5px 0 -5px 0;
|
||||
.page-not-found {
|
||||
&-topics a.badge-wrapper {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&-search h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.page-not-found-topics a.badge-wrapper {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
h2.popular-topics-title {
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h2.recent-topics-title {
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.page-not-found-search h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.form-vertical {
|
||||
input, textarea, select, .input-prepend, .input-append {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 12px;
|
||||
&:before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
line-height: 2;
|
||||
}
|
||||
.controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Special elements
|
||||
#main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Styles used before the user is logged into discourse. For example, activating
|
||||
// their account or changing their email.
|
||||
#simple-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
// somehow the image logo assumption inherits margins from earlier in the CSS
|
||||
// stack we must remove margins for text site titles
|
||||
h2#site-text-logo {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue