@import "parameters";
-@import "bootstrap-custom";
+@import "bootstrap";
/* Styles common to large and small screens */
#container { position: relative; }
-.column-1 {
- width: 50%;
- margin: 0 0 $lineheight/2 0;
-}
-
.small_icon {
vertical-align: middle;
margin-right: $lineheight/4;
}
}
-/* General styles for tables */
-
-table {
- width: 100%;
- margin-bottom: $lineheight;
- th, td {
- text-align: left;
- padding: $lineheight/4;
- line-height: $lineheight;
- }
- th {
- font-weight: 600;
- vertical-align: top;
- }
- td {
- vertical-align: middle;
- }
-}
-
/* Utility for de-emphasizing content */
.deemphasize {
}
}
+.text-muted a {
+ color: $blue;
+}
+
/* Rules for the header */
#menu-icon {
z-index: 1001;
font-size: 14px;
- h1, nav, nav > ul, nav > ul > li, .dropdown {
+ h1, nav, nav > ul, nav > ul > li {
display: inline-block;
}
color: #000;
}
}
-}
-nav.primary {
- > ul {
- padding: 0;
- $border: 1px solid $green;
-
- border: $border;
- border-radius: $border-radius;
-
- > li {
- border-right: $border;
- float: left;
- &:last-child {
- border-right: 0;
- }
- > a:hover { background: lighten($green, 30%); }
- &.current > a:hover { background: $green; }
- &.disabled > a:hover { background: lighten($green, 38%); }
- &.dropdown {
- > a.tab { border-right: 1px solid lighten($green, 30%); }
- &.current > a.tab { border-right: 1px solid lighten($green, 10%); }
- }
- }
+ .btn {
+ font-size: 14px;
}
+}
- a.tab,
- .dropdown-toggle {
- display: inline-block;
- font-weight: 500;
- color: $green;
- padding: 5px 15px;
- }
- .dropdown-toggle {
- padding: 5px 6px;
+nav.primary {
+ .btn-outline-primary {
+ @include button-outline-variant($green, $white);
}
- .caret {
- border-top-color: $green;
- margin-top: 10px;
- }
+ .disabled {
+ .btn-outline-primary {
+ color: $grey;
+ cursor: default;
- .disabled a {
- color: $grey;
- cursor: default;
+ .caret {
+ border-top-color: $grey;
+ }
- .caret {
- border-top-color: $grey;
+ &:hover {
+ background-color: lighten($green, 30%);
+ }
}
}
- > ul li.current {
+ // Small tweaks to the toggle to stop the primary colour showing through
+ // when the menu is shown
+ .show > .btn-outline-primary.dropdown-toggle {
background-color: $green;
+ border-color: $green;
- .tab {
- color: #fff;
- }
-
- .caret {
- border-top-color: #fff;
+ &:focus {
+ box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
}
}
}
position: absolute;
right: 0;
- > ul {
- vertical-align: middle;
- margin: 0;
- padding: 0;
-
- a, .dropdown-toggle {
- display: inline-block;
- text-decoration: none;
- color: $darkgrey;
- padding: 5px;
-
- &:hover { color: darken($darkgrey, 25%); }
- }
+ .nav-link {
+ padding: 0.2rem;
+ color: $darkgrey;
}
> ul li.current a {
color: darken($darkgrey, 25%);
}
- .user-menu {
- $border: 1px solid $grey;
- border: $border;
- border-radius: $border-radius;
- margin-left: 10px;
- padding: 0;
-
- > li {
- border-right: $border;
- float: left;
- &:last-child {
- border-right: 0;
-
- > a {
- border-radius: 0 $border-radius $border-radius 0;
- }
- }
- &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }
- &:hover a { background: lighten($darkgrey, 30%); }
+ .login-menu {
+ .btn-outline-secondary {
+ @include button-outline-variant($darkgrey);
}
+ }
- a {
- padding: 5px 15px;
-
+ .user-menu {
+ .btn-outline-secondary {
+ @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
+ border-color: $grey;
+ &:hover {
+ border-color: $grey;
+ }
+ &:focus {
+ background-color: white;
+ box-shadow: none;
+ }
}
-
- &.logged-in > a {
- padding: 0;
- > .user-button {
- line-height: 1.8;
- padding: 5px 10px 3px 6px;
- display: inline-block;
- color: $darkgrey;
+ &.show .btn-outline-secondary {
+ background-color: white;
+ &:focus {
+ box-shadow: none;
}
- &:hover > .user-button { color: darken($darkgrey, 5%); }
}
}
- .caret {
- border-top-color: $grey;
- margin-top: 9px;
- }
-
img.user_thumbnail_tiny {
border: 0;
- vertical-align: top;
- margin-top: 0px;
- margin: 4px 0 0 4px;
- border-radius: 2px;
+ border-radius: 3px;
}
#inboxanchor {
display: inline-block;
- vertical-align: top;
height: 25px;
margin: 3px 0 3px 3px;
background-color: lighten($grey, 10%);
line-height: 20px;
- border-radius: 2;
+ border-radius: 3;
}
.dropdown-menu {
- left: auto;
- right: -1px;
- border-radius: 3px 0 3px 3px;
-
.count-number {
- float: right;
- padding: 0 5px;
- margin: 0;
+ font-size: 14px;
+ }
+ }
+}
+
+nav.primary, nav.secondary {
+ .dropdown-item {
+ &:hover, &:active {
+ background-color: $green;
+ color: white;
}
}
}
#compact-secondary-nav {
display: none;
- ul li a {
- width: 100%;
- color: #333;
- &:hover { color: #fff; }
- }
}
body.compact {
input[type=text].overflow {
border-right: none;
+ border-radius: 3px 0px 0px 3px;
}
input:focus {
margin-left: auto;
margin-right: auto;
}
- td {
- padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
- }
}
/* Rules for search sidebar */
padding: 5px 20px 10px 15px;
width: 100%;
border-collapse: separate;
+ border-spacing: 0;
}
div.direction {
border-radius: 3px;
table-layout: fixed;
border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
th, td {
border-bottom: 1px solid $grey;
background: $lightgrey;
}
-.content-body {
- h1, h2, h3, p, ul, ol {
- margin-bottom: $lineheight;
- }
-
- h1, h2, h3 {
- margin-top: $lineheight/2;
- }
-}
-
.content-inner {
position: relative;
max-width: 900px;
/* Rules for small maps in content areas */
.content_map {
- position: relative;
- width: 45%;
- height: 400px;
+ height: 200px;
border: 1px solid $grey;
margin-bottom: $lineheight;
- float: right;
}
-/* Rules for the trace list shown by the traces tab etc */
-
-#trace_list {
- border-width: 0px;
- text-align: right;
-
- .trace_summary {
- font-size: 12px;
- color: gray;
+@include media-breakpoint-up(md) {
+ .content_map {
+ height: 400px;
}
}
/* Rules for the user profile page */
#userinformation {
-
min-height: 100px;
.userinformation-inner {
float: left;
}
- h2 {
- margin-top: 0;
- }
.user-description {
width: 100%;
clear: both;
}
- .deemphasize {
- margin: 0;
- }
}
.admin-user-info small {
margin-right: $lineheight;
}
-.activity-block {
- clear: left;
- border-bottom: 1px solid $grey;
- padding-bottom: $lineheight;
- float: left;
- h3 {
- margin-bottom: $lineheight/2;
- }
-}
-
.contact-activity {
margin-top: $lineheight;
width: 100%;
margin-top: $lineheight/2;
}
- &.deemphasize {
+ &.deleted {
background-color: #fee;
}
padding-top: $lineheight;
border-top: 1px solid $grey;
}
- &.deemphasize {
+ &.deleted {
background-color: #fee;
}
p {
/* Rules for the account settings page */
-#accountForm .user_map {
- position: relative;
- width: 500px;
- height: 400px;
- border: 1px solid $grey;
-}
-
#accountForm .user_image {
margin-bottom: 0;
}
display: inline !important;
}
-.content_map.settings_map {
- width: 50%;
- float: none;
-}
-
/* Rules for the oauth settings page */
.oauth_clients .buttons .oauth-edit {
/* Rules for messages pages */
.messages {
- width: 100%;
- border: 1px solid $grey;
-
input[type="submit"] {
margin: auto;
}
- tbody tr {
- border-top: 1px solid $grey;
- }
.inbox-row {
background: $offwhite;
}
.inbox-row-unread {
- background:#CBEEA7;
+ background: #CBEEA7;
}
.right {
float: right;
}
-
- tr td,
- tr th {
- padding: $lineheight/4;
- }
- p:last-child,
- h2:last-child,
- h3:last-child,
- ol:last-child,
- ul:last-child {
- margin-bottom:0;
- }
- tr td {
- height: 30px;
- border-right: 1px solid $lightgrey;
- }
}
.inbox-row .inbox-mark-read {
display: none;
}
-.messages-show .message-buttons {
- margin-top: $lineheight;
- margin-bottom: $lineheight * 1.5;
- padding-top: $lineheight;
- border-top: 1px solid $lightgrey;
-}
-
-.messages-show .buttons .mark-unread-button {
- border-radius: 0;
-}
-
/* Rules for "flash" notice boxes shown at the top of the content area */
.flash {
}
}
-/* Rules for doing distinct colour of alternate table rows */
+/* Customise the background colour of striped tables */
-.table0,
-.item0 {
- background: $offwhite;
-}
-
-.table1,
-.item1 {
- background: #fff;
+.table-striped > tbody > tr:nth-child(2n+1) > td,
+.table-striped > tbody > tr:nth-child(2n+1) > th {
+ background-color: $offwhite;
}
/* Rules for OpenID logo */
.note_list {
tr.creator {
- background-color: $lightgrey;
- }
-
- td {
- padding: 3px;
- }
-
- p {
- margin-bottom: 0px;
+ background-color: $offwhite;
}
}
height: 100%;
}
-/* Rules for dropdown menus */
-
-.dropdown {
- position: relative;
-}
-
-.dropdown-toggle {
- *margin-bottom: -3px;
-}
-
-.dropdown-toggle:active,
-.open .dropdown-toggle {
- outline: 0;
-}
-
-.caret {
- display: inline-block;
- width: 0;
- height: 0;
- vertical-align: top;
- border-top: 4px solid #000000;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- content: "";
-}
-
-.dropdown .caret {
- margin-top: 8px;
- margin-left: 2px;
-}
-
-.dropdown-menu {
- position: absolute;
- top: 100%;
- left: -1px;
- z-index: 1000;
- display: none;
- float: left;
- min-width: 160px;
- padding: 5px 0;
- margin: 0;
- list-style: none;
- background-color: #ffffff;
- border: 1px solid $grey;
- border-radius: 0 3px 3px;
- *border-right-width: 2px;
- *border-bottom-width: 2px;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- background-clip: padding-box;
-}
-
-.dropdown-menu.pull-right {
- right: 0;
- left: auto;
-}
-
-.dropdown-menu .divider {
- *width: 100%;
- height: 1px;
- margin: 9px 1px;
- *margin: -5px 0 5px;
- overflow: hidden;
- background-color: $lightgrey;
- border-bottom: 1px solid #ffffff;
-}
-
-.dropdown-menu > li > a {
- display: block;
- padding: 3px 10px;
- clear: both;
- font-weight: normal;
- line-height: 20px;
- color: #333333;
- white-space: nowrap;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
- color: #ffffff;
- text-decoration: none;
- background-color: $green;
-}
-
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
- color: #ffffff;
- text-decoration: none;
- background-color: $green;
- outline: 0;
-}
-
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
- color: $darkgrey;
-}
-
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
- text-decoration: none;
- cursor: default;
- background-color: transparent;
- background-image: none;
-}
-
-.open {
- *z-index: 1000;
-}
-
-.open > .dropdown-menu {
- display: block;
-}
-
-.dropdown-backdrop {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 990;
-}
-
/* Rules for the "Welcome" page */
.site-welcome, .site-fixthemap {
.center {
display: block;
color: white;
font-weight: 300;
- font-size: 34px;
+ font-size: 28px;
span {
color: $vibrant-green;
}
}
+ @include media-breakpoint-up(sm) {
+ h1 {
+ font-size: 34px;
+ }
+ }
+
.user-image {
position: absolute;
top: 0px;
background: $lightgrey;
opacity: 0.7;
}
-
-.issues-list {
- td:nth-child(2) {
- white-space: nowrap;
- }
-}
projects / rails.git / blobdiff