Projekt

Allgemein

Profil

Herunterladen (12 KB) Statistiken
| Zweig: | Markierung: | Revision:
fb33dc99 Hans Peter Schlaepfer
// ----------------------------------------------------------------------------
//
// MAIN (MAIN PROPERTIES)
//
// ----------------------------------------------------------------------------
// DESCRIPTION:
//
//
//
// CONTENTS:
// - GENERAL FONT SIZES
// - HEADING
// - H1
// - H2
// - H3 & Caption
// - LINKS
// - COMPONENTS
// - DIVs & SPAN Dimensions
// - SPAN: Labels & Values
// - Select Functions (DIV)
// - Info-Container (DIV)
// - Wrapper
// - File Content (PRE)
// - CATEGORIES
// - Plus & Minus / Positive & Negative
// - Styled Text
// - SPECIALIZED PROPERTIES (REDUNANT)
// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
// ----------------------------------------------------------------------------




// --------------------------------------
// GENERAL FONT SIZES
// --------------------------------------

#content {

& > p,
& > div,
& > td,
& > th {
font-size: @font-size-small ;
}
input,
select, option,
textarea {
font-size: @font-size-smaller ;
}
}




// --------------------------------------
// Headings (H1 - H6)
// --------------------------------------
// H1
//
h1{
display: block;
text-align: left;
margin: 0;
font-weight: normal;
font-size: @h1-size;
line-height: 1.2em ;
}
// PENDENT: mit Child-Kombinator > versehen wenn fertig
// PENDENT: SIEHE AUCH .LISTTOP
#content > h1 {
position: fixed;
z-index: @zindex-h1; //hps:12
top: 60px;
width: 100%;
color: @brand-h1-color ;
background-color: @brand-h1-bg;
padding: @h1-padding;

}
#content .wrapper h1{
color: @headings-color;
font-size: @h2-size;
margin: @margin-from-wrapper ;
}
body > h1{
color: @brand-h1-color ;
background-color: @brand-h1-bg ;
padding: @h1-padding;
}


// --------------
// H2
//
h2 {
color: @headings-color;
font-size: @h2-size ;
border-style: none;
letter-spacing: 0.14em;
}
#content,
.admin {
& > h2 {
padding: 0.6em 0.2em ;
margin: 0.6em 0 0 0 ;
}
ui-tabs-panel {
.wrapper > h2 {
padding: 0 0.2em 0.6em 0.2em;
margin: @margin-from-wrapper ;
}
}
.wrapper > h2 {
padding: 0 0.2em 0.6em 0.2em;
}
} // /#content /.admin
h2.confirm { color: @headings-color-confirm ; }
h2.error { color: @headings-color-error ; }
// -------------------
// H2 RECORD-TITLE (e.g. Customer Name, Article Name)
// PENDENT: an verschiedenen Orten einfuegen
h2.record-title {
padding: 0.6em 0 0 0 !important;
font-size: @h2-size ;
color: @headings-color-accent ;
small{
color: @headings-color ;
letter-spacing: 0 ;
}
}
.wrapper > h2.record-title{
margin: 0em 1em 1em 0.2em !important;
}
.ui-tabs-panel > h2.record-title{
margin: 1em 1em 0.2em @margin-left-from-content !important;
padding: 0.8em 0 0 0.1em !important;
}


// --------------
// H3
//
// see also caption in table.less
h3 {
.mx-h3-caption ; // Mixin

&.caption{
margin: 0.6em 0 0.4em 0 !important;
}
}
#content h3{
color: @headings-color ;
padding-left: 0 ;
margin: 0.8em 0 0.4em 0 ;
}
#content .wrapper h3 {
margin-top: 1.0em ;
}
#content table.tbl-horizontal > tbody > tr > th > h3,
#content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }




// --------------------------------------
// LINKS
// --------------------------------------

a {
text-decoration: @link-decoration;

&:link,
&:visited,
&:active {
color: @link-color;
}
&:hover {
color: @link-hover-color;
text-decoration: @link-hover-decoration;
}

// Special classes
// PENDENT: some of them obsolete
&.selected:hover {
color:#EBEBEB;
}
&.nomobile {
background-color:transparent;
border:none;
}
&.green {
background-color: DarkGreen;
color: white !important;
border:none;
}
&.orange {
background-color:#FF8000;
border:none;
}
&.red {
background-color:#FF0000;
border:none;
}


// -------------------
// BUTTONS (.button)
// see file buttons.less

} // /a (Links)




