From: Tomas Sedovic <[email protected]>
---
src/app/stylesheets/components.sass | 415 -----------------------------------
src/app/stylesheets/components.scss | 415 +++++++++++++++++++++++++++++++++++
src/app/stylesheets/dcloud.sass | 294 -------------------------
src/app/stylesheets/dcloud.scss | 293 ++++++++++++++++++++++++
src/app/stylesheets/layout.sass | 245 ---------------------
src/app/stylesheets/layout.scss | 245 +++++++++++++++++++++
src/app/stylesheets/screen.sass | 8 -
src/app/stylesheets/screen.scss | 8 +
8 files changed, 961 insertions(+), 962 deletions(-)
delete mode 100644 src/app/stylesheets/components.sass
create mode 100644 src/app/stylesheets/components.scss
delete mode 100644 src/app/stylesheets/dcloud.sass
create mode 100644 src/app/stylesheets/dcloud.scss
delete mode 100644 src/app/stylesheets/layout.sass
create mode 100644 src/app/stylesheets/layout.scss
delete mode 100644 src/app/stylesheets/screen.sass
create mode 100644 src/app/stylesheets/screen.scss
diff --git a/src/app/stylesheets/components.sass
b/src/app/stylesheets/components.sass
deleted file mode 100644
index f3e59cf..0000000
--- a/src/app/stylesheets/components.sass
+++ /dev/null
@@ -1,415 +0,0 @@
-/* header style
-
-.header_logo
- position: absolute
- top: 10px
- left: 10px
- color: #B5B5B5
- span
- text-transform: uppercase
- margin-left: 5px
- font-weight: bold
- letter-spacing: -0.02em
-
-ul.nav
- padding: 0
- padding-top: 1em
- margin: 0
- white-space: nowrap
- list-style-type: none
- li
- display: inline
- font-size: 120%
- padding: 3px 15px
- color: #b3b3b3
- a
- color: #313a3d
- text-shadow: 0 1px 1px #FFF
- &.selected
- background: #cbd6db !important
- border-radius: 16px
- -moz-border-radius: 16px
- -webkit-border-radius: 16px
- -moz-box-shadow: 0 1px 1px #efefef
- &:hover
- background: #dedede
- border-radius: 16px
- -moz-border-radius: 16px
- -webkit-border-radius: 16px
-
-.header_menu_wrapper
- padding: 0
- margin: 35px 0 0 0
- float: left
- height: 35px
- width: 230px
- background: #CCCCCC
-
-.header_menu
- padding: 5px 0 0 10px
- margin: 1px
- background: #cccccc url(/images/bg_navtoolbar.png) repeat-x top
- font-size: 110%
- line-height: 1.5
- height: 26px
- width: 216px
- border: #FFFFFF solid 1px
-
-.header_menu_greybox
- padding: 0
- margin: 35px 0 0 0
- float: left
- height: 35px
- width: 230px
- background: #CCCCCC
-
-#hi-username
- margin-right: 15px
- float: left
-
-/* dashboard style
-
-.dashboard_column
- float: left
- width: 50%
-
-.dashboard_section_summary
- background: #F2F2F2
- font-size: 0.8em
- font-weight: bolder
- margin: 10px 0
- padding: 5px 0px 5px 5px
- p
- display: inline
- float: left
- margin: 3px 0 3px 0
- img
- &:first-child
- padding-right: 5px
- vertical-align: middle
- float: right
-
-#getting_started_dashboard_section
- background: #F2F2F2
- width: 850px
- font-size: .9em
- padding: 10px
- margin: 10px 0px 10px 5px
- border: 1px solid black
- -moz-border-radius: 5px
- -webkit-border-radius: 5px
- p
- padding-bottom: 5px
- ul
- width: 100%
- height: 120px
- padding-left: 7px
- li
- display: inline
- float: left
- width: 205px
- padding: 0 7px 0 10px
- border-right: 1px solid black
- &:last-child
- border-right: none
- width: 150px
- img
- height: 91px
-
-#getting_started_links a
- float: right
-
-#actions_dashboard_section
- height: 100px
- border: 1px solid #DDD
- padding: 15px
- margin: 5px 15px 15px 0px
- -moz-border-radius: 5px
- -webkit-border-radius: 5px
- -moz-box-shadow: 0 1px 3px #ccc
- h2
- padding: 0
- margin: 0 0 15px
- letter-spacing: -0.02em
- color: #4b5d63
- a
- display: block
- float: left
- margin: 0px 15px 5px 0px
- color: #0075c0
- text-decoration: underline
-
-#service_quality_dashboard_section
- border: 1px solid #DDD
- padding: 15px
- margin: 0 15px 15px 0px
- -moz-border-radius: 5px
- -webkit-border-radius: 5px
- -moz-box-shadow: 0 1px 3px #ccc
- h2
- padding: 0
- margin: 0 0 15px
- letter-spacing: -0.02em
- color: #4b5d63
-
-.provider_service_quality_graph
- width: 100px
- height: 50px
- float: left
- margin: 0px 5px 0px 5px
-
-.provider_service_quality_graph_summary
- float: left
- width: 60px
- height: 15px
- padding: 20px 0 24px 0
-
-#key_indicators_dashboard_section
- height: 220px
- border: 1px solid #DDD
- padding: 15px
- margin: 0 15px 15px 0px
- -moz-border-radius: 5px
- -webkit-border-radius: 5px
- -moz-box-shadow: 0 1px 3px #ccc
- h2
- padding: 0
- margin: 0 0 15px
- letter-spacing: -0.02em
- color: #4b5d63
- ul
- float: left !important
- width: 195px
- margin: 0
- padding: 0
- list-style: none
- li
- width: 80%
- margin: 0
- padding-bottom: 10px
- .count
- float: right
- .instance_graph
- float: left
-
-#provider_instances_graph
- width: 250px
- float: left
-
-#quota_usage_dashboard_section
- border: 1px solid #DDD
- padding: 15px
- margin: 5px 15px 15px 0px
- -moz-border-radius: 5px
- -webkit-border-radius: 5px
- border-radius: 5px
- -moz-box-shadow: 0 1px 3px #ccc
- h2
- padding: 0
- margin: 0 0 15px
- letter-spacing: -0.02em
- color: #4b5d63
-
-.account_quota_usage_graph_summary
- padding: 15px 15px
- display: inline
- float: left
- width: 45%
-
-.account_quota_usage_graph_key
- float: right
- vertical-align: top
- font-size: 0.8em
- text-align: right
- width: 100%
- height: 20px
- padding: 0 15px 0 0
-
-.account_quota_usage_history_graph
- display: inline
- float: left
- margin-left: 10px
- border: 1px solid black
- width: 120px
- height: 20px
-
-.account_quota_usage_current_graph
- display: inline
- float: left
- margin: 0 0 10px 10px
- width: 140px
- height: 50px
-
-.pool_quota_usage_summary
- display: inline
- float: left
- padding-left: 15px
- width: 15%
-
-.pool_quota_usage_limit
- display: inline
- float: left
- width: 33%
- height: 25px
- border: 1px solid black
- margin-left: 17px
-
-.pool_quota_usage_instances
- display: inline
- float: left
- width: 33%
- height: 25px
- border: 1px solid black
- margin-left: 17px
- margin-bottom: 15px
-
-#image_descriptor_nav
- margin: 2px 0px 0 0px
- width: 98%
- h2
- height: 29px
- font-weight: normal
- padding: 10px 10px 0px 10px
- margin: 0px
- ul
- margin: 20px
- width: 100%
- li
- display: inline
- float: left
- width: 200px
- border: 1px solid #ccc
- border-top: none
- border-right: none
- padding-left: 10px
- clear: none
- font-size: 1em
- h4
- margin-top: 0px
- margin-bottom: 0.5em
- p
- margin-top: 0
- margin-bottom: 2em
- color: #808080
- &.selected p
- color: #000
-
-#image_descriptor_form
- border: none
- padding: 1em 0
- background: none
- width: 800px
- margin: 20px
- display: inline-block
- input
- width: auto
- ul li
- textarea, select, input[type=text]
- width: 302px
- float: left
- border-top: 1px solid #7f7f7f
- background: #fff
- border-bottom: 1px solid #7f7f7f
- border-left: 1px solid #000
- border-right: 1px solid #000
- -moz-border-radius: 4px
- .description
- float: left
- width: 300px
- font-size: 95%
- padding-left: 1em
- padding-bottom: 20px
- label
- color: #000
- font-size: 90%
- font-weight: bold
- &.plain
- font-weight: normal
- .pkglist
- float: left
- width: 380px
- height: 300px
- overflow: auto
- background-color: white
- border: 2px solid #ccc
- -moz-border-radius: 6px
- .submit
- padding-top: 20px
- .pkglist .action_link
- float: right
- width: 60px !important
- color: blue
- .closed_folder
- background-image: url(/images/dir_closed.png)
- background-repeat: no-repeat
- .opened_folder
- background-image: url(/images/dir_open.png)
- background-repeat: no-repeat
- .groupname
- cursor: pointer
- .hidden
- display: none
- .selection_list > li
- padding-bottom: 10px
- .group, .groupkgs
- padding-left: 20px
- .pkglist .ui-tabs
- padding: 0
- .ui-tabs-panel
- padding: 1em 0.5em
- .left-pkglist .ui-widget-header
- height: 26px
- padding: 10px
- .pkglist
- ul.ui-tabs-nav
- background-color: white
- width: 379px
- height: 44px
- .select_repository
- float: right
- padding: 5px 0px 5px 0px
- select
- width: 150px
- .selection_list
- padding: 10px
- .side_panel
- width: 150px
- float: left
- border: 1px solid #ccc
- margin: 5px
- padding: 10px
- min-height: 300px
- label
- float: none
- font-size: 1em
- padding: 5px
- li
- padding-bottom: 20px
- .main_panel
- width: 580px
- float: left
- border: 1px solid #ccc
- margin: 5px
- min-height: 300px
- padding: 10px
- .image_build_panel
- border-bottom: 1px solid #ccc
- padding: 10px
- input
- font-size: 1em
- .expand_target_list_button
- float: right
- display: none
- .target_list
- li
- border: 1px solid #ccc
- margin: 20px
- padding: 5px
- .status, .actions
- float: right
- width: 100px
- .empty
- text-align: center
- padding: 30px
-
-/* dcloud form redefines all input fields
diff --git a/src/app/stylesheets/components.scss
b/src/app/stylesheets/components.scss
new file mode 100644
index 0000000..c7bc8ff
--- /dev/null
+++ b/src/app/stylesheets/components.scss
@@ -0,0 +1,415 @@
+/* header style */
+
+.header_logo {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ color: #b5b5b5;
+ span {
+ text-transform: uppercase;
+ margin-left: 5px;
+ font-weight: bold;
+ letter-spacing: -0.02em; } }
+
+ul.nav {
+ padding: 0;
+ padding-top: 1em;
+ margin: 0;
+ white-space: nowrap;
+ list-style-type: none;
+ li {
+ display: inline;
+ font-size: 120%;
+ padding: 3px 15px;
+ color: #b3b3b3;
+ a {
+ color: #313a3d;
+ text-shadow: 0 1px 1px white; }
+ &.selected {
+ background: #cbd6db !important;
+ border-radius: 16px;
+ -moz-border-radius: 16px;
+ -webkit-border-radius: 16px;
+ -moz-box-shadow: 0 1px 1px #efefef; }
+ &:hover {
+ background: #dedede;
+ border-radius: 16px;
+ -moz-border-radius: 16px;
+ -webkit-border-radius: 16px; } } }
+
+.header_menu_wrapper {
+ padding: 0;
+ margin: 35px 0 0 0;
+ float: left;
+ height: 35px;
+ width: 230px;
+ background: #cccccc; }
+
+.header_menu {
+ padding: 5px 0 0 10px;
+ margin: 1px;
+ background: #cccccc url(/images/bg_navtoolbar.png) repeat-x top;
+ font-size: 110%;
+ line-height: 1.5;
+ height: 26px;
+ width: 216px;
+ border: white solid 1px; }
+
+.header_menu_greybox {
+ padding: 0;
+ margin: 35px 0 0 0;
+ float: left;
+ height: 35px;
+ width: 230px;
+ background: #cccccc; }
+
+#hi-username {
+ margin-right: 15px;
+ float: left; }
+
+/* dashboard style */
+
+.dashboard_column {
+ float: left;
+ width: 50%; }
+
+.dashboard_section_summary {
+ background: #f2f2f2;
+ font-size: 0.8em;
+ font-weight: bolder;
+ margin: 10px 0;
+ padding: 5px 0px 5px 5px;
+ p {
+ display: inline;
+ float: left;
+ margin: 3px 0 3px 0; }
+ img {
+ &:first-child {
+ padding-right: 5px; }
+ vertical-align: middle;
+ float: right; } }
+
+#getting_started_dashboard_section {
+ background: #f2f2f2;
+ width: 850px;
+ font-size: 0.9em;
+ padding: 10px;
+ margin: 10px 0px 10px 5px;
+ border: 1px solid black;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ p {
+ padding-bottom: 5px; }
+ ul {
+ width: 100%;
+ height: 120px;
+ padding-left: 7px;
+ li {
+ display: inline;
+ float: left;
+ width: 205px;
+ padding: 0 7px 0 10px;
+ border-right: 1px solid black;
+ &:last-child {
+ border-right: none;
+ width: 150px; } } }
+ img {
+ height: 91px; } }
+
+#getting_started_links a {
+ float: right; }
+
+#actions_dashboard_section {
+ height: 100px;
+ border: 1px solid #dddddd;
+ padding: 15px;
+ margin: 5px 15px 15px 0px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-box-shadow: 0 1px 3px #cccccc;
+ h2 {
+ padding: 0;
+ margin: 0 0 15px;
+ letter-spacing: -0.02em;
+ color: #4b5d63; }
+ a {
+ display: block;
+ float: left;
+ margin: 0px 15px 5px 0px;
+ color: #0075c0;
+ text-decoration: underline; } }
+
+#service_quality_dashboard_section {
+ border: 1px solid #dddddd;
+ padding: 15px;
+ margin: 0 15px 15px 0px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-box-shadow: 0 1px 3px #cccccc;
+ h2 {
+ padding: 0;
+ margin: 0 0 15px;
+ letter-spacing: -0.02em;
+ color: #4b5d63; } }
+
+.provider_service_quality_graph {
+ width: 100px;
+ height: 50px;
+ float: left;
+ margin: 0px 5px 0px 5px; }
+
+.provider_service_quality_graph_summary {
+ float: left;
+ width: 60px;
+ height: 15px;
+ padding: 20px 0 24px 0; }
+
+#key_indicators_dashboard_section {
+ height: 220px;
+ border: 1px solid #dddddd;
+ padding: 15px;
+ margin: 0 15px 15px 0px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-box-shadow: 0 1px 3px #cccccc;
+ h2 {
+ padding: 0;
+ margin: 0 0 15px;
+ letter-spacing: -0.02em;
+ color: #4b5d63; }
+ ul {
+ float: left !important;
+ width: 195px;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ li {
+ width: 80%;
+ margin: 0;
+ padding-bottom: 10px; } }
+ .count {
+ float: right; }
+ .instance_graph {
+ float: left; } }
+
+#provider_instances_graph {
+ width: 250px;
+ float: left; }
+
+#quota_usage_dashboard_section {
+ border: 1px solid #dddddd;
+ padding: 15px;
+ margin: 5px 15px 15px 0px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ -moz-box-shadow: 0 1px 3px #cccccc;
+ h2 {
+ padding: 0;
+ margin: 0 0 15px;
+ letter-spacing: -0.02em;
+ color: #4b5d63; } }
+
+.account_quota_usage_graph_summary {
+ padding: 15px 15px;
+ display: inline;
+ float: left;
+ width: 45%; }
+
+.account_quota_usage_graph_key {
+ float: right;
+ vertical-align: top;
+ font-size: 0.8em;
+ text-align: right;
+ width: 100%;
+ height: 20px;
+ padding: 0 15px 0 0; }
+
+.account_quota_usage_history_graph {
+ display: inline;
+ float: left;
+ margin-left: 10px;
+ border: 1px solid black;
+ width: 120px;
+ height: 20px; }
+
+.account_quota_usage_current_graph {
+ display: inline;
+ float: left;
+ margin: 0 0 10px 10px;
+ width: 140px;
+ height: 50px; }
+
+.pool_quota_usage_summary {
+ display: inline;
+ float: left;
+ padding-left: 15px;
+ width: 15%; }
+
+.pool_quota_usage_limit {
+ display: inline;
+ float: left;
+ width: 33%;
+ height: 25px;
+ border: 1px solid black;
+ margin-left: 17px; }
+
+.pool_quota_usage_instances {
+ display: inline;
+ float: left;
+ width: 33%;
+ height: 25px;
+ border: 1px solid black;
+ margin-left: 17px;
+ margin-bottom: 15px; }
+
+#image_descriptor_nav {
+ margin: 2px 0px 0 0px;
+ width: 98%;
+ h2 {
+ height: 29px;
+ font-weight: normal;
+ padding: 10px 10px 0px 10px;
+ margin: 0px; }
+ ul {
+ margin: 20px;
+ width: 100%;
+ li {
+ display: inline;
+ float: left;
+ width: 200px;
+ border: 1px solid #cccccc;
+ border-top: none;
+ border-right: none;
+ padding-left: 10px;
+ clear: none;
+ font-size: 1em;
+ h4 {
+ margin-top: 0px;
+ margin-bottom: 0.5em; }
+ p {
+ margin-top: 0;
+ margin-bottom: 2em;
+ color: gray; }
+ &.selected p {
+ color: black; } } } }
+
+#image_descriptor_form {
+ border: none;
+ padding: 1em 0;
+ background: none;
+ width: 800px;
+ margin: 20px;
+ display: inline-block;
+ input {
+ width: auto; }
+ ul li {
+ textarea, select, input[type=text] {
+ width: 302px;
+ float: left;
+ border-top: 1px solid #7f7f7f;
+ background: white;
+ border-bottom: 1px solid #7f7f7f;
+ border-left: 1px solid black;
+ border-right: 1px solid black;
+ -moz-border-radius: 4px; } }
+ .description {
+ float: left;
+ width: 300px;
+ font-size: 95%;
+ padding-left: 1em;
+ padding-bottom: 20px; }
+ label {
+ color: black;
+ font-size: 90%;
+ font-weight: bold;
+ &.plain {
+ font-weight: normal; } }
+ .pkglist {
+ float: left;
+ width: 380px;
+ height: 300px;
+ overflow: auto;
+ background-color: white;
+ border: 2px solid #cccccc;
+ -moz-border-radius: 6px; }
+ .submit {
+ padding-top: 20px; }
+ .pkglist .action_link {
+ float: right;
+ width: 60px !important;
+ color: blue; }
+ .closed_folder {
+ background-image: url(/images/dir_closed.png);
+ background-repeat: no-repeat; }
+ .opened_folder {
+ background-image: url(/images/dir_open.png);
+ background-repeat: no-repeat; }
+ .groupname {
+ cursor: pointer; }
+ .hidden {
+ display: none; }
+ .selection_list > li {
+ padding-bottom: 10px; }
+ .group, .groupkgs {
+ padding-left: 20px; }
+ .pkglist .ui-tabs {
+ padding: 0;
+ .ui-tabs-panel {
+ padding: 1em 0.5em; } }
+ .left-pkglist .ui-widget-header {
+ height: 26px;
+ padding: 10px; }
+ .pkglist {
+ ul.ui-tabs-nav {
+ background-color: white;
+ width: 379px;
+ height: 44px; }
+ .select_repository {
+ float: right;
+ padding: 5px 0px 5px 0px;
+ select {
+ width: 150px; } } }
+ .selection_list {
+ padding: 10px; }
+ .side_panel {
+ width: 150px;
+ float: left;
+ border: 1px solid #cccccc;
+ margin: 5px;
+ padding: 10px;
+ min-height: 300px;
+ label {
+ float: none;
+ font-size: 1em;
+ padding: 5px; }
+ li {
+ padding-bottom: 20px; } }
+ .main_panel {
+ width: 580px;
+ float: left;
+ border: 1px solid #cccccc;
+ margin: 5px;
+ min-height: 300px;
+ padding: 10px;
+ .image_build_panel {
+ border-bottom: 1px solid #cccccc;
+ padding: 10px;
+ input {
+ font-size: 1em; } } }
+ .expand_target_list_button {
+ float: right;
+ display: none; }
+ .target_list {
+ li {
+ border: 1px solid #cccccc;
+ margin: 20px;
+ padding: 5px;
+ .status, .actions {
+ float: right;
+ width: 100px; } }
+ .empty {
+ text-align: center;
+ padding: 30px; } } }
+
+/* dcloud form redefines all input fields */
diff --git a/src/app/stylesheets/dcloud.sass b/src/app/stylesheets/dcloud.sass
deleted file mode 100644
index 13a1778..0000000
--- a/src/app/stylesheets/dcloud.sass
+++ /dev/null
@@ -1,294 +0,0 @@
-form
- border: none
- margin: 0
- padding: 0
- display: inline-block
-
-fieldset
- border: 3px solid #efeff0
- border-right: none
- border-left: none
- border-bottom: none
- padding: 18px 0 10px 10px
-
-ul li input
- border: 2px solid #becfe4
- color: #333
- display: block
- float: left
- outline-color: -moz-use-text-color
- outline-style: none
- outline-width: medium
- padding: 3px
- width: 302px
-
-legend
- text-transform: uppercase
- color: #9a9a9a
- font-weight: bold
-
-input, select
- font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet
MS",helvetica,verdana,arial,sans-serif
- font-size: 1.4em
-
-.fieldWithErrors
- display: inline-block
- padding: 3px
- background: #fff7b2
- border: 3px solid #fff7b2
-
-.errorExplanation
- margin: 0 0 24px 0
- padding: 9px
- background: #fff7b2
- color: #867a5e
- -moz-border-radius: 3px
-
-#errorExplanation h2
- font-size: 14px
- font-weight: bold
- color: #867a5e
-
-.dcloud_form
- background: #e8e8e8
- border: solid 8px #f5f5f5
- -moz-border-radius: 10px
- -webkit-border-radius: 10px
- margin-top: 54px
- width: 550px
- margin-left: auto
- margin-right: auto
- padding: 36px
- h2
- font-size: 1.9em
- font-weight: normal
- color: #43728e
- margin: 0 0 24px 0
- padding: 0
- ul
- list-style-image: none
- list-style-position: outside
- list-style-type: none
- margin: 0
- padding: 0
- label
- display: block
- float: left
- padding: 3px 0 24px 0
- width: 175px
- font-size: 1.4em
- color: #616161
- span
- display: block
- float: left
- width: 160px
- font-size: .8em
- color: #9a9a9a
- li
- clear: both
- .txtfield
- border: 2px solid #becfe4
- color: #333
- display: block
- float: left
- outline-color: -moz-use-text-color
- outline-style: none
- outline-width: medium
- padding: 3px
- width: 318px
- .submit
- float: right
- display: inline
- clear: both
-
-/* Styles for table
-
-#main table
- width: 100%
- border-collapse: collapse
- th, td
- border: 1px solid #e1e2e3
- border-right: 0
- border-left: 0
- padding: 0
- text-align: left
- font-size: 14px
- line-height: 24px
- padding-left: 18px
- th
- background: none
- border-top: none
- a
- display: block
- text-decoration: none
- &:hover
- text-decoration: underline
-
-.actionlink
- color: #0075c0 !important
- line-height: 36px
- font-size: 14px
- padding-left: 18px
-
-ul#providers + a.actionlink
- display: block
-
-.submit_link
- background: none
- border: 0
- text-decoration: underline
- color: #0075c0
- line-height: 36px
- font-size: 14px
- padding-left: 10px
- &:hover
- cursor: pointer
-
-/* Styles for the left navigator
-
-#side
- padding: 0
- width: 229px
- a.actionlink
- color: #0075c0
- line-height: 36px
- font-size: 14px
- padding-left: 10px
-
-
-$provider_icon: "/images/icon_provider.png"
-$pool_icon: "/images/icon_vmpool.png"
-
-ul
- &#providers
- list-style-type: none
- margin: 0
- padding: 0 0 0 10px
- li a
- display: block
- line-height: 36px
- padding-left: 32px
- width: 224px
- &:hover
- background: #efefef url($provider_icon) no-repeat 2px 50%
- color: #000
- &#pools
- list-style-type: none
- line-height: 36px
- margin: 0
- padding: 0 0 0 10px
- li
- border-bottom: none
- a
- display: block
- line-height: 36px
- padding-left: 32px
- border-bottom: none
- &:hover
- background: #efefef url($pool_icon) no-repeat 2px 50%
- color: #000
-
-.providername, .poolname
- font-size: 14px
-
-.providername
- background: url($provider_icon) no-repeat 2px 50%
- &.selected
- background: #5599b8 url($provider_icon) no-repeat 2px 50%
- color: #FFF
-
-.poolname
- background: url($pool_icon) no-repeat 2px 50%
-
-.selected
- background: #f2a922
- color: #FFF
-
-.poolname.selected
- background: #5599b8 url($pool_icon) no-repeat 2px 50%
- color: #FFF
-
-.instance_action_list
- padding: 0
- li
- padding: 0 0.3em
- border-left: 1px solid #000
- display: inline
- &.first
- border-left: none
-
-#instances_table_wrapper
- min-height: 0
- margin-bottom: 1em
-
-/* Style for button links
-
-a.button_link
- border: 1px solid black
- text-decoration: none
- padding: 4px
- margin-bottom: 3px
- display: block
- background: #666666
- color: white
- -moz-border-radius: 5px
- -webkit-border-radius: 5px
-
-#dashboard-tabs, #provider-tabs, #pool-tabs
- border: none
-
-#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul
- float: none
-
-/* paginated data table
-.dtable
- position: relative
- width: 96%
- margin: 20px 2% 20px 2%
- .wrapped_table
- border: 1px solid #bbb
- table
- width: 100%
- .dtable_form
- width: 100%
- tbody tr:hover
- background-color: #eee
- table th
- text-align: left
- .ordercol
- background-position: left center
- background-repeat: no-repeat
- padding-left: 20px
- .asc
- background-image: url(/images/Sort_down_11.png)
- .desc
- background-image: url(/images/Sort_up_11.png)
- .header
- height: 25px
- background-color: #eee
- border-bottom: 1px solid #bbb
- .footer
- height: 24px
- background-color: #eee
- border-top: 1px solid #bbb
- line-height: 1.8
- padding-left: 10px
- .search_field
- font-size: 14px
- position: absolute
- top: 0px
- right: 1px
- .search_field input
- font-size: 14px
- .pagination
- float: right
- padding-right: 10px
- a
- color: blue
- .title
- font-size: 15px
- font-weight: bold
- padding-left: 10px
- .action_buttons
- padding-top: 10px
- padding-bottom: 10px
diff --git a/src/app/stylesheets/dcloud.scss b/src/app/stylesheets/dcloud.scss
new file mode 100644
index 0000000..ef4ff2f
--- /dev/null
+++ b/src/app/stylesheets/dcloud.scss
@@ -0,0 +1,293 @@
+form {
+ border: none;
+ margin: 0;
+ padding: 0;
+ display: inline-block; }
+
+fieldset {
+ border: 3px solid #efeff0;
+ border-right: none;
+ border-left: none;
+ border-bottom: none;
+ padding: 18px 0 10px 10px; }
+
+ul li input {
+ border: 2px solid #becfe4;
+ color: #333333;
+ display: block;
+ float: left;
+ outline-color: -moz-use-text-color;
+ outline-style: none;
+ outline-width: medium;
+ padding: 3px;
+ width: 302px; }
+
+legend {
+ text-transform: uppercase;
+ color: #9a9a9a;
+ font-weight: bold; }
+
+input, select {
+ font-family: "Lucida Grande", "Luxi Sans", "Bitstream Vera Sans", "Trebuchet
MS", helvetica, verdana, arial, sans-serif;
+ font-size: 1.4em; }
+
+.fieldWithErrors {
+ display: inline-block;
+ padding: 3px;
+ background: #fff7b2;
+ border: 3px solid #fff7b2; }
+
+.errorExplanation {
+ margin: 0 0 24px 0;
+ padding: 9px;
+ background: #fff7b2;
+ color: #867a5e;
+ -moz-border-radius: 3px; }
+
+#errorExplanation h2 {
+ font-size: 14px;
+ font-weight: bold;
+ color: #867a5e; }
+
+.dcloud_form {
+ background: #e8e8e8;
+ border: solid 8px #f5f5f5;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ margin-top: 54px;
+ width: 550px;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 36px;
+ h2 {
+ font-size: 1.9em;
+ font-weight: normal;
+ color: #43728e;
+ margin: 0 0 24px 0;
+ padding: 0; }
+ ul {
+ list-style-image: none;
+ list-style-position: outside;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ label {
+ display: block;
+ float: left;
+ padding: 3px 0 24px 0;
+ width: 175px;
+ font-size: 1.4em;
+ color: #616161;
+ span {
+ display: block;
+ float: left;
+ width: 160px;
+ font-size: 0.8em;
+ color: #9a9a9a; } }
+ li {
+ clear: both; } }
+ .txtfield {
+ border: 2px solid #becfe4;
+ color: #333333;
+ display: block;
+ float: left;
+ outline-color: -moz-use-text-color;
+ outline-style: none;
+ outline-width: medium;
+ padding: 3px;
+ width: 318px; }
+ .submit {
+ float: right;
+ display: inline;
+ clear: both; } }
+
+/* Styles for table */
+
+#main table {
+ width: 100%;
+ border-collapse: collapse;
+ th, td {
+ border: 1px solid #e1e2e3;
+ border-right: 0;
+ border-left: 0;
+ padding: 0;
+ text-align: left;
+ font-size: 14px;
+ line-height: 24px;
+ padding-left: 18px; }
+ th {
+ background: none;
+ border-top: none;
+ a {
+ display: block;
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline; } } } }
+
+.actionlink {
+ color: #0075c0 !important;
+ line-height: 36px;
+ font-size: 14px;
+ padding-left: 18px; }
+
+ul#providers + a.actionlink {
+ display: block; }
+
+.submit_link {
+ background: none;
+ border: 0;
+ text-decoration: underline;
+ color: #0075c0;
+ line-height: 36px;
+ font-size: 14px;
+ padding-left: 10px;
+ &:hover {
+ cursor: pointer; } }
+
+/* Styles for the left navigator */
+
+#side {
+ padding: 0;
+ width: 229px;
+ a.actionlink {
+ color: #0075c0;
+ line-height: 36px;
+ font-size: 14px;
+ padding-left: 10px; } }
+
+$provider_icon: "/images/icon_provider.png";
+$pool_icon: "/images/icon_vmpool.png";
+
+ul {
+ &#providers {
+ list-style-type: none;
+ margin: 0;
+ padding: 0 0 0 10px;
+ li a {
+ display: block;
+ line-height: 36px;
+ padding-left: 32px;
+ width: 224px;
+ &:hover {
+ background: #efefef url($provider_icon) no-repeat 2px 50%;
+ color: black; } } }
+ &#pools {
+ list-style-type: none;
+ line-height: 36px;
+ margin: 0;
+ padding: 0 0 0 10px;
+ li {
+ border-bottom: none;
+ a {
+ display: block;
+ line-height: 36px;
+ padding-left: 32px;
+ border-bottom: none;
+ &:hover {
+ background: #efefef url($pool_icon) no-repeat 2px 50%;
+ color: black; } } } } }
+
+.providername, .poolname {
+ font-size: 14px; }
+
+.providername {
+ background: url($provider_icon) no-repeat 2px 50%;
+ &.selected {
+ background: #5599b8 url($provider_icon) no-repeat 2px 50%;
+ color: white; } }
+
+.poolname {
+ background: url($pool_icon) no-repeat 2px 50%; }
+
+.selected {
+ background: #f2a922;
+ color: white; }
+
+.poolname.selected {
+ background: #5599b8 url($pool_icon) no-repeat 2px 50%;
+ color: white; }
+
+.instance_action_list {
+ padding: 0;
+ li {
+ padding: 0 0.3em;
+ border-left: 1px solid black;
+ display: inline;
+ &.first {
+ border-left: none; } } }
+
+#instances_table_wrapper {
+ min-height: 0;
+ margin-bottom: 1em; }
+
+/* Style for button links */
+
+a.button_link {
+ border: 1px solid black;
+ text-decoration: none;
+ padding: 4px;
+ margin-bottom: 3px;
+ display: block;
+ background: #666666;
+ color: white;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px; }
+
+#dashboard-tabs, #provider-tabs, #pool-tabs {
+ border: none; }
+
+#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul {
+ float: none; }
+
+/* paginated data table */
+.dtable {
+ position: relative;
+ width: 96%;
+ margin: 20px 2% 20px 2%;
+ .wrapped_table {
+ border: 1px solid #bbbbbb; }
+ table {
+ width: 100%; }
+ .dtable_form {
+ width: 100%; }
+ tbody tr:hover {
+ background-color: #eeeeee; }
+ table th {
+ text-align: left; }
+ .ordercol {
+ background-position: left center;
+ background-repeat: no-repeat;
+ padding-left: 20px; }
+ .asc {
+ background-image: url(/images/Sort_down_11.png); }
+ .desc {
+ background-image: url(/images/Sort_up_11.png); }
+ .header {
+ height: 25px;
+ background-color: #eeeeee;
+ border-bottom: 1px solid #bbbbbb; }
+ .footer {
+ height: 24px;
+ background-color: #eeeeee;
+ border-top: 1px solid #bbbbbb;
+ line-height: 1.8;
+ padding-left: 10px; }
+ .search_field {
+ font-size: 14px;
+ position: absolute;
+ top: 0px;
+ right: 1px; }
+ .search_field input {
+ font-size: 14px; }
+ .pagination {
+ float: right;
+ padding-right: 10px;
+ a {
+ color: blue; } }
+ .title {
+ font-size: 15px;
+ font-weight: bold;
+ padding-left: 10px; }
+ .action_buttons {
+ padding-top: 10px;
+ padding-bottom: 10px; } }
diff --git a/src/app/stylesheets/layout.sass b/src/app/stylesheets/layout.sass
deleted file mode 100644
index 129571e..0000000
--- a/src/app/stylesheets/layout.sass
+++ /dev/null
@@ -1,245 +0,0 @@
-...@charset "UTF-8"
-
-html
- font-size: small
- min-width: 900px
- min-height: 400px
-
-body
- font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet
MS",helvetica,verdana,arial,sans-serif
- padding: 0
- margin: 0
- width: 100%
- height: 100%
- background-color: #333333
- font-size: 90%
-
-img
- border-style: none
-
-a
- color: #000000
- text-decoration: none
-
-h2, h3
- font-weight: normal
-
-#header
- padding: 0
- margin: 0
- position: absolute
- top: 0px
- left: 0px
- width: 100%
- height: 90px
- overflow: hidden
- background: #535353 url(/images/bg_header.png) repeat-x top
-
-#content
- position: absolute
- top: 70px
- left: 0px
- right: 0px
- bottom: 0px
- overflow: hidden
- background-color: #FFFFFF
-
-#side
- padding: 5px 0 0 5px
- float: left
- margin: 0
- top: 70px
- left: 0px
- height: 100%
- overflow: auto
- width: 224px
- background-color: #FFFFFF
- border-right: 1px #CCCCCC solid
- h3
- color: #999999
- font-size: 1em
- margin: 1em 1em .5em 1em
- text-transform: uppercase
-
-#main
- padding: 0
- margin-left: 0
- top: 70px
- bottom: 0px
- overflow: auto
- background-color: #FFFFFF
- border-left: #CCCCCC solid 0px
-
-/* ----- Right side of Header --------
-
-.header_info
- padding: 10px 31px 0px 10px
- margin: 0
- float: right
- text-align: right
- font-size: 100%
- color: #B5B5B5
- a
- font-weight: bold
- &:link, &:active, &:visited, &:hover
- color: #000
- text-decoration: none
-
-#textfield_effect
- border-width: 1px
- border-style: solid
- border-color: #7A7A7A
- padding-left: 5px
- background: #4A4A4A
- font-size: 100%
- color: #FFFFFF
- width: 100px
- height: 16px
-
-/* ----- Blue Tabbed Navigation --------
-
-.ui-tabs-nav
- margin: 0
- padding: 0
- background: none
- list-style-type: none
- float: left
- font-size: 110%
- li
- margin: 0 1px 0 1px
- padding: 0
- float: left
- a
- float: left
- padding: 0 15px 0 15px
- color: #CCCCCC
- text-decoration: none
- line-height: 2.3
- height: 24px
- text-align: center
- background: none
- &:hover
- color: #FFFFFF
- border-bottom: 5px solid #537585
- &:focus, &:active
- outline-style: none
-
-.ui-tabs-selected a
- color: #FFFFFF
- outline-style: none
- height: 24px
- line-height: 1.6
- border-bottom: 5px solid #5599B8
-
-.ui-tabs-hide
- /*display:none;
-
-/* ----- PopUp Dialog --------
-
-.dialog_title
- background: #DEE7EB
- padding: 15px
- width: 600px
-
-.dialog_title_small
- background: #DEE7EB
- padding: 15px
- min-width: 500px
-
-.header
- font-size: 180%
- line-height: 1.6
-
-.dialog_body
- overflow: auto
- height: 350px
-
-.confirm_dialog_title
- width: 400px
- padding: 15px
- font-size: 110%
- background: url(/images/bg_warningMessage.png) top repeat-x
-
-.confirm_dialog_header
- background: url(/images/icon_warning.png) top left no-repeat
- padding: 0 0 0 45px
- min-height: 36px
-
-.confirm_dialog_footer
- height: 37px
- text-align: right
- padding: 5px 9px 0 0
-
-.button
- padding: 0 0 0 2px
- float: right
-
-.button_left_blue
- background: url(/images/button_left.png) no-repeat
- width: 6px
- height: 29px
- float: left
-
-.button_middle_blue
- background: url(/images/button_middle.png) repeat-x
- height: 29px
- float: left
- color: #FFFFFF
- line-height: 2.3
- font-size: 105%
- display: block
-
-.button_right_blue
- background: url(/images/button_right.png) no-repeat
- width: 6px
- height: 29px
- float: left
-
-.button_middle_blue a
- color: #FFFFFF
- text-decoration: none
- display: block
- padding: 0 10px 0 10px
- &:hover
- color: #E7EFF6
- text-decoration: none
- padding: 0 10px 0 10px
-
-.button_left_grey
- background: url(/images/button_left_grey.png) no-repeat
- width: 6px
- height: 29px
- float: left
-
-.button_middle_grey
- background: url(/images/button_middle_grey.png) repeat-x
- height: 29px
- float: left
- color: #FFFFFF
- line-height: 2.3
- font-size: 105%
- display: block
-
-.button_right_grey
- background: url(/images/button_right_grey.png) no-repeat
- width: 6px
- height: 29px
- float: left
-
-.button_middle_grey a
- color: #FFFFFF
- text-decoration: none
- display: block
- padding: 0 10px 0 10px
- &:hover
- color: #E7EFF6
- text-decoration: none
- padding: 0 10px 0 10px
-
-.fieldWithErrors
- background-color: #FFB2B2
- border: 3px solid #FFB2B2
-
-.errorExplanation
- color: #333333
- padding: 2px
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
new file mode 100644
index 0000000..2650fe6
--- /dev/null
+++ b/src/app/stylesheets/layout.scss
@@ -0,0 +1,245 @@
+...@charset "UTF-8";
+
+html {
+ font-size: small;
+ min-width: 900px;
+ min-height: 400px; }
+
+body {
+ font-family: "Lucida Grande", "Luxi Sans", "Bitstream Vera Sans", "Trebuchet
MS", helvetica, verdana, arial, sans-serif;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #333333;
+ font-size: 90%; }
+
+img {
+ border-style: none; }
+
+a {
+ color: black;
+ text-decoration: none; }
+
+h2, h3 {
+ font-weight: normal; }
+
+#header {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 90px;
+ overflow: hidden;
+ background: #535353 url(/images/bg_header.png) repeat-x top; }
+
+#content {
+ position: absolute;
+ top: 70px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ overflow: hidden;
+ background-color: white; }
+
+#side {
+ padding: 5px 0 0 5px;
+ float: left;
+ margin: 0;
+ top: 70px;
+ left: 0px;
+ height: 100%;
+ overflow: auto;
+ width: 224px;
+ background-color: white;
+ border-right: 1px #cccccc solid;
+ h3 {
+ color: #999999;
+ font-size: 1em;
+ margin: 1em 1em 0.5em 1em;
+ text-transform: uppercase; } }
+
+#main {
+ padding: 0;
+ margin-left: 0;
+ top: 70px;
+ bottom: 0px;
+ overflow: auto;
+ background-color: white;
+ border-left: #cccccc solid 0px; }
+
+/* ----- Right side of Header -------- */
+
+.header_info {
+ padding: 10px 31px 0px 10px;
+ margin: 0;
+ float: right;
+ text-align: right;
+ font-size: 100%;
+ color: #b5b5b5;
+ a {
+ font-weight: bold;
+ &:link, &:active, &:visited, &:hover {
+ color: black;
+ text-decoration: none; } } }
+
+#textfield_effect {
+ border-width: 1px;
+ border-style: solid;
+ border-color: #7a7a7a;
+ padding-left: 5px;
+ background: #4a4a4a;
+ font-size: 100%;
+ color: white;
+ width: 100px;
+ height: 16px; }
+
+/* ----- Blue Tabbed Navigation -------- */
+
+.ui-tabs-nav {
+ margin: 0;
+ padding: 0;
+ background: none;
+ list-style-type: none;
+ float: left;
+ font-size: 110%;
+ li {
+ margin: 0 1px 0 1px;
+ padding: 0;
+ float: left; }
+ a {
+ float: left;
+ padding: 0 15px 0 15px;
+ color: #cccccc;
+ text-decoration: none;
+ line-height: 2.3;
+ height: 24px;
+ text-align: center;
+ background: none;
+ &:hover {
+ color: white;
+ border-bottom: 5px solid #537585; }
+ &:focus, &:active {
+ outline-style: none; } } }
+
+.ui-tabs-selected a {
+ color: white;
+ outline-style: none;
+ height: 24px;
+ line-height: 1.6;
+ border-bottom: 5px solid #5599b8; }
+
+.ui-tabs-hide {
+ /*display:none; */ }
+
+/* ----- PopUp Dialog -------- */
+
+.dialog_title {
+ background: #dee7eb;
+ padding: 15px;
+ width: 600px; }
+
+.dialog_title_small {
+ background: #dee7eb;
+ padding: 15px;
+ min-width: 500px; }
+
+.header {
+ font-size: 180%;
+ line-height: 1.6; }
+
+.dialog_body {
+ overflow: auto;
+ height: 350px; }
+
+.confirm_dialog_title {
+ width: 400px;
+ padding: 15px;
+ font-size: 110%;
+ background: url(/images/bg_warningMessage.png) top repeat-x; }
+
+.confirm_dialog_header {
+ background: url(/images/icon_warning.png) top left no-repeat;
+ padding: 0 0 0 45px;
+ min-height: 36px; }
+
+.confirm_dialog_footer {
+ height: 37px;
+ text-align: right;
+ padding: 5px 9px 0 0; }
+
+.button {
+ padding: 0 0 0 2px;
+ float: right; }
+
+.button_left_blue {
+ background: url(/images/button_left.png) no-repeat;
+ width: 6px;
+ height: 29px;
+ float: left; }
+
+.button_middle_blue {
+ background: url(/images/button_middle.png) repeat-x;
+ height: 29px;
+ float: left;
+ color: white;
+ line-height: 2.3;
+ font-size: 105%;
+ display: block; }
+
+.button_right_blue {
+ background: url(/images/button_right.png) no-repeat;
+ width: 6px;
+ height: 29px;
+ float: left; }
+
+.button_middle_blue a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ padding: 0 10px 0 10px;
+ &:hover {
+ color: #e7eff6;
+ text-decoration: none;
+ padding: 0 10px 0 10px; } }
+
+.button_left_grey {
+ background: url(/images/button_left_grey.png) no-repeat;
+ width: 6px;
+ height: 29px;
+ float: left; }
+
+.button_middle_grey {
+ background: url(/images/button_middle_grey.png) repeat-x;
+ height: 29px;
+ float: left;
+ color: white;
+ line-height: 2.3;
+ font-size: 105%;
+ display: block; }
+
+.button_right_grey {
+ background: url(/images/button_right_grey.png) no-repeat;
+ width: 6px;
+ height: 29px;
+ float: left; }
+
+.button_middle_grey a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ padding: 0 10px 0 10px;
+ &:hover {
+ color: #e7eff6;
+ text-decoration: none;
+ padding: 0 10px 0 10px; } }
+
+.fieldWithErrors {
+ background-color: #ffb2b2;
+ border: 3px solid #ffb2b2; }
+
+.errorExplanation {
+ color: #333333;
+ padding: 2px; }
diff --git a/src/app/stylesheets/screen.sass b/src/app/stylesheets/screen.sass
deleted file mode 100644
index af6e229..0000000
--- a/src/app/stylesheets/screen.sass
+++ /dev/null
@@ -1,8 +0,0 @@
-/* This is a placeholder for the Compass/Blueprint stuff. It shows how it's
- * supposed to work. Uncomment the last lines to enable the Compass Reset
- * plugin and the Blueprint Typography.
-
-// @import compass/reset
-// @import blueprint
-
-// +blueprint-typography
diff --git a/src/app/stylesheets/screen.scss b/src/app/stylesheets/screen.scss
new file mode 100644
index 0000000..be2e0cb
--- /dev/null
+++ b/src/app/stylesheets/screen.scss
@@ -0,0 +1,8 @@
+/* This is a placeholder for the Compass/Blueprint stuff. It shows how it's
+ * supposed to work. Uncomment the last lines to enable the Compass Reset
+ * plugin and the Blueprint Typography. */
+
+// @import compass/reset
+// @import blueprint
+
+// +blueprint-typography
--
1.7.2.1
_______________________________________________
deltacloud-devel mailing list
[email protected]
https://fedorahosted.org/mailman/listinfo/deltacloud-devel
