85bdf28f91
see https://github.com/foodcoops/foodsoft/pull/907 for reference and original work by viehlieb Co-authored-by: viehlieb <pf@pragma-shift.net> fix PDF Pdf
547 lines
11 KiB
Text
547 lines
11 KiB
Text
@import "twitter/bootstrap/bootstrap";
|
|
@import "twitter/bootstrap/responsive";
|
|
@import "delta_input";
|
|
|
|
body {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
// Set the correct sprite paths
|
|
@iconSpritePath: image-url('twitter/bootstrap/glyphicons-halflings.png');
|
|
@iconWhiteSpritePath: image-url('twitter/bootstrap/glyphicons-halflings-white.png');
|
|
|
|
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
|
|
@fontAwesomeEotPath: asset-url('fontawesome-webfont.eot');
|
|
@fontAwesomeEotPath_iefix: asset-url('fontawesome-webfont.eot?#iefix');
|
|
@fontAwesomeWoffPath: asset-url('fontawesome-webfont.woff');
|
|
@fontAwesomeTtfPath: asset-url('fontawesome-webfont.ttf');
|
|
@fontAwesomeSvgPath: asset-url('fontawesome-webfont.svg#fontawesomeregular');
|
|
@import 'fontawesome/font-awesome';
|
|
|
|
// Glyphicons
|
|
//@import "twitter/bootstrap/sprites.less";
|
|
|
|
// Your custom LESS stylesheets goes here
|
|
//
|
|
// Since bootstrap was imported above you have access to its mixins which
|
|
// you may use and inherit here
|
|
//
|
|
// If you'd like to override bootstrap's own variables, you can do so here as well
|
|
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
|
|
//
|
|
// Example:
|
|
// @linkColor: #ff0000;
|
|
|
|
|
|
// main ui colours
|
|
@mainRedColor: #ED0606;
|
|
|
|
// article status
|
|
@articleUsedColor: green;
|
|
@articlePartusedColor: #d50;
|
|
@articleUnusedColor: red;
|
|
@articleUnavailColor: #999;
|
|
@articleUpdatedColor: #468847;
|
|
|
|
// dim colors by this amount when the information is less important
|
|
@nonessentialDim: 35%;
|
|
|
|
|
|
// Fix empty dd tags in horizontal dl, see https://github.com/twitter/bootstrap/issues/4062
|
|
.dl-horizontal {
|
|
dd { .clearfix(); }
|
|
}
|
|
|
|
// Do not use additional margin for input in table
|
|
.form-horizontal .control-group.control-group-intable,
|
|
.form-horizontal .controls.controls-intable,
|
|
.input-prepend.intable {
|
|
margin: 0;
|
|
}
|
|
|
|
// Light tooltips without empty space below tables
|
|
.tooltip-inner {
|
|
color: #000;
|
|
background-color: rgb(245,245,245);
|
|
border: 1px solid #ccc;
|
|
}
|
|
.tooltip-inner .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.logo {
|
|
margin: 10px 0 0 30px;
|
|
float: left;
|
|
font-size: 35px;
|
|
font-weight: bold;
|
|
display: block;
|
|
color: @mainRedColor;
|
|
|
|
span {
|
|
padding: 2px 4px;
|
|
color: #ffffff;
|
|
background-color: @mainRedColor;
|
|
}
|
|
}
|
|
|
|
|
|
section {
|
|
padding-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
}
|
|
|
|
footer {
|
|
color: #888;
|
|
margin-top: 40px;
|
|
padding-top: 14px;
|
|
margin-bottom: 20px;
|
|
border-top: 1px solid #e4e4e4;
|
|
|
|
a {
|
|
color: mix(#888, @linkColor, 70%);
|
|
}
|
|
}
|
|
|
|
|
|
table {
|
|
|
|
a.sortdown:after {
|
|
content: ' \25BC';
|
|
}
|
|
a.sortup:after {
|
|
content: ' \25B2';
|
|
}
|
|
|
|
tr.list-heading {
|
|
background-color: #efefef;
|
|
td:first-child {
|
|
text-align: left;
|
|
}
|
|
small {
|
|
color: inherit; // keep it readable instead of gray
|
|
}
|
|
}
|
|
th.numeric, td.numeric {
|
|
text-align: right;
|
|
}
|
|
td.odd {
|
|
background-color: @tableBackgroundAccent;
|
|
}
|
|
th.left, td.left { text-align: left; }
|
|
th.right, td.right { text-align: right; }
|
|
th.center, td.center { text-align: center; }
|
|
|
|
td.main_info {
|
|
font-weight: bold;
|
|
}
|
|
|
|
tr.selected td {
|
|
background-color: @successBackground;
|
|
}
|
|
}
|
|
|
|
.center, td.center, th.center {
|
|
text-align: center;
|
|
}
|
|
|
|
// Navigation with embedded tabs
|
|
.nav-tabs-with-heading {
|
|
> li {
|
|
line-height: 40px;
|
|
margin-top: 16.5px;
|
|
a { padding-bottom: 9px; }
|
|
}
|
|
> li.heading {
|
|
> h1, > h2, > h3 {
|
|
font-size: 31.5px;
|
|
line-height: 40px;
|
|
margin: 0;
|
|
}
|
|
margin: 10px 1em 5px 0;
|
|
}
|
|
}
|
|
|
|
// Error page
|
|
.large-error-icon {
|
|
float: left;
|
|
text-align: right;
|
|
font-size: 160px;
|
|
color: lightgrey;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
// Tasks ..
|
|
.accepted {
|
|
color: #468847;
|
|
}
|
|
.unaccepted {
|
|
color: #B94A48;
|
|
}
|
|
|
|
// Documents
|
|
.documents-item-folder {
|
|
font-weight: bold;
|
|
}
|
|
|
|
// Wiki
|
|
#wikiContent {
|
|
.editsection {
|
|
display: none;
|
|
}
|
|
.mw-headline a {
|
|
color: @textColor;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// ordering
|
|
.used {
|
|
color: @articleUsedColor;
|
|
}
|
|
.unused {
|
|
color: @articleUnusedColor;
|
|
margin-right: 0.5em;
|
|
}
|
|
.partused {
|
|
color: @articlePartusedColor;
|
|
}
|
|
.btn-ordering, .btn-group .btn-ordering {
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
padding: 4px 8px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
#order-footer, .article-info {
|
|
text-align: left;
|
|
z-index: 1;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #E4EED6;
|
|
border-top: 2px solid #78B74E;
|
|
|
|
#total-sum {
|
|
width: 22em;
|
|
margin: .5em 2em 0 0;
|
|
float: right;
|
|
#order-button {
|
|
margin: .5em 0;
|
|
|
|
input:disabled {
|
|
background-color: red; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the orders article info for small screens
|
|
to prevent the "save order" button to disappear */
|
|
@media only screen and (max-width: 950px) {
|
|
tr.order-article:hover .article-info {
|
|
display: none;
|
|
}
|
|
tr.order-article:focus .article-info {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#order-footer {
|
|
width: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.article-info {
|
|
z-index: 2;
|
|
width: 40em;
|
|
height: 8em;
|
|
border: none;
|
|
left: 30px;
|
|
|
|
.article-name {
|
|
text-align: center;
|
|
margin: 2px 0;
|
|
margin-bottom: 5px;
|
|
width: 100%;
|
|
font-weight: bold;
|
|
}
|
|
.pull-right {
|
|
width: 35%;
|
|
}
|
|
.pull-left {
|
|
width: 60%;
|
|
}
|
|
}
|
|
|
|
tr.order-article .article-info {
|
|
display: none;
|
|
}
|
|
|
|
tr.order-article:focus{
|
|
background-color: #E4EED6;
|
|
}
|
|
tr.order-article:focus .article-info {
|
|
display: block;
|
|
}
|
|
|
|
// ********* Articles
|
|
|
|
tr.just-updated {
|
|
color: @articleUpdatedColor;
|
|
}
|
|
|
|
tr.unavailable {
|
|
color: @articleUnavailColor;
|
|
}
|
|
|
|
// articles edit all
|
|
.field_with_errors {
|
|
input, select {
|
|
border-color: red;
|
|
}
|
|
}
|
|
|
|
// editable article list can be more compact
|
|
.ordered-articles input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// allow content to appear without sudden table change (receive)
|
|
.units_delta {
|
|
min-width: 3.5em;
|
|
}
|
|
|
|
// small cells with just a 'x' or '='
|
|
td.symbol, th.symbol {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
text-align: center;
|
|
}
|
|
.symbol { color: tint(@textColor, @nonessentialDim); }
|
|
.used .symbol { color: tint(@articleUsedColor, @nonessentialDim); }
|
|
.unused .symbol { color: tint(@articleUnusedColor, @nonessentialDim); }
|
|
.partused .symbol { color: tint(@articlePartusedColor, @nonessentialDim); }
|
|
.unavailable .symbol { color: @articleUnavailColor; }
|
|
|
|
// hide symbols completely on small screens to save space
|
|
@media (max-width: 768px) {
|
|
.symbol {
|
|
font-size: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// ********* Tweaks & fixes
|
|
|
|
// Fix bootstrap dropdown menu on mobile
|
|
// https://github.com/twbs/bootstrap/issues/4550#issuecomment-31916049
|
|
.dropdown-backdrop { position: static; }
|
|
|
|
.dl-horizontal {
|
|
dt { width: 200px; margin-bottom: 0.2em; }
|
|
dd { margin-left: 210px; }
|
|
}
|
|
|
|
// get rid of extra bottom margin inside well
|
|
.well p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// center table rows vertically (including form elements)
|
|
table.table {
|
|
td, th {
|
|
vertical-align: middle;
|
|
}
|
|
select, textarea, input, .uneditable-input,
|
|
.input-append, .input-prepend {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.settings {
|
|
.settings-group {
|
|
margin-bottom: 10px;
|
|
.control-label {
|
|
margin: 5px 0 0 0;
|
|
}
|
|
}
|
|
.control-group {
|
|
margin-bottom: 5px;
|
|
}
|
|
.control-group.h_wrapper {
|
|
margin-bottom: 5px;
|
|
}
|
|
.control-group.select {
|
|
margin-bottom: 15px
|
|
}
|
|
}
|
|
|
|
// inline (boolean) position after/before heading
|
|
label {
|
|
h1, h2, h3, h4 {
|
|
input[type=checkbox] {
|
|
margin: auto 0.3em auto 0.3em;
|
|
}
|
|
}
|
|
}
|
|
// fix checkbox form height
|
|
.controls > label.checkbox { margin-top: 5px; }
|
|
.settings-group .controls > label.checkbox { margin-top: 0; }
|
|
|
|
|
|
// it's a bit distracting
|
|
.icon-asterisk {
|
|
font-size: 80%;
|
|
vertical-align: middle;
|
|
padding-bottom: 0.4ex;
|
|
}
|
|
|
|
// allow buttons as input add-on (with proper height)
|
|
.input-append button.add-on {
|
|
height: inherit;
|
|
}
|
|
|
|
// inline form elements
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
|
|
// show package icon after amount of wholesale units
|
|
.package-image (@align) {
|
|
background-image: image-url('package-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-position: @align center;
|
|
}
|
|
input.package {
|
|
.package-image(right);
|
|
// disabled and readonly definitions though
|
|
&[disabled], &[readonly] {
|
|
background-color: @inputDisabledBackground;
|
|
}
|
|
}
|
|
i.package {
|
|
.package-image(left);
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
vertical-align: baseline;
|
|
font-style: normal;
|
|
padding-left: 20px;
|
|
@media (max-width: 979px) { padding-left: 0; }
|
|
}
|
|
i.package.icon-only {
|
|
padding-left: 6px;
|
|
background-position: right;
|
|
display: inline-block;
|
|
}
|
|
.package { color: tint(@textColor, @nonessentialDim); }
|
|
.used .package { color: tint(@articleUsedColor, @nonessentialDim); }
|
|
.unused .package { color: tint(@articleUnusedColor, @nonessentialDim); }
|
|
.partused .package { color: tint(@articlePartusedColor, @nonessentialDim); }
|
|
.unavailable .package { color: @articleUnavailColor; }
|
|
|
|
// very small inputs - need !important for responsive selectors
|
|
.input-nano {
|
|
width: 30px !important;
|
|
}
|
|
|
|
// get rid of extra space on bottom of dialog with form
|
|
.modal form {
|
|
margin: 0;
|
|
}
|
|
|
|
// multiple-column layout in forms (landscape tablet and wider only)
|
|
@media (min-width: 768px) {
|
|
.form-horizontal .fold-line {
|
|
.control-group {
|
|
float: left;
|
|
}
|
|
.control-group + .control-group {
|
|
.control-label {
|
|
width: auto;
|
|
margin: 0 10px;
|
|
}
|
|
.controls {
|
|
float: left;
|
|
margin-left: 0;
|
|
}
|
|
// fix margin somehow off
|
|
// XXX there must be a better way
|
|
margin-bottom: 0;
|
|
.help-block {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.control-group:last-child {
|
|
float: none;
|
|
.controls {
|
|
float: none;
|
|
}
|
|
}
|
|
// allow to add a hint for the whole line
|
|
> .help-block {
|
|
clear: both;
|
|
margin-left: 180px;
|
|
position: relative;
|
|
top: -2.5ex;
|
|
}
|
|
}
|
|
}
|
|
// allow to have indicator text instead of input with same markup
|
|
.control-text {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
// unlock button same size as warning sign
|
|
.input-prepend button.unlocker {
|
|
padding-right: 6px;
|
|
padding-left: 7px;
|
|
}
|
|
|
|
// TODO: Remove the .panel defines after updating Bootstrap to >=3.0
|
|
.panel {
|
|
margin-bottom: 20px;
|
|
background-color: #fff;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
.panel-default {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
.panel-heading {
|
|
padding: 10px 15px;
|
|
border-bottom: 1px solid transparent;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px
|
|
}
|
|
|
|
.panel-default > .panel-heading {
|
|
color: #333;
|
|
background-color: #f5f5f5;
|
|
border-color: #ddd
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 15px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
span.positive_amount {
|
|
color: black;
|
|
}
|
|
|
|
span.negative_amout {
|
|
color: red;
|
|
}
|
|
|
|
.deleted_row {
|
|
text-decoration: line-through;
|
|
}
|