// --------------------------------------
// COMPONENTS
// --------------------------------------
// --------------
// DIVs: Dimensions
//
div,
span,
div.list {
&.wi-smallest { width: @div-wi-smallest ; } // 2.0em
&.wi-verysmall { width: @div-wi-verysmall ; } // 4.0em
&.wi-small { width: @div-wi-small ; } // 8.8em
&.wi-mediumsmall { width: @div-wi-mediumsmall ; } // 8.8em
&.wi-normal { width: @div-wi-normal ; } // 12.0em
&.wi-lightwide { width: @div-wi-lightwide ; } // 12.0em
&.wi-wide { width: @div-wi-wide ; } // 18.0em
&.wi-wider { width: @div-wi-wider ; } // 24.0em
&.wi-verywide { width: @div-wi-verywide ; } // 36.0em
}

// --------------
// Long Description
// (see also TD.longdesc etc.)

div.long-description,
div.long-desc,
div.longdescription,
div.longdesc {
font-size: @font-size-smaller ;

&.small {
font-size: @font-size-smaller ;
}
p {
margin: 0 0 0.6em 0;
}
ul,
ol {
margin-top: 0 ;
li { font-size: @font-size-smaller ; }
}
}

// --------------
// SPAN: Labels & Values
//

span.label{
color: @brand-data-label-color ;
font-size: @font-size-smaller ;
font-style: normal ;
margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
}
span.value{
color: #000 ;
margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
}


// --------------
// Info-Container (DIV)
//

// small info-boxes for the user
div.description{
display: block;
float: left ;
padding: 0 0 0.6em 0 ;

// Dimensions
&.wi-verysmall { width: @div-wi-verysmall ; }
&.wi-small { width: @div-wi-small ; }
&.wi-mediumsmall { width: @div-wi-mediumsmall ; }
&.wi-normal { width: @div-wi-normal ; }
&.wi-wide { width: @div-wi-wide ; }
&.wi-lightwide { width: @div-wi-lightwide ; }
&.wi-wider { width: @div-wi-wider ; }
&.wi-verywide { width: @div-wi-verywide ; }

}

// big info boxes for the user
// same as cols
// PENDENT: Mixin fuer Padding, Margin etc. anlegen
div.instructions {
background-color: @instructionbox-bg;
border: @instructionbox-border;
border-radius: @contentbox-radius ;
max-width: 70% ;
.mx-contentbox-properties ;
color: #4C4C4C;
font-size: 80%;

p { width: 30.0em }
}



