From c1db80c4fbf0e4cc9ff9c7cda6c528f31aa6949b Mon Sep 17 00:00:00 2001 From: Honey Silvas Date: Sat, 2 Jan 2016 10:50:56 -0500 Subject: [PATCH] Added new classes. Added new classes. --- asset/module/css/blastpad_ui.css | 177 +++++++++++++++++++++++++-- asset/module/css/blastpad_ui.min.css | 2 +- asset/module/css/container/extra.css | 56 +++++++++ asset/module/css/form/default.css | 8 +- asset/module/css/form/extra.css | 68 +++++++++- asset/module/css/general/extra.css | 19 ++- asset/module/css/grid/extra.css | 11 +- asset/module/css/menu/extra.css | 15 +++ asset/motif/css/palette/muted.css | 13 ++ 9 files changed, 350 insertions(+), 19 deletions(-) diff --git a/asset/module/css/blastpad_ui.css b/asset/module/css/blastpad_ui.css index 6702249..d41e315 100644 --- a/asset/module/css/blastpad_ui.css +++ b/asset/module/css/blastpad_ui.css @@ -114,15 +114,32 @@ footer { width: 100%; } +.bp_resizable { + overflow: auto; + resize: both; +} + .bp_footer { margin: auto; width: 100%; } +/* Position */ + +.bp_relative{ + position: relative; +} + +/* Visibility */ + .bp_hidden { visibility: hidden; } +.bp_visible { + visibility: visible; +} + /* Space */ .bp_small_break { @@ -137,7 +154,7 @@ footer { height: 5em; } -/* */ +/* Rounded corner */ .bp_rounded_corner { border-radius: 5px; @@ -178,6 +195,13 @@ section { overflow: auto; } +/* Position */ + +.bp_top_right { + position: absolute; + right: 1.5em; +} + /* Container Size */ /* Full */ @@ -194,7 +218,7 @@ section { } .bp_full_height { - height: auto; + height: 100%; min-height: 100%; } @@ -402,7 +426,7 @@ section { /* Mobile */ @media screen and (max-width: 800px) { .bp_column_1, .bp_column_2, .bp_column_3, .bp_column_4, .bp_column_5, .bp_column_6, - .bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12, { + .bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12 { float: none; margin-right: 0; width: auto; @@ -551,7 +575,7 @@ h6 { font-size: 1em;} .bp_fuchsia { background-color: #f012be;} .bp_silver { background-color: #dddddd;} /* Form default */ -input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea { +input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea, select { border: 0.1em solid #efefef; font-size: 1em; margin: 0.5em 0 0 0; @@ -560,13 +584,11 @@ input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea } label { + font-size: 1em; + font-weight: bold; padding: 0.5em; } -textarea { - height: 15em; -} - /* Button */ button, input[ type="submit" ], input[ type="button" ] { @@ -591,6 +613,31 @@ button, input[ type="submit" ], input[ type="button" ] { width: 95%; } +/* x Close button */ + +.bp_close_small:after { + content: "\00D7"; + font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode"; +} + +.bp_close:after { + content: "\2715"; /* Multiplication symbol */ + font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode"; + position: absolute; + right: 0.5em; + top: 0.5em; + text-decoration: none; +} + +.bp_close_bold:after { + content: "\2716"; /* Heavy multiplication symbol */ + font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode"; + position: absolute; + right: 0.5em; + top: 0.5em; + text-decoration: none; +} + /* Button */ .bp_call_to_action { @@ -604,11 +651,16 @@ button, input[ type="submit" ], input[ type="button" ] { border: 0.1em solid #efefef; border-radius: 0; -moz-border-radius: 0; - font-size: 0.9em; padding-top: 0.5em; padding-bottom: 0.5em; } +.bp_tab { + border: 0.1em solid #efefef; + border-radius: 0; + -moz-border-radius: 0; +} + .bp_cancel { background-color: #f0f0f0; } @@ -617,6 +669,42 @@ button, input[ type="submit" ], input[ type="button" ] { background-color: #f0f0f0; } +.bp_gradient_button { + background-color: #f7f5f6; + background-image: -webkit-gradient( linear, left top, left bottom, from( #f7f5f6 ), to( #dddddd )); + background-image: -webkit-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: -moz-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: -ms-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: -o-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: linear-gradient( to bottom, #f7f5f6, #dddddd ); + filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#f7f5f6, endcolorstr=#dddddd ); + border: 0.1em solid #cccccc; + -webkit-box-shadow: #feffff 0 0.1em 0.1em; + -moz-box-shadow: #feffff 0 0.1em 0.1em; + box-shadow: #feffff 0 0.1em 0.1em; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; + color: #4a4a4a; + display: inline-block; + font-weight: bold; + padding: 1em; + text-decoration: none; + text-shadow: 0 0.1em 0 rgba( 255, 255, 255, 1 ); +} + +.bp_gradient_button:hover { + background-color: #e0e0e0; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#bdbbbc)); + background-image: -webkit-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: -moz-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: -ms-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: -o-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: linear-gradient( to bottom, #e0e0e0, #bdbbbc ); + filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#e0e0e0, endcolorstr=#bdbbbc ); + border: 0.1em solid #adadad; +} + .bp_menu_top { float: right; } @@ -685,6 +773,21 @@ button, input[ type="submit" ], input[ type="button" ] { position: fixed; } +/* Bottom bar */ + +.bp_bottom_bar_wrapper { + min-height: 100%; + position: relative; +} + +.bp_bottom_bar { + background-color: #f9f9f9; + bottom: 0; + display: block; + padding: 0.5em; + position: fixed; + width: 100%; +} /* Table rows. */ .bp_table_striped > tbody > tr:nth-child(odd) > td, .bp_table_striped > tbody > tr:nth-child(odd) > th { @@ -763,6 +866,62 @@ button, input[ type="submit" ], input[ type="button" ] { right: 0; padding: 10px; opacity: .50; +} + +/* Panes. */ + +.bp_pane { + background-color: #f9f9f9; + overflow: auto; + position: relative; + resize: both; +} + +.bp_main_pane { + overflow: hidden; +} + +.bp_left_pane { + height: 93%; + padding-bottom: 5em; + width: 30%; +} + +.bp_right_pane { + height: 93%; + padding: 0.3em; + width: 30%; +} + +.bp_top_pane { + top: 3em; + height: 30%; + margin: 0.1em; + position: fixed; + resize: both; + width: 100%; +} + +.bp_top_pane_wrapper, .bp_bottom_pane_wrapper { + min-height: 100%; + position: relative; + width: 100%; +} + +.bp_bottom_pane { + bottom: 0; + height: 30%; + margin: 0.1em; + position: fixed; + width: 100%; +} + +/* Toolbar */ + +.bp_toolbar { + background-color: #f9f9f9; + display: block; + padding: 0.3em; }/* Media extra */ .bp_cover { diff --git a/asset/module/css/blastpad_ui.min.css b/asset/module/css/blastpad_ui.min.css index 825854d..f343d22 100644 --- a/asset/module/css/blastpad_ui.min.css +++ b/asset/module/css/blastpad_ui.min.css @@ -1 +1 @@ -/* Reset */html {box-sizing: border-box;-moz-osx-font-smoothing: grayscale;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;}*, *:before, *:after {box-sizing: inherit;}body {font-size: 16px;margin: 0; }h1,h2,h3,h4,h5,h6,p,blockquote,figure,ol,ul {margin: 0;padding: 0;}h1,h2,h3,h4,h5,h6, {font-size: inherit;}a {transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;}img {border: 0;height: auto;max-width: 100%;}/* Defines the new HTML5 elements for older browsers. */article, aside, figure, footer, header, hgroup, main, menu, nav, section { display: block; }/* General default */main {clear: both;margin: auto;max-width: 100%;}hr {border: 0;background: #efefef;height: 0.1em;}code {background-color: #fefefe;border: 0.1em solid #efefef;overflow: auto;padding: 0.1em;white-space: pre;}p {line-height: 2em;}a:link, a:visited, a:active {text-decoration: none;}/* Footer */footer {width: 100%;}/* General extra */.bp_message {background-color: #ffffc8;border: 0.1em solid #ffff84;margin: auto;text-align: center;}.bp_brand {font-size: 3em;}.bp_logo {font-size: 2em;}.bp_snippet {background-color: #fcfcfc;display: block;font-size: 1em;margin: 1em;padding: 0.5em;width: 100%;}.bp_footer {margin: auto;width: 100%;}.bp_hidden {visibility: hidden;}/* Space */.bp_small_break {height: 1em;}.bp_medium_break {height: 2em;}.bp_large_break {height: 5em;}/* */.bp_rounded_corner {border-radius: 5px;}/* Grid default */html {height: 100%;}body {height: 100%;width: 100%;}main {height: 100%;width: 100%;}section {/*height: 100%;*/width: 100%;/*padding: 1em;*/}.bp_container {height: 90%;max-width: 100%;margin: auto;position: relative;width: 100%;}/* Grid extra *//* Layout extra */.bp_clear {clear: both;overflow: auto;}/* Container Size *//* Full */.bp_full {height: auto;min-height: 100%;max-width: 100%;width: 100%;}.bp_full_width {max-width: 100%;width: 100%;}.bp_full_height {height: auto;min-height: 100%;}/* Panes. */.bp_left_pane {float: left; width: 20%; }.bp_main_pane {}.bp_right_pane {float: right;width: 20%;}/* Fluid width */.bp_fluid {max-width: 100%;}.bp_extra_extra_wide {max-width: 100%;width: 1920px;}.bp_extra_wide {max-width: 1260px;}.bp_wide {max-width: 1080px;}.bp_narrow {max-width: 720px;}.bp_extra_narrow {max-width: 640px;}.bp_extra_extra_narrow {max-width: 320px;}/* Spacing. */.bp_extra_extra_tight {padding: 0;}.bp_extra_tight {padding: 0.25em;}.bp_tight {padding: 0.5em;}.bp_loose {padding: 1em;}.bp_extra_loose {padding: 1.5em;}.bp_extra_extra_loose {padding: 2em;}/* Alignment. */.bp_center {margin: auto;}.bp_left {float: left;width: 50%;}.bp_right {float: left;width: 50%;}/*.bp_middle {height: 50%;left: 50%;max-width: 100%;margin: auto;min-width: 320px;position: absolute;top: 50%;transform: translateY(-50%);width: 50%;}*/.bp_middle {position: relative;top: 50%;transform: translateY(-50%);}/* Border. */.bp_border {border: 0.1em solid #efefef;margin: 0.5em;padding: 0.5em;}.bp_tight_border {border: 0.1em solid #efefef;}/* Scrollbar. */.bp_not_scrollable {position: absolute;top: 0;bottom: 0;z-index: -1;overflow: hidden;}.bp_scrollable {position: absolute;overflow-y: scroll;top: 0;height: 100%;padding-top: 10px;}/* Rows. */.bp_row {}/* Columns. */.bp_column_1 {float: left;width: 100%;}.bp_column_2 {float: left;width: 50%;}.bp_column_3 {float: left;width: 33%;}.bp_column_4 {float: left;width: 25%;}.bp_column_5 {float: left;width: 20%;}.bp_column_6 {float: left;width: 16%;}.bp_column_7 {float: left;width: 14%;}.bp_column_8 {float: left;width: 12%;}.bp_column_9 {float: left;width: 11%;}.bp_column_10 {float: left;width: 10%;}.bp_column_11 {float: left;width: 9%;}.bp_column_12 {float: left;width: 8%;}/* Mobile */@media screen and (max-width: 800px) {.bp_column_1, .bp_column_2, .bp_column_3, .bp_column_4, .bp_column_5, .bp_column_6,.bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12, {float: none;margin-right: 0;width: auto;}}a {color: inherit;}body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}/* Headings */h1 {font-size: 2em;}h2 {font-size: 1.8em;}h3 {font-size: 1.6em;}h4 {font-size: 1.4em;}h5 {font-size: 1.2em;}h6 {font-size: 1em;}/* Font size. */.bp_extra_extra_small_text {font-size: 0.7em;}.bp_extra_small_text {font-size: 0.8em;}.bp_small_text {font-size: 0.9em;line-height: 0.9em;}.bp_medium_text {font-size: 1em;}.bp_large_text {font-size: 2em;}.bp_extra_large_text {font-size: 3em;}.bp_extra_extra_large_text {font-size: 4em;}/* Flashcard */.bp_flashcard {display: inline-block; height: 60%;font-size: 50em;position: absolute;text-align: center;transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);top: 50%;left: 50%;white-space: nowrap;width: 100%;}/* Font style. */.bp_normal { font-style: normal;}.bp_italic {font-style: italic;}.bp_oblique {font-style: oblique;}.bp_underline {text-decoration: underline;}.bp_bold {font-weight: bold;}/* Justify. */.bp_left_justify {text-align: left;}.bp_right_justify {text-align: right;}.bp_center_justify{text-align: center;}/**/.bp_brand {}/* Colors default *//* Colors extra *//* Text color. */.bp_light_text {color: #ffffff;}.bp_neutral_text {opacity: 0.5;}.bp_dark_text {color: #000000;}/* Colors */.bp_transparent{ background-color: transparent;}.bp_white { background-color: #ffffff;}.bp_magenta { background-color: #ff0097;}.bp_red { background-color: #ff4136;}.bp_orange { background-color: #ff851b;}.bp_yellow { background-color: #ffdc00;}.bp_olive { background-color: #3d9970;}.bp_green { background-color: #2ecc40;}.bp_teal { background-color: #39cccc;}.bp_blue { background-color: #0074d9;}.bp_violet { background-color: #ee82ee;}.bp_purple { background-color: #b10dc9;}.bp_pink { background-color: #ffb6c1;}.bp_brown { background-color: #a05000;}.bp_gray, .bp_grey { background-color: #aaaaaa;}.bp_black { background-color: #000000;}.bp_navy { background-color: #001f3f;}.bp_aqua { background-color: #7fdbff;}.bp_lime { background-color: #01ff70;}.bp_maroon { background-color: #85144b;}.bp_fuchsia { background-color: #f012be;}.bp_silver { background-color: #dddddd;}/* Form default */input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea {border: 0.1em solid #efefef;font-size: 1em;margin: 0.5em 0 0 0;padding: 0.8em;width: 100%;}label {padding: 0.5em;}textarea {height: 15em;}/* Button */button, input[ type="submit" ], input[ type="button" ] {background-color: #ffffff;border: 0.1em solid #666666;color: #666666;font-size: 1em;font-weight: bold;margin: auto;padding: 0.8em 1em 0.8em 1em;}/* Form extra */.bp_form {padding: 0.5em;}/* Text area */.bp_editor {border: 0.1em solid #cccccc;font-family: "Courier New", Courier, monospace;font-size: 1em;height: 90%;width: 95%;}/* Button */.bp_call_to_action {background-color: #f9cc46;border: none;color: #ffffff;font-size: 1.1em;}.bp_pill {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;font-size: 0.9em;padding-top: 0.5em;padding-bottom: 0.5em;}.bp_cancel {background-color: #f0f0f0;}.bp_disabled {background-color: #f0f0f0;}.bp_menu_top {float: right;}.bp_nav {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);float: left;font-size: 0.9em;font-weight: bold;width: 100%;}.bp_menu_toolbar {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);bottom: 0;padding: 0.25em;width: 100%;}.bp_bar_container {background-color: #ffffff;margin: auto;width: 100%;z-index: 1;}.bp_bar_container a {text-decoration: none;}.bp_bar {margin: auto;width: 100%;}.bp_logo {float: left;}.bp_menu {text-align: right;}.bp_menu ul {list-style: none;}.bp_menu li{display: inline;font-size: 0.9em;margin: 0.5em;}/* Sticky */.bp_sticky_top { position: fixed;}.bp_sticky_bottom {bottom: 0;position: fixed;}/* Table rows. */.bp_table_striped > tbody > tr:nth-child(odd) > td, .bp_table_striped > tbody > tr:nth-child(odd) > th {background-color: #ffffff; } .bp_table_striped > tbody > tr:nth-child(even)> td, .bp_table_striped > tbody > tr:nth-child(even)> th {background-color: #D3EE9F; }/* Container default *//* Container extra *//* Box */.bp_panel {border: 0.1em solid #77eeff;}.bp_panel > h1, .bp_panel > h2, .bp_panel > h3,.bp_panel > h4, .bp_panel > h5, .bp_panel > h6 {background-color: #77eeff;} .bp_translucent_box {background-color: rgba( 220, 220, 220, 0.1 );border: solid #efefef 0.1em;margin: 0.1em;padding: 0.5em;padding-top: 1em;padding-bottom: 1em;}/* Shape */.bp_square {height: 10em;padding: 10em;width: 10em;}.bp_small_square {height: 10em;width: 10em;}.bp_medium_square {height: 25em;width: 25em;}.bp_large_square {height: 50em;width: 50em;}.bp_rectangle {height: 200px;/*padding-bottom: 50%;*/width: 50%;}/* Modal */.bp_modal {background-color: #ffffff;display: none;padding: 1em;}/* Sticky bottom button. */.bp_credit a {background-color: #000000;color: #ffffff;font-size: 0.8em;position: absolute;bottom: 0;right: 0;padding: 10px;opacity: .50;}/* Media extra */.bp_cover {background-size: cover;height: 100%;}/* Image */img.full_screen {height: 100%;position: absolute;text-align: middle;width: 100%;}img.bp_circle {border-radius: 50%;}img.bp_small {height: 10em;width: 10em;}img.bp_medium {height: 20em;width: 20em;}img.bp_large {height: 50em;width: 50em;}/* Video */.bp_video {height: 100%;left: 0;width: 100%;}/* Rounded corners */input, textarea, button, code, form, .bp_message, .bp_border, .bp_tight_border, .bp_content, .bp_panel {border-radius: 0.5em;-moz-border-radius: 0.5em;-webkit-border-radius: 0.5em;} \ No newline at end of file +/* Reset */html {box-sizing: border-box;-moz-osx-font-smoothing: grayscale;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;}*, *:before, *:after {box-sizing: inherit;}body {font-size: 16px;margin: 0; }h1,h2,h3,h4,h5,h6,p,blockquote,figure,ol,ul {margin: 0;padding: 0;}h1,h2,h3,h4,h5,h6, {font-size: inherit;}a {transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;}img {border: 0;height: auto;max-width: 100%;}/* Defines the new HTML5 elements for older browsers. */article, aside, figure, footer, header, hgroup, main, menu, nav, section { display: block; }/* General default */main {clear: both;margin: auto;max-width: 100%;}hr {border: 0;background: #efefef;height: 0.1em;}code {background-color: #fefefe;border: 0.1em solid #efefef;overflow: auto;padding: 0.1em;white-space: pre;}p {line-height: 2em;}a:link, a:visited, a:active {text-decoration: none;}/* Footer */footer {width: 100%;}/* General extra */.bp_message {background-color: #ffffc8;border: 0.1em solid #ffff84;margin: auto;text-align: center;}.bp_brand {font-size: 3em;}.bp_logo {font-size: 2em;}.bp_snippet {background-color: #fcfcfc;display: block;font-size: 1em;margin: 1em;padding: 0.5em;width: 100%;}.bp_resizable {overflow: auto;resize: both;}.bp_footer {margin: auto;width: 100%;}/* Position */.bp_relative{position: relative;}/* Visibility */.bp_hidden {visibility: hidden;}.bp_visible {visibility: visible;}/* Space */.bp_small_break {height: 1em;}.bp_medium_break {height: 2em;}.bp_large_break {height: 5em;}/* Rounded corner */.bp_rounded_corner {border-radius: 5px;}/* Grid default */html {height: 100%;}body {height: 100%;width: 100%;}main {height: 100%;width: 100%;}section {/*height: 100%;*/width: 100%;/*padding: 1em;*/}.bp_container {height: 90%;max-width: 100%;margin: auto;position: relative;width: 100%;}/* Grid extra *//* Layout extra */.bp_clear {clear: both;overflow: auto;}/* Position */.bp_top_right {position: absolute;right: 1.5em;}/* Container Size *//* Full */.bp_full {height: auto;min-height: 100%;max-width: 100%;width: 100%;}.bp_full_width {max-width: 100%;width: 100%;}.bp_full_height {height: 100%;min-height: 100%;}/* Panes. */.bp_left_pane {float: left; width: 20%; }.bp_main_pane {}.bp_right_pane {float: right;width: 20%;}/* Fluid width */.bp_fluid {max-width: 100%;}.bp_extra_extra_wide {max-width: 100%;width: 1920px;}.bp_extra_wide {max-width: 1260px;}.bp_wide {max-width: 1080px;}.bp_narrow {max-width: 720px;}.bp_extra_narrow {max-width: 640px;}.bp_extra_extra_narrow {max-width: 320px;}/* Spacing. */.bp_extra_extra_tight {padding: 0;}.bp_extra_tight {padding: 0.25em;}.bp_tight {padding: 0.5em;}.bp_loose {padding: 1em;}.bp_extra_loose {padding: 1.5em;}.bp_extra_extra_loose {padding: 2em;}/* Alignment. */.bp_center {margin: auto;}.bp_left {float: left;width: 50%;}.bp_right {float: left;width: 50%;}/*.bp_middle {height: 50%;left: 50%;max-width: 100%;margin: auto;min-width: 320px;position: absolute;top: 50%;transform: translateY(-50%);width: 50%;}*/.bp_middle {position: relative;top: 50%;transform: translateY(-50%);}/* Border. */.bp_border {border: 0.1em solid #efefef;margin: 0.5em;padding: 0.5em;}.bp_tight_border {border: 0.1em solid #efefef;}/* Scrollbar. */.bp_not_scrollable {position: absolute;top: 0;bottom: 0;z-index: -1;overflow: hidden;}.bp_scrollable {position: absolute;overflow-y: scroll;top: 0;height: 100%;padding-top: 10px;}/* Rows. */.bp_row {}/* Columns. */.bp_column_1 {float: left;width: 100%;}.bp_column_2 {float: left;width: 50%;}.bp_column_3 {float: left;width: 33%;}.bp_column_4 {float: left;width: 25%;}.bp_column_5 {float: left;width: 20%;}.bp_column_6 {float: left;width: 16%;}.bp_column_7 {float: left;width: 14%;}.bp_column_8 {float: left;width: 12%;}.bp_column_9 {float: left;width: 11%;}.bp_column_10 {float: left;width: 10%;}.bp_column_11 {float: left;width: 9%;}.bp_column_12 {float: left;width: 8%;}/* Mobile */@media screen and (max-width: 800px) {.bp_column_1, .bp_column_2, .bp_column_3, .bp_column_4, .bp_column_5, .bp_column_6,.bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12 {float: none;margin-right: 0;width: auto;}}a {color: inherit;}body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}/* Headings */h1 {font-size: 2em;}h2 {font-size: 1.8em;}h3 {font-size: 1.6em;}h4 {font-size: 1.4em;}h5 {font-size: 1.2em;}h6 {font-size: 1em;}/* Font size. */.bp_extra_extra_small_text {font-size: 0.7em;}.bp_extra_small_text {font-size: 0.8em;}.bp_small_text {font-size: 0.9em;line-height: 0.9em;}.bp_medium_text {font-size: 1em;}.bp_large_text {font-size: 2em;}.bp_extra_large_text {font-size: 3em;}.bp_extra_extra_large_text {font-size: 4em;}/* Flashcard */.bp_flashcard {display: inline-block; height: 60%;font-size: 50em;position: absolute;text-align: center;transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);top: 50%;left: 50%;white-space: nowrap;width: 100%;}/* Font style. */.bp_normal { font-style: normal;}.bp_italic {font-style: italic;}.bp_oblique {font-style: oblique;}.bp_underline {text-decoration: underline;}.bp_bold {font-weight: bold;}/* Justify. */.bp_left_justify {text-align: left;}.bp_right_justify {text-align: right;}.bp_center_justify{text-align: center;}/**/.bp_brand {}/* Colors default *//* Colors extra *//* Text color. */.bp_light_text {color: #ffffff;}.bp_neutral_text {opacity: 0.5;}.bp_dark_text {color: #000000;}/* Colors */.bp_transparent{ background-color: transparent;}.bp_white { background-color: #ffffff;}.bp_magenta { background-color: #ff0097;}.bp_red { background-color: #ff4136;}.bp_orange { background-color: #ff851b;}.bp_yellow { background-color: #ffdc00;}.bp_olive { background-color: #3d9970;}.bp_green { background-color: #2ecc40;}.bp_teal { background-color: #39cccc;}.bp_blue { background-color: #0074d9;}.bp_violet { background-color: #ee82ee;}.bp_purple { background-color: #b10dc9;}.bp_pink { background-color: #ffb6c1;}.bp_brown { background-color: #a05000;}.bp_gray, .bp_grey { background-color: #aaaaaa;}.bp_black { background-color: #000000;}.bp_navy { background-color: #001f3f;}.bp_aqua { background-color: #7fdbff;}.bp_lime { background-color: #01ff70;}.bp_maroon { background-color: #85144b;}.bp_fuchsia { background-color: #f012be;}.bp_silver { background-color: #dddddd;}/* Form default */input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea, select {border: 0.1em solid #efefef;font-size: 1em;margin: 0.5em 0 0 0;padding: 0.8em;width: 100%;}label {font-size: 1em;font-weight: bold;padding: 0.5em;}/* Button */button, input[ type="submit" ], input[ type="button" ] {background-color: #ffffff;border: 0.1em solid #666666;color: #666666;font-size: 1em;font-weight: bold;margin: auto;padding: 0.8em 1em 0.8em 1em;}/* Form extra */.bp_form {padding: 0.5em;}/* Text area */.bp_editor {border: 0.1em solid #cccccc;font-family: "Courier New", Courier, monospace;font-size: 1em;height: 90%;width: 95%;}/* x Close button */.bp_close_small:after {content: "\00D7";font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";}.bp_close:after {content: "\2715";/* Multiplication symbol */font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";position: absolute;right: 0.5em;top: 0.5em;text-decoration: none;}.bp_close_bold:after {content: "\2716";/* Heavy multiplication symbol */font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";position: absolute;right: 0.5em;top: 0.5em;text-decoration: none;}/* Button */.bp_call_to_action {background-color: #f9cc46;border: none;color: #ffffff;font-size: 1.1em;}.bp_pill {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;padding-top: 0.5em;padding-bottom: 0.5em;}.bp_tab {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;}.bp_cancel {background-color: #f0f0f0;}.bp_disabled {background-color: #f0f0f0;}.bp_gradient_button {background-color: #f7f5f6; background-image: -webkit-gradient( linear, left top, left bottom, from( #f7f5f6 ), to( #dddddd ));background-image: -webkit-linear-gradient( top, #f7f5f6, #dddddd );background-image: -moz-linear-gradient( top, #f7f5f6, #dddddd );background-image: -ms-linear-gradient( top, #f7f5f6, #dddddd );background-image: -o-linear-gradient( top, #f7f5f6, #dddddd );background-image: linear-gradient( to bottom, #f7f5f6, #dddddd );filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#f7f5f6, endcolorstr=#dddddd );border: 0.1em solid #cccccc;-webkit-box-shadow: #feffff 0 0.1em 0.1em;-moz-box-shadow: #feffff 0 0.1em 0.1em; box-shadow: #feffff 0 0.1em 0.1em; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em;border-radius: 0.3em;color: #4a4a4a;display: inline-block;font-weight: bold; padding: 1em; text-decoration: none; text-shadow: 0 0.1em 0 rgba( 255, 255, 255, 1 );}.bp_gradient_button:hover {background-color: #e0e0e0; background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#bdbbbc));background-image: -webkit-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -moz-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -ms-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -o-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: linear-gradient( to bottom, #e0e0e0, #bdbbbc );filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#e0e0e0, endcolorstr=#bdbbbc );border: 0.1em solid #adadad;}.bp_menu_top {float: right;}.bp_nav {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);float: left;font-size: 0.9em;font-weight: bold;width: 100%;}.bp_menu_toolbar {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);bottom: 0;padding: 0.25em;width: 100%;}.bp_bar_container {background-color: #ffffff;margin: auto;width: 100%;z-index: 1;}.bp_bar_container a {text-decoration: none;}.bp_bar {margin: auto;width: 100%;}.bp_logo {float: left;}.bp_menu {text-align: right;}.bp_menu ul {list-style: none;}.bp_menu li{display: inline;font-size: 0.9em;margin: 0.5em;}/* Sticky */.bp_sticky_top { position: fixed;}.bp_sticky_bottom {bottom: 0;position: fixed;}/* Bottom bar */.bp_bottom_bar_wrapper {min-height: 100%;position: relative;}.bp_bottom_bar {background-color: #f9f9f9;bottom: 0;display: block;padding: 0.5em;position: fixed;width: 100%;}/* Table rows. */.bp_table_striped > tbody > tr:nth-child(odd) > td, .bp_table_striped > tbody > tr:nth-child(odd) > th {background-color: #ffffff; } .bp_table_striped > tbody > tr:nth-child(even)> td, .bp_table_striped > tbody > tr:nth-child(even)> th {background-color: #D3EE9F; }/* Container default *//* Container extra *//* Box */.bp_panel {border: 0.1em solid #77eeff;}.bp_panel > h1, .bp_panel > h2, .bp_panel > h3,.bp_panel > h4, .bp_panel > h5, .bp_panel > h6 {background-color: #77eeff;} .bp_translucent_box {background-color: rgba( 220, 220, 220, 0.1 );border: solid #efefef 0.1em;margin: 0.1em;padding: 0.5em;padding-top: 1em;padding-bottom: 1em;}/* Shape */.bp_square {height: 10em;padding: 10em;width: 10em;}.bp_small_square {height: 10em;width: 10em;}.bp_medium_square {height: 25em;width: 25em;}.bp_large_square {height: 50em;width: 50em;}.bp_rectangle {height: 200px;/*padding-bottom: 50%;*/width: 50%;}/* Modal */.bp_modal {background-color: #ffffff;display: none;padding: 1em;}/* Sticky bottom button. */.bp_credit a {background-color: #000000;color: #ffffff;font-size: 0.8em;position: absolute;bottom: 0;right: 0;padding: 10px;opacity: .50;}/* Panes. */.bp_pane {background-color: #f9f9f9;overflow: auto;position: relative;resize: both;}.bp_main_pane {overflow: hidden;}.bp_left_pane {height: 93%;padding-bottom: 5em;width: 30%;}.bp_right_pane {height: 93%;padding: 0.3em;width: 30%; }.bp_top_pane {top: 3em;height: 30%;margin: 0.1em;position: fixed;resize: both;width: 100%;}.bp_top_pane_wrapper, .bp_bottom_pane_wrapper {min-height: 100%;position: relative;width: 100%;}.bp_bottom_pane {bottom: 0;height: 30%;margin: 0.1em;position: fixed;width: 100%;}/* Toolbar */.bp_toolbar {background-color: #f9f9f9;display: block;padding: 0.3em;}/* Media extra */.bp_cover {background-size: cover;height: 100%;}/* Image */img.full_screen {height: 100%;position: absolute;text-align: middle;width: 100%;}img.bp_circle {border-radius: 50%;}img.bp_small {height: 10em;width: 10em;}img.bp_medium {height: 20em;width: 20em;}img.bp_large {height: 50em;width: 50em;}/* Video */.bp_video {height: 100%;left: 0;width: 100%;}/* Rounded corners */input, textarea, button, code, form, .bp_message, .bp_border, .bp_tight_border, .bp_content, .bp_panel {border-radius: 0.5em;-moz-border-radius: 0.5em;-webkit-border-radius: 0.5em;} \ No newline at end of file diff --git a/asset/module/css/container/extra.css b/asset/module/css/container/extra.css index 0386aec..de74577 100644 --- a/asset/module/css/container/extra.css +++ b/asset/module/css/container/extra.css @@ -66,4 +66,60 @@ right: 0; padding: 10px; opacity: .50; +} + +/* Panes. */ + +.bp_pane { + background-color: #f9f9f9; + overflow: auto; + position: relative; + resize: both; +} + +.bp_main_pane { + overflow: hidden; +} + +.bp_left_pane { + height: 93%; + padding-bottom: 5em; + width: 30%; +} + +.bp_right_pane { + height: 93%; + padding: 0.3em; + width: 30%; +} + +.bp_top_pane { + top: 3em; + height: 30%; + margin: 0.1em; + position: fixed; + resize: both; + width: 100%; +} + +.bp_top_pane_wrapper, .bp_bottom_pane_wrapper { + min-height: 100%; + position: relative; + width: 100%; +} + +.bp_bottom_pane { + bottom: 0; + height: 30%; + margin: 0.1em; + position: fixed; + width: 100%; +} + +/* Toolbar */ + +.bp_toolbar { + background-color: #f9f9f9; + display: block; + padding: 0.3em; } \ No newline at end of file diff --git a/asset/module/css/form/default.css b/asset/module/css/form/default.css index 78f104a..5e54dfb 100644 --- a/asset/module/css/form/default.css +++ b/asset/module/css/form/default.css @@ -1,5 +1,5 @@ /* Form default */ -input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea { +input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea, select { border: 0.1em solid #efefef; font-size: 1em; margin: 0.5em 0 0 0; @@ -8,13 +8,11 @@ input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea } label { + font-size: 1em; + font-weight: bold; padding: 0.5em; } -textarea { - height: 15em; -} - /* Button */ button, input[ type="submit" ], input[ type="button" ] { diff --git a/asset/module/css/form/extra.css b/asset/module/css/form/extra.css index 40fa398..a0e9812 100644 --- a/asset/module/css/form/extra.css +++ b/asset/module/css/form/extra.css @@ -12,6 +12,31 @@ width: 95%; } +/* x Close button */ + +.bp_close_small:after { + content: "\00D7"; + font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode"; +} + +.bp_close:after { + content: "\2715"; /* Multiplication symbol */ + font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode"; + position: absolute; + right: 0.5em; + top: 0.5em; + text-decoration: none; +} + +.bp_close_bold:after { + content: "\2716"; /* Heavy multiplication symbol */ + font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode"; + position: absolute; + right: 0.5em; + top: 0.5em; + text-decoration: none; +} + /* Button */ .bp_call_to_action { @@ -25,11 +50,16 @@ border: 0.1em solid #efefef; border-radius: 0; -moz-border-radius: 0; - font-size: 0.9em; padding-top: 0.5em; padding-bottom: 0.5em; } +.bp_tab { + border: 0.1em solid #efefef; + border-radius: 0; + -moz-border-radius: 0; +} + .bp_cancel { background-color: #f0f0f0; } @@ -38,3 +68,39 @@ background-color: #f0f0f0; } +.bp_gradient_button { + background-color: #f7f5f6; + background-image: -webkit-gradient( linear, left top, left bottom, from( #f7f5f6 ), to( #dddddd )); + background-image: -webkit-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: -moz-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: -ms-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: -o-linear-gradient( top, #f7f5f6, #dddddd ); + background-image: linear-gradient( to bottom, #f7f5f6, #dddddd ); + filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#f7f5f6, endcolorstr=#dddddd ); + border: 0.1em solid #cccccc; + -webkit-box-shadow: #feffff 0 0.1em 0.1em; + -moz-box-shadow: #feffff 0 0.1em 0.1em; + box-shadow: #feffff 0 0.1em 0.1em; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; + color: #4a4a4a; + display: inline-block; + font-weight: bold; + padding: 1em; + text-decoration: none; + text-shadow: 0 0.1em 0 rgba( 255, 255, 255, 1 ); +} + +.bp_gradient_button:hover { + background-color: #e0e0e0; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#bdbbbc)); + background-image: -webkit-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: -moz-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: -ms-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: -o-linear-gradient( top, #e0e0e0, #bdbbbc ); + background-image: linear-gradient( to bottom, #e0e0e0, #bdbbbc ); + filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#e0e0e0, endcolorstr=#bdbbbc ); + border: 0.1em solid #adadad; +} + diff --git a/asset/module/css/general/extra.css b/asset/module/css/general/extra.css index 9cfe905..58f54b1 100644 --- a/asset/module/css/general/extra.css +++ b/asset/module/css/general/extra.css @@ -24,15 +24,32 @@ width: 100%; } +.bp_resizable { + overflow: auto; + resize: both; +} + .bp_footer { margin: auto; width: 100%; } +/* Position */ + +.bp_relative{ + position: relative; +} + +/* Visibility */ + .bp_hidden { visibility: hidden; } +.bp_visible { + visibility: visible; +} + /* Space */ .bp_small_break { @@ -47,7 +64,7 @@ height: 5em; } -/* */ +/* Rounded corner */ .bp_rounded_corner { border-radius: 5px; diff --git a/asset/module/css/grid/extra.css b/asset/module/css/grid/extra.css index ae84486..4f962c4 100644 --- a/asset/module/css/grid/extra.css +++ b/asset/module/css/grid/extra.css @@ -7,6 +7,13 @@ overflow: auto; } +/* Position */ + +.bp_top_right { + position: absolute; + right: 1.5em; +} + /* Container Size */ /* Full */ @@ -23,7 +30,7 @@ } .bp_full_height { - height: auto; + height: 100%; min-height: 100%; } @@ -231,7 +238,7 @@ /* Mobile */ @media screen and (max-width: 800px) { .bp_column_1, .bp_column_2, .bp_column_3, .bp_column_4, .bp_column_5, .bp_column_6, - .bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12, { + .bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12 { float: none; margin-right: 0; width: auto; diff --git a/asset/module/css/menu/extra.css b/asset/module/css/menu/extra.css index 786dd33..6a4d0e9 100644 --- a/asset/module/css/menu/extra.css +++ b/asset/module/css/menu/extra.css @@ -66,3 +66,18 @@ position: fixed; } +/* Bottom bar */ + +.bp_bottom_bar_wrapper { + min-height: 100%; + position: relative; +} + +.bp_bottom_bar { + background-color: #f9f9f9; + bottom: 0; + display: block; + padding: 0.5em; + position: fixed; + width: 100%; +} diff --git a/asset/motif/css/palette/muted.css b/asset/motif/css/palette/muted.css index e69de29..55602e7 100644 --- a/asset/motif/css/palette/muted.css +++ b/asset/motif/css/palette/muted.css @@ -0,0 +1,13 @@ +/* Muted colors */ + +.bp_red { background-color: #771F1F; } +.bp_yellow { background-color: #f2e090; } +.bp_pink { background-color: #dd7788; } +.bp_blue { background-color: #83adb5; } +.bp_navy { background-color: #667799; } +.bp_green { background-color: #7a9460; } +.bp_orange { background-color: #dd9977; } +.bp_violet { background-color: #665566; } +.bp_purple { background-color: #c7bbc9; } +.bp_black { background-color: #223333; } +.bp_gray, .bp_grey { background-color: bfb5b2; } \ No newline at end of file