From f3f3da6d1a47eea1752759f63430e2be0409a9c1 Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Sat, 31 Dec 2016 21:47:41 +0100 Subject: [PATCH] Structure improvement --- _vars.scss | 0 accordion.scss | 2 +- blockquote.scss | 2 +- breadcrumb.scss | 2 +- button.scss | 2 +- canvas.scss | 2 +- default.scss | 2 +- draggable.scss | 3 ++ form.scss | 2 +- image.scss | 2 +- input.scss | 2 +- list.scss | 29 +++++++++++- main.scss | 2 +- mixin.scss | 105 ------------------------------------------- nav.scss | 2 +- pagination.scss | 2 +- progress.scss | 116 +++++++++++++++++++++++++++++++++++++++++++++++- section.scss | 2 +- styles.scss | 4 +- tab.scss | 2 +- table.scss | 2 +- tag.scss | 2 +- tooltip.scss | 2 +- 23 files changed, 165 insertions(+), 126 deletions(-) create mode 100644 _vars.scss create mode 100644 draggable.scss delete mode 100644 mixin.scss diff --git a/_vars.scss b/_vars.scss new file mode 100644 index 0000000..e69de29 diff --git a/accordion.scss b/accordion.scss index d75f285..7fb1f25 100644 --- a/accordion.scss +++ b/accordion.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .ac-container{ width: 100%; diff --git a/blockquote.scss b/blockquote.scss index ec5104c..3ffe039 100644 --- a/blockquote.scss +++ b/blockquote.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; blockquote { border: 1px solid $content-borderlight-color; diff --git a/breadcrumb.scss b/breadcrumb.scss index 9c2b9a5..26dd85d 100644 --- a/breadcrumb.scss +++ b/breadcrumb.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .crumbs-1 { list-style: none; diff --git a/button.scss b/button.scss index 8a45da4..7085e47 100644 --- a/button.scss +++ b/button.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .btn { cursor: pointer; diff --git a/canvas.scss b/canvas.scss index 81797e2..b291bed 100644 --- a/canvas.scss +++ b/canvas.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; canvas { background: #fff; diff --git a/default.scss b/default.scss index 75f3321..21ac1cc 100644 --- a/default.scss +++ b/default.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; body { background: $background-color; diff --git a/draggable.scss b/draggable.scss new file mode 100644 index 0000000..0887e21 --- /dev/null +++ b/draggable.scss @@ -0,0 +1,3 @@ +*[draggable] { + cursor: pointer; +} \ No newline at end of file diff --git a/form.scss b/form.scss index ff0280e..26ed752 100644 --- a/form.scss +++ b/form.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; form li { margin: 5px 0 5px 0; diff --git a/image.scss b/image.scss index b229263..98eb796 100644 --- a/image.scss +++ b/image.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; img.frame-1 { padding: 5px; diff --git a/input.scss b/input.scss index 0eba003..e6cc969 100644 --- a/input.scss +++ b/input.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; input, select, textarea, .textarea { border: 1px solid $content-border-color; diff --git a/list.scss b/list.scss index 3c8c722..234f08b 100644 --- a/list.scss +++ b/list.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; ul.default li { margin: 5px 0 5px 0; @@ -36,3 +36,30 @@ ul.h-list li { margin: 5px 10px 5px 10px; } + +.bullet-list { + margin: 0; + padding: 0; + border-spacing: 0; + border-collapse: collapse; +} + +.bullet-list td:first-child { + padding-right: 20px; +} + +.bullet-list span { + margin-right: 5px; +} + +.bullet { + width: 7px; + height: 7px; + border-radius: 30px; + background: #ccc; + display: inline-block; +} + +.bullet.active { + background: #000; +} \ No newline at end of file diff --git a/main.scss b/main.scss index b8764b5..d5d54af 100644 --- a/main.scss +++ b/main.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; main { height: 100%; diff --git a/mixin.scss b/mixin.scss deleted file mode 100644 index 72e0761..0000000 --- a/mixin.scss +++ /dev/null @@ -1,105 +0,0 @@ -@mixin box-sizing($box-model) { - -moz-box-sizing: $box-model; - -webkit-box-sizing: $box-model; - box-sizing: $box-model; -} - -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - -ms-border-radius: $radius; - border-radius: $radius; - background-clip: padding-box; -} - -@mixin border-top-radius($radius) { - -webkit-border-top-right-radius: $radius; - border-top-right-radius: $radius; - -webkit-border-top-left-radius: $radius; - border-top-left-radius: $radius; - background-clip: padding-box; -} - -@mixin border-right-radius($radius) { - -webkit-border-bottom-right-radius: $radius; - border-bottom-right-radius: $radius; - -webkit-border-top-right-radius: $radius; - border-top-right-radius: $radius; - background-clip: padding-box; -} - -@mixin border-bottom-radius($radius) { - -webkit-border-bottom-right-radius: $radius; - border-bottom-right-radius: $radius; - -webkit-border-bottom-left-radius: $radius; - border-bottom-left-radius: $radius; - background-clip: padding-box; -} - -@mixin border-left-radius($radius) { - -webkit-border-bottom-left-radius: $radius; - border-bottom-left-radius: $radius; - -webkit-border-top-left-radius: $radius; - border-top-left-radius: $radius; - background-clip: padding-box; -} - -@mixin border-bottomleft-radius($radius) { - -webkit-border-bottom-left-radius: $radius; - border-bottom-left-radius: $radius; - background-clip: padding-box; -} - -@mixin border-bottomright-radius($radius) { - -webkit-border-bottom-right-radius: $radius; - border-bottom-right-radius: $radius; - background-clip: padding-box; -} - -@mixin border-topright-radius($radius) { - -webkit-border-top-right-radius: $radius; - border-top-right-radius: $radius; - background-clip: padding-box; -} - -@mixin gradient-top-bottom($start, $pos, $end, $pos2, $bg) { - background: $bg; - background: -moz-linear-gradient(top, $start $pos, $end $pos2); - background: -webkit-gradient(linear, left top, left bottom, color-stop($pos, $start), color-stop($pos2, $end)); - background: -webkit-linear-gradient(top, $start $pos, $end $pos2); - background: -o-linear-gradient(top, $start $pos, $end $pos2); - background: -ms-linear-gradient(top, $start $pos, $end $pos2); - background: linear-gradient(to bottom, $start $pos, $end $pos2); -} - -@mixin box-shadow-top($color) { - -moz-box-shadow: inset 0px 1px 0px 0px $color; - -webkit-box-shadow: inset 0px 1px 0px 0px $color; - box-shadow: inset 0px 1px 0px 0px $color; -} - -@mixin box-shadow-left($color) { - -moz-box-shadow: inset 1px 0px 0px 0px $color; - -webkit-box-shadow: inset 1px 0px 0px 0px $color; - box-shadow: inset 1px 0px 0px 0px $color; -} - -@mixin box-shadow-bottom($color) { - -moz-box-shadow: 0px 1px 0px 0px $color; - -webkit-box-shadow: 0px 1px 0px 0px $color; - box-shadow: 0px 1px 0px 0px $color; -} - -@mixin box-shadow-out($color) { - -moz-box-shadow: inset 1px 1px 0px 0px $color; - -webkit-box-shadow: inset 1px 1px 0px 0px $color; - box-shadow: inset 1px 1px 0px 0px $color; -} - -@mixin transform-rotate($deg) { - -webkit-transform: rotate($deg); - -moz-transform: rotate($deg); - -o-transform: rotate($deg); - -ms-transform: rotate($deg); - transform: rotate($deg); -} diff --git a/nav.scss b/nav.scss index 8e3677a..e359299 100644 --- a/nav.scss +++ b/nav.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; #nav-side { width: 175px; diff --git a/pagination.scss b/pagination.scss index 2d0e036..69b7968 100644 --- a/pagination.scss +++ b/pagination.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .pagination { li { diff --git a/progress.scss b/progress.scss index 1e88333..b48fe36 100644 --- a/progress.scss +++ b/progress.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .meter { height: 20px; /* Can be anything */ @@ -88,3 +88,117 @@ -webkit-animation: none; background-image: none; } + +.timeline { + list-style: none; + margin: 0 0 30px 120px; + padding-left: 30px; + border-left: 3px solid #eaeaea; +} + +.timeline li { + margin: 0; + position: relative; +} + +.timeline p { + margin: 0 0 15px; +} + +.timeline-date { + margin-top: -18px; + top: 50%; + left: -150px; + font-size: 0.95em; + line-height: 20px; + position: absolute; + padding: 5px 10px 5px 10px; + border: 1px solid #ccc; +} + +.timeline-circle { + margin-top: -10px; + top: 50%; + left: -40px; + width: 10px; + height: 10px; + background: tomato; + border: 3px solid #eaeaea; + border-radius: 50%; + display: block; + position: absolute; +} + +.timeline-circle-start { + margin-top: 0; + top: 0; + left: -45px; + width: 20px; + height: 20px; + background: #fff; + border: 3px solid #eaeaea; + border-radius: 50%; + display: block; + position: absolute; +} + +.timeline-circle-end { + margin-top: 0; + top: 100%; + left: -45px; + width: 20px; + height: 20px; + background: #fff; + border: 3px solid #eaeaea; + border-radius: 50%; + display: block; + position: absolute; +} + +.timeline-content { + padding: 50px 20px 0; + border-radius: 0.5em; + position: relative; +} + +.timeline-content p { + text-align: justify; +} + +.timeline label { + font-size: 1.3em; + position: absolute; + z-index: 100; + top: 20px; +} + +.timeline-radio { + display: none; +} + +.timeline-break { + display: none; +} + +.progress-radial { + float: left; + margin-right: 20px; + position: relative; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: tomato; +} + +.progress-radial .overlay { + position: absolute; + width: 60px; + height: 60px; + background-color: #fff; + border-radius: 50%; + margin-left: 5px; + margin-top: 5px; + text-align: center; + line-height: 60px; + font-size: 9px; +} diff --git a/section.scss b/section.scss index e822d60..dda83db 100644 --- a/section.scss +++ b/section.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .box { @include box-sizing(border-box); diff --git a/styles.scss b/styles.scss index f53d675..448f625 100644 --- a/styles.scss +++ b/styles.scss @@ -1,3 +1,3 @@ -@import "clean", "mixin", "default", "color", "size", "transformation", "alignment", "visibility", "animate"; -@import "layout", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag"; +@import "_vars", "clean", "_mixin", "default", "color", "size", "transformation", "alignment", "visibility", "animate"; +@import "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag"; @import "media"; diff --git a/tab.scss b/tab.scss index c3c17d5..6702bae 100644 --- a/tab.scss +++ b/tab.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .tabular { @include box-sizing(border-box); diff --git a/table.scss b/table.scss index 7065343..a9247e2 100644 --- a/table.scss +++ b/table.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; table.table { @include box-sizing(border-box); diff --git a/tag.scss b/tag.scss index 437bdd8..3ebd152 100644 --- a/tag.scss +++ b/tag.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .tag { text-shadow: 1px 1px 1px #ffffff; diff --git a/tooltip.scss b/tooltip.scss index aee07e4..a413068 100644 --- a/tooltip.scss +++ b/tooltip.scss @@ -1,4 +1,4 @@ -@import "mixin", "color"; +@import "_mixin", "color"; .tooltip { position: relative;