// --------------
// Wrapper
//
// Wrapper for padding & columns
// TEST
.wrapper {
overflow: hidden ;
margin: @contentbox-margin ;
padding: 0 0 1.0em 0 ;
clear: both ;
display: block ;
border: 1px transparent solid ; // for nice alignment with folded wrapper

.wrapper { margin-left: 0 !important ; }

&.test { background-color: #FFE67C ; }

&.toggled { display: inline-block !important ; }
&.bordered { border: 1px @brand-strong solid ; }


// Toggle buttons
// must be placed on the first position in .wrapper
// PENDENT: Plazierung
& > .toggles {
display: inline-block ;
float: right ;
position: relative ;
top: 0 ;
margin-top: 4px ;
float: right ;

a.toggle {
display: inline-block;
width: 18px ;
height: 18px ;
background-repeat: no-repeat;
background-position: 50% 50%;
&.min { background-image: url(../image/toggle-down.png); }
&.max { background-image: url(../image/toggle-left.png); }
}
}

.tbl-horizontal,
.tbl-plain {
float: left ;
}

// --------------
// Columns
//
// DIV or TABLE
.col {
float: left ;
&.test {
background-color: #FFD7BA;
border: 1px #6CF solid;
}
&.wi-small { width: @div-wi-small ; }
&.wi-mediumsmall { width: @div-wi-mediumsmall; }
&.wi-normal { width: @div-wi-normal ; }
&.wi-wide { width: @div-wi-wide ; }
&.wi-lightwide { width: @div-wi-lightwide ; }
&.wi-wider { width: @div-wi-wider ; }
&.wi-verywide { width: @div-wi-verywide ; }

.tbl-horizontal,
.tbl-plain {
float: none ;
clear: left ;
}
}
& > p {
max-width: 36.0em ;
overflow: hidden ;
font-size: @font-size-smaller ;
line-height: 140%;
//color: @gray-darker ;
padding-bottom: 1.0em ;
}
}

// --------------
// Centered Elements
//
.center{
margin: auto;
}
// Centered blocks
.center {
margin: 0 auto;
width: auto;
}


// PENDENT: Neue Loesung
.accent{
div.label{
float: left ;
color: @brand-data-label-color ;
font-size: 80% ;
&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
padding-top: 0.8em ;
}
div.data{
float: left ;
input[type="text"]{
width: 20em !important ;
}
}
}







// --------------
// Hidden Elements
//
.hidden {
display: none ;
}


// --------------
// File Content
//
// PENDENT: wozu? genügt nicht PRE?
// /templates/webpages/am/edit_templates.html
pre.filecontent {
border: 1px solid blue;
padding-left: 2px;
padding-right: 2px;
}


// --------------
// Expanded
//

// Pendent: wozu einmalig?
// /templates/webpages/order/tabs/_row.html
// /templates/webpages/order/tabs/basic_data.html
// /js/kivi.Order.js
#expand_all,
.expand {
cursor: pointer;
display: block;
max-width: 16px;
max-height: 16px;
}







// --------------------------------------
// CATEGORIES
// --------------------------------------


// --------------
// Plus & Minus / Positive & negative
//
// Inline-Elements
.plus,
.minus,
.plus0,
.plus1 {
display: inline !important;
clear: none;
}
// Negative Values
.minus,
plus0 { color: @brand-negative; }
// Positive Values
.plus ,
.plus1 { color: @brand-positive; }
// unbalanced Ledger
// PENDENT: wo eingesetzt?
span.unbalanced_ledger {
background-color: @brand-warning-bg;
}


// --------------
// Styled Text
//

// Dimmed Text
// /templates/webpages/requirement_spec_text_block/_text_block.html
// /templates/webpages/requirement_spec_item/_section_header.html
div.dimmed-text,
span.dimmed-text {
color: @gray;
font-style: italic;
}




// --------------------------------------
// SPECIALIZED PROPERTIES (REDUNANT)
// --------------------------------------


// gemahnte Rechnung
// /templates/webpages/is/form_header.html
// /templates/webpages/ar/form_header.html
.dunned_invoice {
font-weight: bold;
color: #f00;
}
// gemahnte Rechnung
// /templates/webpages/is/form_header.html
// /templates/webpages/ar/form_header.html
.customer_dunning_level {
font-weight: bold;
}
// dunning
// /templates/webpages/dunning/show_invoices.html
#dunning_invoice_list .direct_debit td,
#dunning_invoice_list .direct_debit a {
color: @gray-medium;
}

// Bank transactions
// /templates/webpages/bank_transactions/tabs/automatic.html
#bank_transactions_proposals .invoice_number_highlight a,
#bank_transactions_proposals span.invoice_number_highlight {
background-color: @color-green-strong;
color: #FFFFFF;
}



// --------------------------------------
// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
// --------------------------------------

hr {
background-color: @color-green-light; // #006400
border: none;
//color: #79B61B;
height: 1px;
}

ul,
ol {
font-size: @font-size-base ;

li {
font-size: @font-size-small ;
}
}
.wrapper .col{
ul {
list-style: circle outside;
padding: 0 ;
margin: 0 ;
li{
padding: 0 0 0 -0.6em ;
margin: 0 0 0 0 ;
}
}
}

// --------------------------------------
// Diverse Elements
// --------------------------------------
// make vertical Space between to elements
.spacer{
clear: both;
}





// --------------------------------------
// DEPRACETED STUFF (BUT WILL IT BE AVAILABLE FOR A LONGER TIME?)
// --------------------------------------
// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen

#content {
&>p { margin: 0.6em 2.0em 1.0em 0.7em }
&>p.message_hint {
margin: 0.6em 2.0em 1.0em 1.0em
}
}