purpleraft/PurpleMine2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add support for responsive styles and new project selector

Browse Source
This commit is contained in:
mrliptontea
2017-02-12 19:49:54 +00:00
parent 22fea49006
commit 3d8889b28c
20 changed files with 581 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -8,7 +8,7 @@ A free Redmine theme for modern browsers.
![Screenshot](https://github.com/mrliptontea/PurpleMine2/raw/master/screenshots/issues-list.png)
Compatible with Redmine 2.5+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
Compatible with Redmine 2.6+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
@@ -63,6 +63,8 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
Latest (master):
* Fixed #42: override some styles from [RM+](http://rmplus.pro) plugins
* Merged #43: fixes for Redmine 3.3.2.devel
* Support for responsive menu and further changes for Redmine 3.3.2.devel (fixes #26)
v1.8.0 (2016-11-20):

2
plugins/redmine_backlogs/global.css
View File

File diff suppressed because one or more lines are too long

31
src/sass/_variables.scss
View File

@@ -271,6 +271,7 @@ $changeset-deleted-color: $brand-danger !default;
$btn-font-weight: normal !default;
$btn-padding-vertical: 3px !default;
$btn-padding-horizontal: 12px !default;
$btn-padding-horizontal-small: 8px !default;
$btn-link-color: $link-color !default;
$btn-link-bg: $body-bg !default;
@@ -310,7 +311,9 @@ $input-border: #ccc !default;
$input-border-radius: $border-radius-small !default;
$input-border-radius-large: $border-radius-large !default;
$input-border-focus: #51a7e8 !default;
$input-border-focus: $brand-primary !default;
$input-border-focus-alpha: .6 !default;
$input-shadow-focus-alpha: .2 !default;
$input-color-placeholder: #999 !default;
$input-padding-vertical: $btn-padding-vertical !default;
@@ -343,6 +346,24 @@ $header-padding-horizontal: $padding-side !default;
$header-title-size: $font-size-h3 !default;
$header-title-line-height: $line-height-computed * 1.5 !default;
$responsive-header-height: 54px !default;
$flyout-menu-bg: darken($header-bg, 15%) !default;
$flyout-menu-text: #fff !default;
$flyout-menu-link: #fff !default;
$flyout-menu-link-active-bg: $header-bg !default;
$flyout-menu-link-active: #fff !default;
$flyout-menu-header-bg: darken($header-bg, 25%) !default;
$flyout-menu-header-border: darken($header-bg, 25%) !default;
$flyout-menu-header-text: #fff !default;
$quick-search-width: 200px !default;
$quick-search-border: darken($header-bg, 15%) !default;
$quick-search-border-focus: lighten($header-bg, 25%) !default;
$quick-search-box-width: 300px !default;
$quick-search-dropdown-bg: $body-bg !default;
$quick-search-dropdown-border: $gray-lighter !default;
$logo-image-width: 60px !default;
$logo-image-height: 40px !default;
$logo-position-horizontal: $header-padding-vertical !default;
@@ -369,7 +390,7 @@ $pagination-padding-vertical: $btn-padding-vertical !default;
$pagination-padding-horizontal: 10px !default;
$pagination-color: $link-color !default;
$pagination-bg: #f9f9f9 !default;
$pagination-bg: #fafafa !default;
$pagination-border: #ddd !default;
$pagination-hover-color: $link-hover-color !default;
@@ -452,7 +473,7 @@ $panel-bg: #f9f9f9 !default;
$panel-border: #ccc !default;
$panel-border-radius: $border-radius-base !default;
$panel-shadow: 0 1px 2px rgba(#000, .1),
0 3px 8px rgba(#000, .07) !default;
0 3px 8px rgba(#000, .07) !default;
//== Tooltips
@@ -493,6 +514,7 @@ $bubble-padding-horizontal: 15px !default;
//
$screen-xs: 480px !default;
$screen-xs-min: $screen-xs !default;
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
@@ -507,6 +529,9 @@ $screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
$redmine-responsive-max: 899px !default;
$redmine-responsive-min: 900px !default;
$top-menu-collapse-breakpoint: $screen-lg-min !default;

2
src/sass/application.scss
View File

@@ -28,10 +28,12 @@
@import "components/elements";
@import "components/jquery-ui";
@import "components/icons";
@import "components/dropdown";
@import "components/top";
@import "components/jstoolbar";
@import "components/flash";
@import "components/image-base64";
@import "components/responsive";
@import "components/print";

17
src/sass/components/_admin.scss
View File

@@ -85,23 +85,6 @@ table.fields_permissions {
}
//== Enumerations
//
.controller-enumerations.action-index {
#content {
> h3,
> .list {
margin-bottom: $line-height-computed / 2;
}
> p {
margin-bottom: $line-height-computed * 2;
}
}
}
//== Settings labels
//

22
src/sass/components/_buttons.scss
View File

@@ -85,17 +85,15 @@ form[action*="repository/diff"] {
//== Button links
//
p.buttons,
.other-formats > span,
#wiki_add_attachment > p {
> a {
display: inline-block;
padding: $input-padding-vertical $input-padding-horizontal;
padding: $btn-padding-vertical $btn-padding-horizontal-small;
border: 1px solid $pagination-border;
border-radius: $input-border-radius;
border-radius: $border-radius-base;
background-color: $pagination-bg;
text-shadow: 1px 1px 0 #fff;
&:hover,
&:focus {
@@ -110,15 +108,15 @@ p.buttons,
box-shadow: inset 0 3px 4px -2px rgba(#000, .1);
}
@if $use-font-awesome {
&.icon {
padding-left: 20px + $padding-small-vertical + $input-padding-vertical;
}
} @else {
&.icon,
&.icon {
padding-left: 20px + $btn-padding-horizontal-small;
background-position: $btn-padding-horizontal-small 50%;
}
@if $use-font-awesome == false {
&.atom {
padding-left: 20px + $input-padding-vertical;
background-position: $padding-small-vertical 50%;
padding-left: 20px + $btn-padding-horizontal-small;
background-position: $btn-padding-horizontal-small 50%;
}
}
}

98
src/sass/components/_dropdown.scss Normal file
View File

@@ -0,0 +1,98 @@
.drdn {
position: relative;
&.expanded {
> .drdn-content {
display: block;
}
> .drdn-trigger {
@if $use-font-awesome {
&::after {
content: $fa-var-caret-up;
}
} @else {
@extend %image-arrow-up;
}
}
}
&-trigger {
@extend %form-field;
display: inline-block;
position: relative;
box-sizing: border-box;
user-select: none;
cursor: pointer;
@if $use-font-awesome {
@extend %fa-icon-after;
&::after {
position: absolute;
top: ($font-size-base / 2);
right: $input-padding-horizontal;
content: $fa-var-caret-down;
}
} @else {
@extend %image-arrow-down;
background-repeat: no-repeat;
background-position: right ($input-padding-horizontal / 2) center;
}
}
&-content {
@include nice-shadow(2);
display: none;
position: absolute;
top: $input-height-base + $btn-padding-vertical;
right: 0;
border-radius: $border-radius-base;
background: $main-menu-dropdown-bg;
overflow: hidden;
z-index: 1002;
}
&-items {
max-height: 400px;
color: $gray-light;
overflow: auto;
&:empty {
border: 0;
}
&.selection {
> a,
> span {
&::before {
display: inline-block;
width: 1em;
font-weight: bold;
content: " ";
}
@if $use-font-awesome {
@extend %fa-icon;
}
}
> .selected::before {
@if $use-font-awesome {
content: $fa-var-check;
} @else {
content: "\2713 ";
}
}
}
> a,
> span {
display: block;
padding: $btn-padding-vertical $btn-padding-horizontal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}

18
src/sass/components/_elements.scss
View File

@@ -83,21 +83,21 @@ a.collapsible.collapsed,
//
.contextual {
padding-left: $padding-base-vertical;
float: right;
white-space: nowrap;
cursor: default;
input,
select {
font-size: .9em;
}
}
.contextual,
.buttons {
> .icon:not(:first-child) {
margin-left: $padding-small-vertical;
a {
display: inline-block;
white-space: nowrap;
&:not(:first-child) {
margin-left: $padding-small-vertical;
}
}
}
@@ -165,6 +165,10 @@ a.collapsible.collapsed,
.splitcontentright {
width: 50%;
box-sizing: border-box;
> .wiki {
margin-bottom: $line-height-computed;
}
}
.splitcontentleft {

18
src/sass/components/_forms.scss
View File

@@ -22,6 +22,16 @@ textarea {
box-sizing: border-box;
}
%form-field {
height: $input-height-base;
padding: $input-padding-vertical $input-padding-horizontal;
border: 1px solid $input-border;
border-radius: $input-border-radius;
background-color: $input-bg;
color: $input-color;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
}
select,
textarea,
input[type="datetime"],
@@ -40,14 +50,8 @@ input[type="text"],
input[type="password"] {
@include form-control-focus;
@include placeholder;
height: $input-height-base;
padding: $input-padding-vertical $input-padding-horizontal;
@extend %form-field;
transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
border: 1px solid $input-border;
border-radius: $input-border-radius;
background-color: $input-bg;
color: $input-color;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
&[disabled],
&[readonly],

73
src/sass/components/_icons.scss
View File

@@ -95,8 +95,10 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
@at-root a#{&} {
// scss-lint:disable ImportantRule
display: inline;
width: auto !important;
height: auto !important;
padding-left: 0 !important;
font-size: 0 !important;
}
@@ -122,6 +124,7 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
.icon-help::before { content: $fa-var-info-circle; }
.icon-attachment::before { content: $fa-var-paperclip; }
.icon-history::before { content: $fa-var-history; }
.icon-time-entry::before { content: $fa-var-clock-o; }
.icon-time::before { content: $fa-var-clock-o; }
.icon-time-add::before { content: $fa-var-clock-o; }
.icon-stats::before { content: $fa-var-line-chart; }
@@ -130,11 +133,13 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
.icon-fav::before { content: $fa-var-star; }
.icon-fav-off::before { content: $fa-var-star-o; }
.icon-reload::before { content: $fa-var-refresh; }
.icon-locked::before { content: $fa-var-lock; }
.icon-lock::before { content: $fa-var-lock; }
.icon-unlock::before { content: $fa-var-unlock; }
.icon-checked::before { content: $fa-var-check; }
.icon-details::before { content: $fa-var-search-plus; }
.icon-report::before { content: $fa-var-pie-chart; }
.icon-comments::before { content: $fa-var-comment; }
.icon-comment::before { content: $fa-var-comment; }
.icon-summary::before { content: $fa-var-file-text; }
.icon-server-authentication::before { content: $fa-var-key; }
@@ -160,6 +165,30 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
.icon-not-ok::before { content: $fa-var-times; }
.icon-link-break::before { content: $fa-var-chain-broken; }
.icon-list::before { content: $fa-var-list-ul; }
.icon-sticky::before { content: $fa-var-thumb-tack; }
.icon-arrow-right::before { content: $fa-var-arrow-right; }
.icon-close::before { content: $fa-var-times-circle; }
.icon-close:hover::before { content: $fa-var-times-circle-o; }
.icon-settings::before { content: $fa-var-cog; }
.icon-group::before { content: $fa-var-users; }
.icon-groupnonmember::before { content: $fa-var-users; }
.icon-groupanonymous::before { content: $fa-var-users; }
.icon-roles::before { content: $fa-var-eye; }
.icon-issue-edit::before { content: $fa-var-edit; }
.icon-workflows::before { content: $fa-var-sitemap; }
.icon-custom-fields::before { content: $fa-var-edit; }
.icon-plugins::before { content: $fa-var-puzzle-piece; }
.icon-news::before { content: $fa-var-newspaper-o; }
.icon-issue-closed::before { content: $fa-var-ticket; }
.icon-issue-note::before { content: $fa-var-comment; }
.icon-changeset::before { content: $fa-var-upload; }
.icon-message::before { content: $fa-var-comment; }
.icon-reply::before { content: $fa-var-comment-o; }
.icon-wiki-page::before { content: $fa-var-file-text-o; }
.icon-document::before { content: $fa-var-file-text; }
.icon-project::before { content: $fa-var-cube; }
.icon-add-bullet::before { content: $fa-var-plus-circle; }
.icon-shared::before { content: $fa-var-link; }
} @else {
.icon {
padding-top: 2px;
@@ -206,6 +235,7 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
.icon-help { background-image: url("../../../images/help.png"); }
.icon-attachment { background-image: url("../../../images/attachment.png"); }
.icon-history { background-image: url("../../../images/history.png"); }
.icon-time-entry { background-image: url("../../../images/time.png"); }
.icon-time { background-image: url("../../../images/time.png"); }
.icon-time-add { background-image: url("../../../images/time_add.png"); }
.icon-stats { background-image: url("../../../images/stats.png"); }
@@ -214,11 +244,13 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
.icon-fav { background-image: url("../../../images/fav.png"); }
.icon-fav-off { background-image: url("../../../images/fav_off.png"); }
.icon-reload { background-image: url("../../../images/reload.png"); }
.icon-locked { background-image: url("../../../images/locked.png"); }
.icon-lock { background-image: url("../../../images/locked.png"); }
.icon-unlock { background-image: url("../../../images/unlock.png"); }
.icon-checked { background-image: url("../../../images/true.png"); }
.icon-details { background-image: url("../../../images/zoom_in.png"); }
.icon-report { background-image: url("../../../images/report.png"); }
.icon-comments { background-image: url("../../../images/comment.png"); }
.icon-comment { background-image: url("../../../images/comment.png"); }
.icon-summary { background-image: url("../../../images/lightning.png"); }
.icon-server-authentication { background-image: url("../../../images/server_key.png"); }
@@ -238,6 +270,30 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
.icon-not-ok { background-image: url("../../../images/false.png"); }
.icon-link-break { background-image: url("../../../images/link_break.png"); }
.icon-list { background-image: url("../../../images/text_list_bullets.png"); }
.icon-sticky { background-image: url("../../../images/bullet_go.png"); }
.icon-arrow-right { background-image: url("../../../images/bullet_go.png"); }
.icon-close { background-image: url("../../../images/close.png"); }
.icon-close:hover { background-image: url("../../../images/close_hl.png"); }
.icon-settings { background-image: url("../../../images/changeset.png"); }
.icon-group { background-image: url("../../../images/group.png"); }
.icon-groupnonmember { background-image: url("../../../images/group.png"); }
.icon-groupanonymous { background-image: url("../../../images/group.png"); }
.icon-roles { background-image: url("../../../images/database_key.png"); }
.icon-issue-edit { background-image: url("../../../images/ticket_edit.png"); }
.icon-workflows { background-image: url("../../../images/ticket_go.png"); }
.icon-custom-fields { background-image: url("../../../images/textfield.png"); }
.icon-plugins { background-image: url("../../../images/plugin.png"); }
.icon-news { background-image: url("../../../images/news.png"); }
.icon-issue-closed { background-image: url("../../../images/ticket_checked.png"); }
.icon-issue-note { background-image: url("../../../images/ticket_note.png"); }
.icon-changeset { background-image: url("../../../images/changeset.png"); }
.icon-message { background-image: url("../../../images/message.png"); }
.icon-reply { background-image: url("../../../images/comments.png"); }
.icon-wiki-page { background-image: url("../../../images/wiki_edit.png"); }
.icon-document { background-image: url("../../../images/document.png"); }
.icon-project { background-image: url("../../../images/projects.png"); }
.icon-add-bullet { background-image: url("../../../images/bullet_add.png"); }
.icon-shared { background-image: url("../../../images/link.png"); }
}
@@ -422,7 +478,8 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
&::before { content: $fa-var-ticket; }
}
.issue-statuses {
.issue-statuses,
.issue_statuses {
@extend %admin-icon;
&::before { content: $fa-var-pencil-square; }
@@ -434,7 +491,8 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
&::before { content: $fa-var-sitemap; }
}
.custom-fields {
.custom-fields,
.custom_fields {
@extend %admin-icon;
&::before { content: $fa-var-edit; }
@@ -464,7 +522,8 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
&::before { content: $fa-var-info-circle; }
}
.ldap-authentication {
.ldap-authentication,
.server_authentication {
@extend %admin-icon;
&::before { content: $fa-var-key; }
@@ -700,9 +759,9 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
}
.my-project {
@extend %fa-icon-after;
@extend %fa-icon;
&::after {
&::before {
color: #f6ab02;
font-size: $font-size-small;
content: $fa-var-star;
@@ -1000,8 +1059,8 @@ $icon-danger-hover-color: darken($brand-danger, 10%);
}
.my-project {
padding-right: 18px;
background: url("../../../images/fav.png") no-repeat right center;
padding-left: 18px;
background: url("../../../images/fav.png") no-repeat left center;
}
.sort {

3
src/sass/components/_issue.scss
View File

@@ -196,8 +196,9 @@
}
div.attachments {
margin: $issue-padding (-$issue-padding) (-$issue-padding);
margin: -$issue-padding;
padding: $issue-padding;
border-top: 0;
}
}

12
src/sass/components/_list.scss
View File

@@ -603,6 +603,18 @@ table.files {
}
}
table.list.enumerations {
table-layout: fixed;
+ h3 {
margin-top: $line-height-computed * 2;
}
+ p {
margin-bottom: $line-height-computed * 2;
}
}
//== Totals
//

75
src/sass/components/_login.scss
View File

@@ -2,20 +2,59 @@
// Login form
// --------------------------------------------------
$login-form-width: 350px;
$login-input-width: 200px;
$login-form-width: 300px;
#login-form {
margin: $line-height-computed * 2 auto;
table {
margin: auto;
label,
input {
width: 100%;
}
@media screen and (min-width: $screen-sm-min) {
width: $login-form-width;
label {
display: block;
margin-bottom: $padding-base-vertical;
font-weight: $font-weight-bold;
padding: $panel-body-padding;
> a {
float: right;
font-weight: $font-weight-normal;
}
}
input[type="text"],
input[type="password"] {
margin-bottom: $panel-body-padding-vertical;
}
table {
margin: auto;
table-layout: fixed;
}
td {
padding: 0;
&:first-child {
width: floor($login-form-width / 4);
padding-right: $table-cell-padding;
white-space: nowrap;
}
> label {
margin-bottom: $panel-body-padding-vertical;
}
> input[type="submit"] {
width: auto;
margin-right: 0;
}
}
@media screen and (min-width: $screen-xs-min) {
width: $login-form-width;
padding: $padding-side;
border: 1px solid $panel-border;
border-radius: $border-radius-base;
background-color: $panel-bg;
@@ -25,30 +64,12 @@ $login-input-width: 200px;
table {
width: 100%;
}
td {
width: 90%; // make columns expand
padding: $table-cell-padding;
}
}
}
#username,
#password,
#openid_url {
width: $login-input-width;
}
#openid_url {
padding-right: 8px + 24px;
padding-right: $input-padding-horizontal + 24px;
background-image: url("../../../images/openid-bg.gif");
background-repeat: no-repeat;
background-position: ($login-input-width - 24px) center;
}
#login-form input[type=text],
#login-form input[type=password],
#login-form label {
display: block;
margin: $padding-large-vertical 0
background-position: right $input-padding-horizontal center;
}

8
src/sass/components/_plugins.scss
View File

@@ -30,6 +30,14 @@
}
}
.flyout-menu & {
a {
&:hover {
background-color: transparent;
}
}
}
.burndown_chart {
max-width: $sidebar-width-computed;
}

196
src/sass/components/_responsive.scss Normal file
View File

@@ -0,0 +1,196 @@
.theme-Purplemine2 {
@media screen and (max-width: $redmine-responsive-max) {
.flyout-menu + div {
#header {
height: $responsive-header-height;
background-color: $header-bg;
.jump-box-arrow {
&::before {
line-height: $responsive-header-height;
}
}
#quick-search {
select {
top: 0;
height: $responsive-header-height;
box-shadow: none;
}
}
}
#main {
padding-top: $responsive-header-height;
}
}
#header {
#project-jump {
padding: 0 $responsive-header-height 0 0;
.drdn-trigger {
display: block;
height: $responsive-header-height;
padding: 0 0 0 ($padding-base-horizontal + 30px);
background-color: transparent;
line-height: $responsive-header-height;
box-shadow: none;
&::before {
padding-left: $padding-base-horizontal;
font-size: 1.2em;
font-weight: normal;
line-height: $responsive-header-height * .9;
}
@if $use-font-awesome {
&::after {
display: none;
}
}
}
.drdn-content {
top: $responsive-header-height;
}
}
}
.mobile-toggle-button {
width: $responsive-header-height;
height: $responsive-header-height;
line-height: $responsive-header-height;
&:focus {
text-decoration: none;
}
}
.flyout-menu {
background-color: $flyout-menu-bg;
color: $flyout-menu-text;
&__search {
height: $responsive-header-height;
padding: ($padding-side / 2);
line-height: normal;
input[type='text'] {
height: $responsive-header-height - $padding-side;
line-height: $responsive-header-height - $padding-side;
}
}
a {
&,
&:hover,
&:focus {
color: $flyout-menu-link;
}
}
h3 {
border-top: 1px solid $flyout-menu-header-border;
border-bottom: 1px solid $flyout-menu-header-border;
background-color: $flyout-menu-header-bg;
color: $flyout-menu-header-text;
}
#admin-menu {
a {
background-position: 8px center;
@if $use-font-awesome {
&,
&:hover,
&:focus {
&::before {
color: $flyout-menu-link;
}
}
}
&.selected {
background-color: $body-bg;
color: $text-color;
@if $use-font-awesome {
&::before {
color: $text-color;
}
}
}
}
}
}
#query_form_content {
fieldset {
margin-bottom: $line-height-computed;
}
}
.search-magnifier {
&--flyout {
line-height: normal;
}
}
.splitcontentleft {
margin-bottom: $line-height-computed;
padding-right: 0;
float: none;
}
.splitcontentright {
padding-left: 0;
float: none;
}
p.buttons,
.other-formats > span,
#wiki_add_attachment > p,
#content > .contextual {
margin-bottom: $line-height-computed - $padding-small-horizontal;
padding: 0;
float: none;
text-align: left;
a {
display: inline-block;
margin: 0 $padding-small-vertical $padding-small-horizontal 0;
padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
border: 1px solid $pagination-border;
border-radius: $border-radius-base;
background-color: $pagination-bg;
background-position: $btn-padding-horizontal center;
font-weight: $btn-font-weight;
&:active,
&:hover,
&:focus {
border-color: $pagination-hover-border;
outline: 0;
background-color: $pagination-hover-bg;
text-decoration: none;
}
&:last-child {
margin-right: 0;
}
&.icon {
padding-left: 20px + $btn-padding-horizontal;
}
@if $use-font-awesome == false {
&.atom {
padding-left: 20px + $btn-padding-horizontal;
}
}
}
}
}
}

16
src/sass/components/_tabs.scss
View File

@@ -2,6 +2,8 @@
// Tabs
// --------------------------------------------------
$tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
.tabs {
$tabs-buttons-width: 40px;
@@ -16,11 +18,12 @@
margin: 0;
padding-left: 0;
list-style: none;
box-sizing: border-box;
@if $flexbox-layout {
display: flex;
flex-wrap: nowrap;
height: $line-height-computed + $tab-padding-vertical * 2 + 1px;
height: $tabs-height;
} @else {
width: 2000px;
@extend %clearfix;
@@ -35,13 +38,15 @@
> a {
display: block;
min-width: 2em;
min-width: 3em;
height: $tabs-height;
margin-right: 2px;
padding: $tab-padding-vertical $tab-padding-horizontal;
border: 1px solid transparent;
border-radius: $border-radius-base $border-radius-base 0 0;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}
}
}
@@ -51,18 +56,17 @@
top: 0;
right: 0;
width: $tabs-buttons-width;
padding-left: 5px;
border-bottom: 1px solid $tab-border;
background-color: $body-bg;
> button {
width: 50%;
height: $tab-padding-vertical * 2 + $line-height-computed + 1px;
height: $tabs-height;
margin: 0;
padding: 0;
float: left;
transition: opacity .1s;
border: 0 none;
border-bottom: 1px solid $tab-border;
border-radius: 0;
background-color: $body-bg;
background-repeat: no-repeat;
@@ -91,7 +95,7 @@
}
div.tabs:not(#main-menu) {
height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
height: $tabs-height;
margin-bottom: $line-height-computed;
> ul {

127
src/sass/components/_top.scss
View File

@@ -39,23 +39,15 @@
}
user-select: none;
@if $use-font-awesome {
font-size: 14px;
&::before {
content: $fa-var-caret-square-o-down;
}
} @else {
@extend %image-arrow-down-white;
}
@if $use-font-awesome {
@extend %fa-icon;
color: mix($top-menu-link, $top-menu-bg, 33%);
font-size: 14px;
line-height: 1;
&::before {
margin-right: 0;
content: $fa-var-caret-square-o-down;
}
&:hover,
@@ -64,6 +56,7 @@
color: mix($top-menu-link-hover, $top-menu-bg, 50%);
}
} @else {
@extend %image-arrow-down-white;
width: 15px;
height: 15px;
border-radius: $border-radius-base;
@@ -185,29 +178,20 @@
float: right;
color: $header-text;
label {
font-weight: 500;
}
form {
display: inline;
display: inline-block;
}
input,
select {
margin-left: 5px;
transition: color ease-in-out .1s,
background-color ease-in-out .1s,
border-color ease-in-out .1s;
border-color: darken($header-bg, 15%);
background: darken($header-bg, 10%);
color: $header-root;
input {
width: $quick-search-width;
}
> form > input,
> select {
border-color: $quick-search-border;
&:focus {
border-color: darken($header-bg, 35%);
background-color: $input-bg;
color: $input-color;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
border-color: $quick-search-border-focus;
}
}
@@ -219,54 +203,65 @@
color: $gray-lighter;
}
}
input {
width: 200px;
}
}
#project-jump {
display: block;
line-height: 2.5em;
position:relative;
display: inline-block;
.drdn-trigger {
font-weight: bold;
&.expanded {
.drdn-trigger {
height: auto;
padding-bottom: $header-padding-horizontal / 2;
border-color: $quick-search-dropdown-bg;
background-color: $quick-search-dropdown-bg;
z-index: 1003;
}
}
.drdn-content {
display: none;
padding: .5em 1em;
background-color: $header-bg;
a {
display: block;
padding: 0 1em;
.drdn {
&-trigger {
min-width: $quick-search-width;
border-color: $quick-search-border;
}
a:active,
a:focus,
a:hover {
border-color: darken($header-bg, 15%);
background: darken($header-bg, 10%);
&-content {
min-width: $quick-search-box-width;
background: $quick-search-dropdown-bg;
> .quick-search {
padding: $header-padding-horizontal / 2;
> input {
width: 100%;
}
}
}
&-items {
border-top: 1px solid $quick-search-dropdown-border;
}
}
a {
color: $main-menu-link;
&:hover,
&:focus {
outline: 0 none;
background-color: $component-active-bg;
color: $component-active-color;
text-decoration: none;
}
}
.all-projects a {
font-weight: bold;
}
.all-projects a {
font-weight: $font-weight-bold;
}
}
#project-jump:hover {
.drdn-content {
display: block;
position: absolute;
z-index: 9999;
}
}
#main-menu {
$tabs-height: $main-menu-padding-vertical * 2 + $line-height-computed;
clear: both;
background-color: $main-menu-bg;
color: $text-color;
@@ -277,10 +272,11 @@
overflow: inherit;
> ul {
height: auto;
height: $tabs-height;
> li {
> a {
height: $tabs-height;
border: 0 none;
border-radius: 0;
background: transparent;
@@ -342,7 +338,7 @@
&.new-object {
position: relative;
min-width: 1.1em;
min-width: 1.6em;
padding-bottom: $main-menu-padding-vertical - 1px;
border: 1px solid $main-menu-border;
border-width: 0 1px;
@@ -408,8 +404,9 @@
background-color: $main-menu-bg;
> button {
height: $main-menu-padding-vertical * 2 + $line-height-computed - 1px;
height: $tabs-height;
background-color: $main-menu-bg;
box-sizing: border-box;
}
}

11
src/sass/components/_wiki.scss
View File

@@ -379,10 +379,19 @@ p.footnote {
float: left;
}
#add_attachment_form {
> form {
padding-top: $line-height-computed;
clear: left;
}
.collapsible & {
padding-top: 0;
border-top: 0;
> form {
padding-top: 0;
}
}
}

4
src/sass/mixins/_forms.scss
View File

@@ -2,9 +2,9 @@
//
@mixin form-control-focus($color: $input-border-focus) {
&:focus {
border-color: $color;
border-color: rgba($input-border-focus, $input-border-focus-alpha);
outline: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba($color, .5);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
}
}

2
stylesheets/application.css
View File

File diff suppressed because one or more lines are too long