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 {
|
// Common
|
||||||
border-radius: 50%;
|
// 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 {
|
// Animation Keyframes
|
||||||
@extend .clearfix;
|
@keyframes ping {
|
||||||
}
|
from {
|
||||||
|
transform: scale(0.25);
|
||||||
.wrap {
|
opacity: 1;
|
||||||
@extend .clearfix;
|
}
|
||||||
margin-right: auto;
|
to {
|
||||||
margin-left: auto;
|
transform: scale(2);
|
||||||
padding: 0 8px;
|
opacity: 0;
|
||||||
.contents {
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-width {
|
@keyframes rotate-forever {
|
||||||
margin-left: 12px;
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
big {
|
@keyframes background-fade-highlight {
|
||||||
font-size: 28px;
|
0% {
|
||||||
}
|
background-color: $tertiary-low;
|
||||||
|
}
|
||||||
small {
|
100% {
|
||||||
font-size: 9px;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
//setting a static limit on big and small prevents nesting abuse
|
|
||||||
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
@include post-aside;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.no-href {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Base Elements
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -52,56 +46,170 @@ body {
|
||||||
@include clearfix;
|
@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-top: 0;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.ok {
|
button {
|
||||||
|
&.ok {
|
||||||
background: $success;
|
background: $success;
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background: lighten($success, 10%);
|
background: lighten($success, 10%);
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.cancel {
|
&.cancel {
|
||||||
background: $danger;
|
background: $danger;
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background: lighten($danger, 10%);
|
background: lighten($danger, 10%);
|
||||||
color: $secondary;
|
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
|
// the default for table cells in topic list
|
||||||
// is scale-color($primary, $lightness: 50%)
|
// is scale-color($primary, $lightness: 50%)
|
||||||
// numbers get dimmer as they get colder
|
// numbers get dimmer as they get colder
|
||||||
.coldmap-high {
|
.coldmap {
|
||||||
|
&-high {
|
||||||
color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important;
|
color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important;
|
||||||
}
|
}
|
||||||
.coldmap-med {
|
|
||||||
|
&-med {
|
||||||
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important;
|
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important;
|
||||||
}
|
}
|
||||||
.coldmap-low {
|
|
||||||
|
&-low {
|
||||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
|
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading-message {
|
.top-space {
|
||||||
position: absolute;
|
|
||||||
font-size: 2.143em;
|
|
||||||
text-align: center;
|
|
||||||
top: 120px;
|
|
||||||
left: 500px;
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
.top-space {
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
ul.breadcrumb {
|
|
||||||
margin: 0 10px 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
@include border-radius-all(8px);
|
@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 {
|
.clear-transitions {
|
||||||
transition:none !important;
|
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 {
|
.d-editor-input {
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
@ -157,43 +249,6 @@ input[type].invalid {
|
||||||
top: 60px !important;
|
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 {
|
.flex-center-align {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -202,7 +257,10 @@ input {
|
||||||
.unread-private-messages {
|
.unread-private-messages {
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
background: $success;
|
background: $success;
|
||||||
&.badge-notification[href] {color: $secondary;}
|
|
||||||
|
&.badge-notification[href] {
|
||||||
|
color: $secondary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ring-backdrop-spotlight {
|
.ring-backdrop-spotlight {
|
||||||
|
|
@ -256,50 +314,12 @@ input {
|
||||||
-webkit-animation-name: ping;
|
-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 {
|
.fade {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.15s linear;
|
transition: opacity 0.15s linear;
|
||||||
}
|
|
||||||
|
|
||||||
.fade.in {
|
&.in {
|
||||||
opacity: 1;
|
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -328,7 +348,6 @@ input {
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-list {
|
.content-list {
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: $primary-medium;
|
color: $primary-medium;
|
||||||
font-size: 1.071em;
|
font-size: 1.071em;
|
||||||
|
|
@ -340,14 +359,14 @@ input {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
li:first-of-type {
|
|
||||||
border-top: 1px solid $primary-low;
|
|
||||||
}
|
|
||||||
li {
|
li {
|
||||||
border-bottom: 1px solid $primary-low;
|
border-bottom: 1px solid $primary-low;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
border-top: 1px solid $primary-low;
|
||||||
}
|
}
|
||||||
|
|
||||||
li a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
color: $primary;
|
color: $primary;
|
||||||
|
|
@ -363,27 +382,83 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// don't wrap relative dates, we want
|
|
||||||
//
|
.form-vertical {
|
||||||
// Jul 26, '15
|
input,
|
||||||
//
|
textarea,
|
||||||
// not
|
select,
|
||||||
//
|
.input-prepend,
|
||||||
// Jul
|
.input-append {
|
||||||
// 26,
|
display: inline-block;
|
||||||
// '15
|
margin-bottom: 0;
|
||||||
//
|
}
|
||||||
span.relative-date {
|
|
||||||
white-space:nowrap;
|
.control-group {
|
||||||
}
|
@include clearfix;
|
||||||
|
}
|
||||||
@keyframes background-fade-highlight {
|
|
||||||
0% {
|
.control-label {
|
||||||
background-color: $tertiary-low;
|
font-weight: bold;
|
||||||
}
|
font-size: 1.2em;
|
||||||
100% {
|
line-height: 2;
|
||||||
background-color: transparent;
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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
|
// global styles that apply to the Discourse application specifically
|
||||||
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
||||||
// throughout the Discourse application
|
// throughout the Discourse application
|
||||||
|
|
||||||
@media all
|
// Base Elements
|
||||||
and (max-width : 570px) {
|
body.widget-dragging {
|
||||||
body {
|
cursor: ns-resize;
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.wrap,
|
|
||||||
.full-width {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.widget-dragging {
|
// Common classes
|
||||||
cursor: ns-resize;
|
.boxed {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.grippie {
|
||||||
|
|
||||||
.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;
|
cursor: row-resize;
|
||||||
padding: 4px 0px;
|
padding: 4px 0px;
|
||||||
}
|
|
||||||
|
|
||||||
.grippie:before {
|
&:before {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
width: 27px;
|
width: 27px;
|
||||||
margin: auto;
|
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 {
|
.topic-statuses {
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.topic-status {
|
.topic-status {
|
||||||
padding: 0 2px 0 0;
|
padding: 0 2px 0 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 1.071em;
|
font-size: 1.071em;
|
||||||
}
|
}
|
||||||
|
|
@ -101,102 +48,140 @@ 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 {
|
.form-vertical {
|
||||||
.control-group {
|
.control-group {
|
||||||
margin-bottom: 24px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/***********************/
|
||||||
/* bootstrap carryover */
|
/* bootstrap carryover */
|
||||||
|
/***********************/
|
||||||
|
code,
|
||||||
body {
|
pre {
|
||||||
|
|
||||||
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;
|
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page not found styles */
|
/* page not found styles */
|
||||||
h1.page-not-found {
|
h1.page-not-found {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-not-found {
|
.page-not-found {
|
||||||
margin: 20px 0 40px 0;
|
margin: 20px 0 40px 0;
|
||||||
}
|
|
||||||
|
|
||||||
.page-not-found-search {
|
&-search {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popular-topics-title, .recent-topics-title {
|
&-topics .span8 {
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.not-found-topic {
|
|
||||||
> a { margin-right: 10px; line-height: 2;}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-not-found-topics .span8 {
|
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// this removes the unwanted top margin on a paragraph under a heading
|
.popular-topics-title,
|
||||||
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
|
.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;
|
margin-top:0px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
form {
|
|
||||||
margin: 0 0 18px;
|
margin: 0 0 18px;
|
||||||
}
|
}
|
||||||
label, input, button, select, textarea {
|
|
||||||
|
label,
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
font-size: 0.929em;
|
font-size: 0.929em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
input, button, select, textarea {
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
color: $primary;
|
||||||
|
|
||||||
|
&[class*="span"] {
|
||||||
|
float: none;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
select, textarea {
|
|
||||||
|
&[disabled],
|
||||||
|
&[readonly] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background-color: $primary-low;
|
||||||
|
border-color: $primary-low;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:required:invalid {
|
||||||
|
color: $danger;
|
||||||
|
border-color: $danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:required:invalid:focus {
|
||||||
|
border-color: $danger;
|
||||||
|
box-shadow: 0 0 6px $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
margin-bottom: 9px;
|
margin-bottom: 9px;
|
||||||
font-size: 0.929em;
|
font-size: 0.929em;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: $primary;
|
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"] {
|
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;
|
display: inline-block;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -204,164 +189,90 @@ body {
|
||||||
font-size: 0.929em;
|
font-size: 0.929em;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: $primary;
|
color: $primary;
|
||||||
|
background-color: $secondary;
|
||||||
|
border: 1px solid $primary-low;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $tertiary;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input {
|
}
|
||||||
width: 210px;
|
|
||||||
}
|
textarea {
|
||||||
textarea {
|
|
||||||
width: 210px;
|
width: 210px;
|
||||||
height: auto;
|
height: auto;
|
||||||
background-color:$secondary;
|
background-color:$secondary;
|
||||||
border: 1px solid $primary-low;
|
border: 1px solid $primary-low;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
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 {
|
|
||||||
border-color: $tertiary;
|
|
||||||
outline: 0;
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select, input[type="file"] {
|
&: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;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
width: 220px;
|
width: 220px;
|
||||||
border: 1px solid $primary-low;
|
border: 1px solid $primary-low;
|
||||||
&[multiple], &[size] {
|
|
||||||
|
&[multiple],
|
||||||
|
&[size] {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-xxlarge {
|
input,
|
||||||
width: 530px;
|
textarea {
|
||||||
}
|
|
||||||
input[class*="span"], select[class*="span"], textarea[class*="span"] {
|
|
||||||
float: none;
|
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
.input-append {
|
|
||||||
input[class*="span"] {
|
input {
|
||||||
display: inline-block;
|
&[type="radio"],
|
||||||
}
|
&[type="checkbox"] {
|
||||||
}
|
&[disabled],
|
||||||
.input-prepend {
|
&[readonly] {
|
||||||
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] {
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.controls-dropdown {
|
}
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
.input {
|
||||||
.control-group {
|
&-xxlarge {
|
||||||
margin-bottom: 9px;
|
width: 530px;
|
||||||
&.warning {
|
|
||||||
> 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 {
|
|
||||||
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 {
|
|
||||||
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 {
|
|
||||||
border-color: $success;
|
|
||||||
box-shadow: 0 0 6px $success;
|
|
||||||
}
|
|
||||||
.input-prepend .add-on, .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 {
|
&-prepend,
|
||||||
|
&-append {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
input[class*="span"] {
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.input-prepend input, .input-append input, .input-prepend select, .input-append select {
|
|
||||||
|
input,
|
||||||
|
select {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
}
|
|
||||||
.input-prepend input:focus, .input-append input:focus, .input-prepend select:focus, .input-append select:focus {
|
&:focus {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.input-prepend .add-on, .input-append .add-on {
|
}
|
||||||
|
|
||||||
|
.add-on {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
@ -374,133 +285,278 @@ body {
|
||||||
background-color: $secondary;
|
background-color: $secondary;
|
||||||
border: 1px solid $primary-low;
|
border: 1px solid $primary-low;
|
||||||
}
|
}
|
||||||
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
|
|
||||||
|
.add-on,
|
||||||
|
.btn {
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.input-prepend .active, .input-append .active {
|
|
||||||
|
.active {
|
||||||
background-color: scale-color($danger, $lightness: 30%);
|
background-color: scale-color($danger, $lightness: 30%);
|
||||||
border-color: $danger;
|
border-color: $danger;
|
||||||
}
|
}
|
||||||
.input-prepend {
|
}
|
||||||
.add-on, .btn {
|
|
||||||
|
&-prepend {
|
||||||
|
.add-on,
|
||||||
|
.btn {
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
}
|
|
||||||
.add-on:first-child, .btn:first-child {
|
&:first-child {
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.input-append {
|
}
|
||||||
input, select {
|
|
||||||
|
&-append {
|
||||||
|
input,
|
||||||
|
select {
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
}
|
}
|
||||||
.add-on:last-child, .btn:last-child {
|
|
||||||
|
.add-on,
|
||||||
|
.btn {
|
||||||
|
&:last-child {
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.input-prepend.input-append {
|
}
|
||||||
input, select {
|
}
|
||||||
|
|
||||||
|
.input-prepend.input-append {
|
||||||
|
input,
|
||||||
|
select {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.add-on:first-child, .btn:first-child {
|
|
||||||
|
.add-on,
|
||||||
|
.btn {
|
||||||
|
&:first-child {
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
}
|
}
|
||||||
.add-on:last-child, .btn:last-child {
|
}
|
||||||
|
|
||||||
|
.add-on,
|
||||||
|
.btn {
|
||||||
|
&:last-child {
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .input-prepend, .form-horizontal .input-append {
|
.controls-dropdown {
|
||||||
display: inline-block;
|
margin-bottom: 10px;
|
||||||
margin-bottom: 0;
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
margin-bottom: 9px;
|
||||||
|
|
||||||
|
&.warning,
|
||||||
|
&.error {
|
||||||
|
> label {
|
||||||
|
color: $danger;
|
||||||
}
|
}
|
||||||
.form-horizontal .hide {
|
|
||||||
|
.checkbox,
|
||||||
|
.radio,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
color: $danger;
|
||||||
|
border-color: $danger;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: scale-color($danger, $lightness: -30%);
|
||||||
|
box-shadow: 0 0 6px $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
.input-prepend,
|
||||||
|
.input-append {
|
||||||
|
.add-on {
|
||||||
|
color: $danger;
|
||||||
|
background-color: $danger;
|
||||||
|
border-color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $success;
|
||||||
|
box-shadow: 0 0 6px $success;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-prepend,
|
||||||
|
.input-append {
|
||||||
|
.add-on {
|
||||||
|
color: $success;
|
||||||
|
background-color: scale-color($success, $lightness: 90%);
|
||||||
|
border-color: $success;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-horizontal {
|
||||||
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-horizontal {
|
input,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
.input-prepend,
|
||||||
|
.input-append {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
|
@include clearfix;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
&:before {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-indent {
|
.control-indent {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-label {
|
.control-label {
|
||||||
float: left;
|
float: left;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
margin-left: 160px;
|
margin-left: 160px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bootbox.modal {
|
.bootbox.modal {
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
a.btn-primary {
|
a.btn-primary {
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* bootstrap columns */
|
/* bootstrap columns */
|
||||||
|
.row {
|
||||||
.row:before,
|
@include clearfix;
|
||||||
.row:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
.row:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.span24 {
|
.span {
|
||||||
width: 1236px;
|
&4 {
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.span15 {
|
|
||||||
/* intentionally no width set here, do not add one */
|
|
||||||
margin-left: 12px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.span13 {
|
|
||||||
width: 59.8198%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.span10 {
|
|
||||||
width: 508px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.span8 {
|
|
||||||
width: 404px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.span6 {
|
|
||||||
width: 27.027%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.span4 {
|
|
||||||
width: 196px;
|
width: 196px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
float: left;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.offset2 {
|
|
||||||
|
.offset {
|
||||||
|
&2 {
|
||||||
margin-left: 116px;
|
margin-left: 116px;
|
||||||
}
|
}
|
||||||
.offset1 {
|
|
||||||
|
&1 {
|
||||||
margin-left: 64px;
|
margin-left: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Special elements
|
||||||
|
#main {
|
||||||
|
a.star {
|
||||||
|
color: $secondary-medium;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
font-family: "FontAwesome";
|
||||||
|
content: "\f005";
|
||||||
|
}
|
||||||
|
|
||||||
|
@include hover {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
// global styles that apply to the Discourse application specifically
|
||||||
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
||||||
// throughout the Discourse application
|
// throughout the Discourse application
|
||||||
|
|
||||||
|
// Base Elements
|
||||||
body {
|
body {
|
||||||
background-color: $secondary;
|
background-color: $secondary;
|
||||||
textarea {
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
background-color:$secondary;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
/* 13px left is intentional here to properly align with post quotes */
|
/* 13px left is intentional here to properly align with post quotes */
|
||||||
padding: 10px 8px 10px 13px;
|
padding: 10px 8px 10px 13px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 10px 0;
|
||||||
}
|
|
||||||
p:last-of-type {
|
&:last-of-type {
|
||||||
margin-bottom:0;
|
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 {
|
.topic-statuses {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
.topic-status {
|
.topic-status {
|
||||||
i {
|
i {
|
||||||
color: $secondary-medium;
|
color: $secondary-medium;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.topic-statuses:empty {
|
&:empty {
|
||||||
display: none;
|
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// categories should not be bold on mobile; they fight with the topic title too much
|
// 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 {
|
.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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: $primary-low;
|
background: $primary-low;
|
||||||
|
|
@ -125,6 +86,24 @@ h2#site-text-logo
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 45%;
|
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 {
|
> li > a {
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -132,6 +111,7 @@ h2#site-text-logo
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.d-icon-caret-down {
|
.d-icon-caret-down {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
|
@ -139,8 +119,7 @@ h2#site-text-logo
|
||||||
|
|
||||||
.drop {
|
.drop {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
&.expanded {
|
||||||
.drop.expanded {
|
|
||||||
left: 0;
|
left: 0;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -152,9 +131,11 @@ h2#site-text-logo
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -162,58 +143,39 @@ h2#site-text-logo
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page not found styles */
|
/* page not found styles */
|
||||||
h1.page-not-found {
|
.page-not-found {
|
||||||
line-height: 24px;
|
&-topics a.badge-wrapper {
|
||||||
margin: 5px 0 -5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-not-found-topics a.badge-wrapper {
|
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2.popular-topics-title {
|
&-search h2 {
|
||||||
margin-bottom: 6px;
|
|
||||||
font-size: 1.2em;
|
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 {
|
.form-vertical {
|
||||||
input, textarea, select, .input-prepend, .input-append {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
margin-bottom: 12px;
|
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