doc-msp-theme 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +52 -0
- data/_includes/footer.html +16 -0
- data/_includes/header.html +55 -0
- data/_layouts/article.html +46 -0
- data/_layouts/chapter.html +39 -0
- data/_layouts/default.html +75 -0
- data/_sass/.csslintrc +20 -0
- data/_sass/.scss-lint.yml +212 -0
- data/_sass/_accessibility-seo.md +233 -0
- data/_sass/_accessibility.md +17 -0
- data/_sass/_accessibility.scss +30 -0
- data/_sass/_animation.scss +17 -0
- data/_sass/_badges.md +39 -0
- data/_sass/_badges.scss +50 -0
- data/_sass/_brandbar.scss +34 -0
- data/_sass/_brandcolor.md +92 -0
- data/_sass/_brandcolor.scss +24 -0
- data/_sass/_brandheader.scss +35 -0
- data/_sass/_brandnav.scss +224 -0
- data/_sass/_breadcrumb.md +39 -0
- data/_sass/_breadcrumb.scss +44 -0
- data/_sass/_button.md +218 -0
- data/_sass/_button.scss +146 -0
- data/_sass/_cancel.scss +13 -0
- data/_sass/_checkbox.md +55 -0
- data/_sass/_checkbox.scss +124 -0
- data/_sass/_close.scss +16 -0
- data/_sass/_collapse.scss +30 -0
- data/_sass/_content-list.md +375 -0
- data/_sass/_content-list.scss +49 -0
- data/_sass/_doc-msp-theme.md +106 -0
- data/_sass/_doc-msp-theme.scss +59 -0
- data/_sass/_expandable.md +141 -0
- data/_sass/_expandable.scss +21 -0
- data/_sass/_font-faces.md +83 -0
- data/_sass/_font-faces.scss +15 -0
- data/_sass/_footer.md +392 -0
- data/_sass/_footer.scss +147 -0
- data/_sass/_forms.md +139 -0
- data/_sass/_forms.scss +199 -0
- data/_sass/_functions.md +251 -0
- data/_sass/_functions.scss +389 -0
- data/_sass/_grid.md +449 -0
- data/_sass/_grid.scss +314 -0
- data/_sass/_header.md +1042 -0
- data/_sass/_helper.md +212 -0
- data/_sass/_helper.scss +150 -0
- data/_sass/_icons.md +153 -0
- data/_sass/_icons.scss +154 -0
- data/_sass/_images.md +21 -0
- data/_sass/_images.scss +54 -0
- data/_sass/_jsbutton.md +171 -0
- data/_sass/_media.scss +48 -0
- data/_sass/_mixins.scss +430 -0
- data/_sass/_modal.md +329 -0
- data/_sass/_modal.scss +117 -0
- data/_sass/_nav.scss +40 -0
- data/_sass/_navbar.scss +250 -0
- data/_sass/_normalize.md +7 -0
- data/_sass/_normalize.scss +423 -0
- data/_sass/_notifications.md +211 -0
- data/_sass/_notifications.scss +110 -0
- data/_sass/_pager.md +67 -0
- data/_sass/_pager.scss +138 -0
- data/_sass/_pagination.md +49 -0
- data/_sass/_pagination.scss +95 -0
- data/_sass/_qtip.md +74 -0
- data/_sass/_qtip.scss +175 -0
- data/_sass/_radio.md +53 -0
- data/_sass/_radio.scss +122 -0
- data/_sass/_scaffolding.scss +61 -0
- data/_sass/_search.md +0 -0
- data/_sass/_search.scss +90 -0
- data/_sass/_select.md +55 -0
- data/_sass/_select.scss +146 -0
- data/_sass/_tables.md +405 -0
- data/_sass/_tables.scss +131 -0
- data/_sass/_totop.md +126 -0
- data/_sass/_totop.scss +33 -0
- data/_sass/_type.md +817 -0
- data/_sass/_type.scss +450 -0
- data/_sass/_variables.scss +480 -0
- data/_sass/themes/bevel-theme/theme.scss +13 -0
- data/_sass/themes/dark-theme/_badges.scss +37 -0
- data/_sass/themes/dark-theme/_brandnav.scss +30 -0
- data/_sass/themes/dark-theme/_breadcrumb.scss +17 -0
- data/_sass/themes/dark-theme/_button.scss +86 -0
- data/_sass/themes/dark-theme/_checkbox.scss +9 -0
- data/_sass/themes/dark-theme/_content-list.scss +40 -0
- data/_sass/themes/dark-theme/_forms.scss +107 -0
- data/_sass/themes/dark-theme/_images.scss +30 -0
- data/_sass/themes/dark-theme/_mixins.scss +67 -0
- data/_sass/themes/dark-theme/_modal.scss +9 -0
- data/_sass/themes/dark-theme/_navbar.scss +15 -0
- data/_sass/themes/dark-theme/_notifications.scss +94 -0
- data/_sass/themes/dark-theme/_pager.scss +46 -0
- data/_sass/themes/dark-theme/_pagination.scss +81 -0
- data/_sass/themes/dark-theme/_qtip.scss +8 -0
- data/_sass/themes/dark-theme/_radio.scss +9 -0
- data/_sass/themes/dark-theme/_scaffolding.scss +29 -0
- data/_sass/themes/dark-theme/_select.scss +93 -0
- data/_sass/themes/dark-theme/_tables.scss +57 -0
- data/_sass/themes/dark-theme/_type.scss +70 -0
- data/_sass/themes/dark-theme/_variables.scss +171 -0
- data/_sass/themes/dark-theme/theme.scss +36 -0
- data/_sass/themes/debug-theme/theme.scss +415 -0
- metadata +179 -0
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Content-List
|
|
3
|
+
// ----------------------------------------
|
|
4
|
+
|
|
5
|
+
.content-list {
|
|
6
|
+
list-style: none;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
|
|
10
|
+
> li,
|
|
11
|
+
> .content-list-item {
|
|
12
|
+
border-bottom: 1px solid $cl-border-color;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.content-list-item {
|
|
17
|
+
position: relative;
|
|
18
|
+
display: block;
|
|
19
|
+
padding: $cl-element-padding;
|
|
20
|
+
|
|
21
|
+
&.selected {
|
|
22
|
+
color: $color-brand;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
a.content-list-item {
|
|
27
|
+
@include transition(all $transition-time-out $transition-function);
|
|
28
|
+
color: inherit;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
|
|
31
|
+
&.focus,
|
|
32
|
+
&:focus {
|
|
33
|
+
text-decoration: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.hover,
|
|
37
|
+
&:hover {
|
|
38
|
+
text-decoration: none;
|
|
39
|
+
background-color: $cl-element-bgr-color-hover;
|
|
40
|
+
@include transition($transition-time-in, '-duration');
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.active,
|
|
44
|
+
&:active {
|
|
45
|
+
background-color: $cl-element-bgr-color-active;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@include content-list-item-variant('brand', $cl-element-font-color-brand, $cl-element-bgr-color-brand);
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
//
|
|
3
|
+
//
|
|
4
|
+
// Grundlagen
|
|
5
|
+
-->
|
|
6
|
+
|
|
7
|
+
Die Komponenten basieren auf [HTML5]. Das bedeutet für die Entwicklung einer
|
|
8
|
+
Seite, dass dies dem Browser über den Dokumententyp auch mitgeteilt werden muss:
|
|
9
|
+
|
|
10
|
+
```html
|
|
11
|
+
<!DOCTYPE html>
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
[HTML5]: http://www.w3.org/TR/html5/
|
|
15
|
+
|
|
16
|
+
## Unterstützung älterer Browser
|
|
17
|
+
Da ältere Browser oft nicht die nötige Unterstützung für moderne Techniken
|
|
18
|
+
wie CSS3 und HTML5 mit sich bringen, müssen diese unter Zuhilfenahme von
|
|
19
|
+
Browserweichen und Skripten unterstützt werden. Dies gilt vorallem für den
|
|
20
|
+
Internet-Explorer der Version 8.
|
|
21
|
+
|
|
22
|
+
Um dafür die nötige grafische Unterstützung zu erhalten muss bereits das
|
|
23
|
+
HTML-Grundgerüst angepasst werden:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<!--[if (lte IE 8) ]><html lang="de" class="lte-ie8"><![endif]-->
|
|
27
|
+
<!--[if (gt IE 8)|!(IE)]><!--><html lang="de"><!--<![endif]-->
|
|
28
|
+
|
|
29
|
+
</html>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Da der Internet-Explorer der Version 8 weder mit den neuen HTML5 Elementen,
|
|
33
|
+
noch mit den Media-Queries aus CSS3 umzugehen weiß muss ihm dies explizit
|
|
34
|
+
beigebracht werden. Das erledigen Open-Source Skripte die über sogenannte
|
|
35
|
+
Content Delivery Networks bezogen werden können:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- HTML5 element and CSS3 media query support for IE8 -->
|
|
39
|
+
<!--[if lte IE 8]>
|
|
40
|
+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
41
|
+
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
42
|
+
<![endif]-->
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## Mobile Geräte
|
|
47
|
+
Um eine einwandfreie Darstellung auf mobilen Geräten zu erhalten sollte
|
|
48
|
+
das Dokument noch mit dem Meta-Element <small>viewport</small> versehen werden.
|
|
49
|
+
Es sorgt dafür, dass die Seite beim Öffnen mit einem Zoom-Faktor von 1
|
|
50
|
+
dargestellt wird und sich optimal an die Breite des Geräts anpasst:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Accessibility
|
|
57
|
+
Oft werden Formulare oder Ähnliches in Web-Anwendungen verwendet. Um deren
|
|
58
|
+
Verwendung für Unterstützungstechnologien zu verbessern kann das Attribut
|
|
59
|
+
`role="application"` angewendet werden:
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<body role="application">...
|
|
63
|
+
<!-- oder -->
|
|
64
|
+
<div role="application">...
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Basis-Template
|
|
68
|
+
|
|
69
|
+
Für den Einstieg kann dieses Basis-Template verwendet werden.
|
|
70
|
+
Es beinhaltet bereits alle erforderlichen Verknüpfungen und Einstellungen.
|
|
71
|
+
Einfach den Quelltext in eine HTML-Datei kopieren und ggf. die Pfade zu
|
|
72
|
+
den Stylesheets und Skripen anpassen:
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<!DOCTYPE html>
|
|
76
|
+
<!--[if (lte IE 8) ]><html lang="de-DE" class="no-js lte-ie8"><![endif]-->
|
|
77
|
+
<!--[if (gt IE 8)|!(IE)]><!--><html class="no-js" lang="de"><!--<![endif]-->
|
|
78
|
+
<head>
|
|
79
|
+
<meta charset="UTF-8">
|
|
80
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
81
|
+
<title>Telekom Komponenten</title>
|
|
82
|
+
<meta name="description" content="">
|
|
83
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
84
|
+
|
|
85
|
+
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
|
|
86
|
+
|
|
87
|
+
<!-- Telekom Components CSS -->
|
|
88
|
+
<link type="text/css" rel="stylesheet" href="css/components.min.css" />
|
|
89
|
+
|
|
90
|
+
<!-- HTML5 element and CSS3 media query support for IE8 -->
|
|
91
|
+
<!--[if lte IE 8]>
|
|
92
|
+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
93
|
+
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
94
|
+
<![endif]-->
|
|
95
|
+
</head>
|
|
96
|
+
<body>
|
|
97
|
+
<p>Lorem ipsum...<p>
|
|
98
|
+
|
|
99
|
+
<!-- jQuery from CDN -->
|
|
100
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
101
|
+
|
|
102
|
+
<!-- Telekom Components JS -->
|
|
103
|
+
<script type="text/javascript" src="js/components.min.js"></script>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
106
|
+
```
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// Core functions
|
|
2
|
+
@import 'functions';
|
|
3
|
+
|
|
4
|
+
// Core variables and mixins
|
|
5
|
+
@import 'variables';
|
|
6
|
+
@import 'mixins';
|
|
7
|
+
|
|
8
|
+
// Reset + Scaffolding
|
|
9
|
+
@import 'font-faces';
|
|
10
|
+
@import 'normalize';
|
|
11
|
+
@import 'icons';
|
|
12
|
+
@import 'scaffolding';
|
|
13
|
+
@import 'accessibility';
|
|
14
|
+
|
|
15
|
+
// temporary for dev
|
|
16
|
+
@import 'grid';
|
|
17
|
+
|
|
18
|
+
// Basic css
|
|
19
|
+
@import 'type';
|
|
20
|
+
@import 'images';
|
|
21
|
+
@import 'tables';
|
|
22
|
+
@import 'button';
|
|
23
|
+
@import 'forms';
|
|
24
|
+
|
|
25
|
+
// Components
|
|
26
|
+
@import 'animation';
|
|
27
|
+
@import 'content-list';
|
|
28
|
+
@import 'nav';
|
|
29
|
+
@import 'navbar';
|
|
30
|
+
@import 'brandbar';
|
|
31
|
+
@import 'brandnav';
|
|
32
|
+
@import 'brandheader';
|
|
33
|
+
@import 'footer';
|
|
34
|
+
@import 'breadcrumb';
|
|
35
|
+
@import 'pagination';
|
|
36
|
+
@import 'media';
|
|
37
|
+
@import 'badges';
|
|
38
|
+
@import 'modal';
|
|
39
|
+
@import 'notifications';
|
|
40
|
+
@import 'pager';
|
|
41
|
+
@import 'close';
|
|
42
|
+
@import 'cancel';
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
// Components with JavaScript
|
|
46
|
+
@import 'checkbox';
|
|
47
|
+
@import 'radio';
|
|
48
|
+
@import 'select';
|
|
49
|
+
@import 'totop';
|
|
50
|
+
@import 'collapse';
|
|
51
|
+
@import 'expandable';
|
|
52
|
+
@import 'qtip';
|
|
53
|
+
//@import 'search';
|
|
54
|
+
|
|
55
|
+
// Helper Classes e.g. for JS-Components
|
|
56
|
+
@import 'helper';
|
|
57
|
+
|
|
58
|
+
@import 'brandcolor';
|
|
59
|
+
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
//
|
|
3
|
+
//
|
|
4
|
+
// Expandable
|
|
5
|
+
-->
|
|
6
|
+
|
|
7
|
+
In Anwendungen für die Expandable Elemente benötigen dynamisch ein und ausgeblendet werden müssen, steht das jQuery-Plugin: `expandable()` zur Verfügung.
|
|
8
|
+
|
|
9
|
+
### Expandable
|
|
10
|
+
Eine Expandable Element wird durch einmal initialisiert und dann durch die Funktionen *toggleVisibility*, *visible*, *hidden* gesteuert.
|
|
11
|
+
|
|
12
|
+
Die Einbindung für Expandable ist wie folgt:
|
|
13
|
+
|
|
14
|
+
<div class="tc-example">
|
|
15
|
+
<button id="toggleBtn" class="btn btn-default active" aria-pressed="true" data-toggle="button" data-callback="expandSingle">Toogle Expandable</button>
|
|
16
|
+
<button id="exp-visible" class="btn btn-default btn-icon" title="Icon-Button">
|
|
17
|
+
<i class="icon icon-maximize" aria-hidden="true"></i>
|
|
18
|
+
</button>
|
|
19
|
+
<button id="exp-hidden" class="btn btn-default btn-icon" title="Icon-Button">
|
|
20
|
+
<i class="icon icon-minimize" aria-hidden="true"></i>
|
|
21
|
+
</button>
|
|
22
|
+
|
|
23
|
+
<div id="exp-single">
|
|
24
|
+
<h4>Expandable 1</h4>
|
|
25
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
26
|
+
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<button id="toggleBtn" class="btn btn-default active" aria-pressed="true" data-toggle="button" data-callback="expandSingle">Toogle Expandable</button>
|
|
32
|
+
<button id="exp-visible" class="btn btn-default btn-icon" title="Icon-Button">
|
|
33
|
+
<i class="icon icon-maximize" aria-hidden="true"></i>
|
|
34
|
+
</button>
|
|
35
|
+
<button id="exp-hidden" class="btn btn-default btn-icon" title="Icon-Button">
|
|
36
|
+
<i class="icon icon-minimize" aria-hidden="true"></i>
|
|
37
|
+
</button>
|
|
38
|
+
|
|
39
|
+
<div id="exp-single">
|
|
40
|
+
<h4>Expandable 1</h4>
|
|
41
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
|
|
42
|
+
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
|
|
43
|
+
</div>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
$(window).load(function() {
|
|
48
|
+
$('#exp-single').expandable();
|
|
49
|
+
|
|
50
|
+
$('#exp-visible').click(function (e) {
|
|
51
|
+
$('#exp-single').expandable("visible")
|
|
52
|
+
$('#toggleBtn').button('active')
|
|
53
|
+
})
|
|
54
|
+
$('#exp-hidden').click(function (e) {
|
|
55
|
+
$('#exp-single').expandable("hidden");
|
|
56
|
+
$('#toggleBtn').button('default')
|
|
57
|
+
})
|
|
58
|
+
expandSingle = function () {
|
|
59
|
+
$('#exp-single').expandable("toggleVisibility");
|
|
60
|
+
}
|
|
61
|
+
})
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
### Expandable Group
|
|
67
|
+
Eine Expandable Group wird durch eine Klasse definiert, die jedem Gruppenelement gegeben wird und die einmalig als *option* initialisiert wird.
|
|
68
|
+
|
|
69
|
+
<div class="tc-note tc-note-info">
|
|
70
|
+
**Tipp:**
|
|
71
|
+
Durch das Verwenden einer Klasse, um ein Expandable Element einer Gruppe zugehörig zu machen, müssen die Expandable Elemente nicht auf einander folgen. Zu dem können einzelne Expandable Elemente unabhängig von der Gruppenzugehörigkeit durch *visible* und *hidden* gesteuert werden.
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
Die Einbindung für eine Expandabe Group ist wie folgt:
|
|
75
|
+
|
|
76
|
+
<div class="tc-example">
|
|
77
|
+
<div class="btn-sectioned" data-toggle="buttonsectioned-radio">
|
|
78
|
+
<button class="btn btn-default active" data-callback="myFunctionExpand">Text A</button>
|
|
79
|
+
<button class="btn btn-default" data-callback="myFunctionExpand">Text B</button>
|
|
80
|
+
<button class="btn btn-default" data-callback="myFunctionExpand">Text C</button>
|
|
81
|
+
<button class="btn btn-default" data-callback="myFunctionExpand">Text D</button>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div id="exp-a" class="expGroup">
|
|
85
|
+
<h4>Expandable 1</h4>
|
|
86
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
87
|
+
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
|
|
88
|
+
</div>
|
|
89
|
+
<div id="exp-b" class="expGroup expandable-hidden" >
|
|
90
|
+
<h4>Expandable 2</h4>
|
|
91
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
|
92
|
+
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
|
|
93
|
+
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
|
|
94
|
+
</div>
|
|
95
|
+
<div id="exp-c" class="expGroup expandable-hidden" >
|
|
96
|
+
<h4>Expandable 3</h4>
|
|
97
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
|
|
98
|
+
</div>
|
|
99
|
+
<div id="exp-d" class="expGroup expandable-hidden" >
|
|
100
|
+
<h4>Expandable 4</h4>
|
|
101
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
102
|
+
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<div class="btn-sectioned" data-toggle="buttonsectioned-radio">
|
|
108
|
+
<button class="btn btn-default active" data-callback="myFunctionExpand">Button 1</button>
|
|
109
|
+
<button class="btn btn-default" data-callback="myFunctionExpand">Button 2</button>
|
|
110
|
+
<button class="btn btn-default" data-callback="myFunctionExpand" disabled>Button 3</button>
|
|
111
|
+
<button class="btn btn-default" data-callback="myFunctionExpand">Button 4</button>
|
|
112
|
+
</div>
|
|
113
|
+
<p id="callbackOutput-a" class="text-xsmall"></p>
|
|
114
|
+
|
|
115
|
+
<div id="exp-a" class="expGroup">
|
|
116
|
+
<h4>Expandable 1</h4>
|
|
117
|
+
<p>Lorem ipsum dolor sit amet…</p>
|
|
118
|
+
</div>
|
|
119
|
+
<div id="exp-b" class="expGroup">
|
|
120
|
+
<h4>Expandable 2</h4>
|
|
121
|
+
<p>Lorem ipsum dolor sit amet…</p>
|
|
122
|
+
</div>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
$(window).load(function() {
|
|
127
|
+
$('.expGroup').expandable({option:{group:'expGroup'}});
|
|
128
|
+
|
|
129
|
+
myFunctionExpand = function (element, event) {
|
|
130
|
+
var elmTxt = element.text()
|
|
131
|
+
switch (elmTxt) {
|
|
132
|
+
case 'Text A':
|
|
133
|
+
$('#exp-a').expandable("toggleVisibility");
|
|
134
|
+
break
|
|
135
|
+
case 'Text B':
|
|
136
|
+
$('#exp-b').expandable("toggleVisibility");
|
|
137
|
+
break
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
```
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Default expanable Classes
|
|
3
|
+
// ----------------------------------------
|
|
4
|
+
.expandable-hidden {
|
|
5
|
+
height: 0;
|
|
6
|
+
display: none;
|
|
7
|
+
visibility: hidden;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.expandable-visible {
|
|
11
|
+
display: block;
|
|
12
|
+
visibility: visible;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.expanable-container {
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
display: block;
|
|
18
|
+
visibility: visible;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
## Webfonts
|
|
2
|
+
Die Codecomponenten verwenden Webfonts für die Darstellung der Schrift und der Icons.
|
|
3
|
+
<div class="tc-note tc-note-info">
|
|
4
|
+
**Hinweis:**
|
|
5
|
+
Auf Telekom Standard-Arbeitsplätzen werden Webfonts im Internet Explorer nur
|
|
6
|
+
dargestellt wenn sie von einer Trustet Domain bereitgestellt werden.
|
|
7
|
+
(z.B. Telekom.de oder design.telekom.com)
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
## Schriftbasis
|
|
11
|
+
|
|
12
|
+
Den gesamten Code Components liegt ein Gestaltungsraster zugrunde, dass
|
|
13
|
+
auf einer Schriftgröße von 18px und einer Zeilenhöhe von 120% basiert.
|
|
14
|
+
|
|
15
|
+
Die dabei verwendete Schriftart ist die Telegrotesk im Schnitt `regular`.
|
|
16
|
+
|
|
17
|
+
Um diese Grundsätze in allen Komponenten sicherzustellen wurden sie direkt
|
|
18
|
+
auf den `<body>` angewendet und werden somit auf fast alle Elemente
|
|
19
|
+
wie beispielsweise `<h1>` oder `<p>` automatisch übertragen:
|
|
20
|
+
|
|
21
|
+
<div class="tc-example">
|
|
22
|
+
<h1>Lorem ipsum dolor</h1>
|
|
23
|
+
<p>
|
|
24
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
|
25
|
+
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
26
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
|
|
27
|
+
duo dolores et ea rebum.
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<h1>...</h1>
|
|
33
|
+
<p>...</p>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Es stehen außerdem die Schriftschnitte `halbfett` und `fett` zur Verfügung:
|
|
37
|
+
|
|
38
|
+
<div class="tc-example">
|
|
39
|
+
<p class="text-semibold">
|
|
40
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
|
41
|
+
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
42
|
+
aliquyam erat, sed diam voluptua.
|
|
43
|
+
</p>
|
|
44
|
+
<p class="text-bold">
|
|
45
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
|
46
|
+
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
47
|
+
aliquyam erat, sed diam voluptua.
|
|
48
|
+
</p>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<p class="text-semibold">...</p>
|
|
53
|
+
<p class="text-bold">...</p>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Lizenzinformation für Telegrotesk Schriftart
|
|
57
|
+
|
|
58
|
+
Die Schriftart "Telegrotesk" darf nur von Mitarbeitern der Deutschen Telekom
|
|
59
|
+
AG kostenfrei geladen und verwendet werden. Sie darf nicht an Dritte
|
|
60
|
+
weitergegeben werden. Bitte kontaktieren sie zum Thema Schrift den Brand
|
|
61
|
+
Design Support [support(at)branddesign.telekom.com](mailto:support@branddesign.telekom.com).
|
|
62
|
+
|
|
63
|
+
Alle Agenturen, Auftragnehmer, Leistungserbringer oder sonstige
|
|
64
|
+
Geschäftspartner sind verpflichtet, die Schriftart von URW++ zu
|
|
65
|
+
erwerben.
|
|
66
|
+
|
|
67
|
+
<br>
|
|
68
|
+
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
|
|
69
|
+
<p class="address-header">
|
|
70
|
+
<span itemprop="name">URW++ Design & Development</span>
|
|
71
|
+
</p>
|
|
72
|
+
<p class="address-body">
|
|
73
|
+
<span itemprop="streetAddress">Poppenbütteler Bogen 36</span><br>
|
|
74
|
+
<span itemprop="postalCode">22399</span>
|
|
75
|
+
<span itemprop="addressLocality">Hamburg</span><br>
|
|
76
|
+
<span itemprop="addressCountry">Germany</span>
|
|
77
|
+
</p>
|
|
78
|
+
<p class="address-footer">
|
|
79
|
+
<label>Tel.:</label><a href="tel:+4940606050" itemprop="telephone">+49 40 60605 0</a><br>
|
|
80
|
+
<label>E-Mail:</label><a href="mailto:info@urwpp.de" itemprop="email">info@urwpp.de</a><br>
|
|
81
|
+
<a href="http://www.urwpp.de" itemprop="email">www.urwpp.de</a> (IdentiType)
|
|
82
|
+
</p>
|
|
83
|
+
</address>
|