From 241296d9a0b8b1966d44a43551809ca1335a3ec9 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Fri, 25 Oct 2013 12:05:03 +0200 Subject: [PATCH] [refactor] structure CSS properly --- public/css/{app => components}/buttons.styl | 0 public/css/{app => components}/forms.styl | 0 public/css/{app => components}/layout.styl | 0 public/css/otalk.css | 648 +++++++++--------- public/css/otalk.styl | 20 +- public/css/{app => pages}/aux.styl | 0 public/css/{app => pages}/callbar.styl | 0 public/css/{app => pages}/chat.styl | 0 .../css/{app => pages}/connectionStatus.styl | 0 public/css/{app => pages}/roster.styl | 0 public/css/{app => pages}/settings.styl | 0 11 files changed, 335 insertions(+), 333 deletions(-) rename public/css/{app => components}/buttons.styl (100%) rename public/css/{app => components}/forms.styl (100%) rename public/css/{app => components}/layout.styl (100%) rename public/css/{app => pages}/aux.styl (100%) rename public/css/{app => pages}/callbar.styl (100%) rename public/css/{app => pages}/chat.styl (100%) rename public/css/{app => pages}/connectionStatus.styl (100%) rename public/css/{app => pages}/roster.styl (100%) rename public/css/{app => pages}/settings.styl (100%) diff --git a/public/css/app/buttons.styl b/public/css/components/buttons.styl similarity index 100% rename from public/css/app/buttons.styl rename to public/css/components/buttons.styl diff --git a/public/css/app/forms.styl b/public/css/components/forms.styl similarity index 100% rename from public/css/app/forms.styl rename to public/css/components/forms.styl diff --git a/public/css/app/layout.styl b/public/css/components/layout.styl similarity index 100% rename from public/css/app/layout.styl rename to public/css/components/layout.styl diff --git a/public/css/otalk.css b/public/css/otalk.css index 0afd572..8dc452f 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -203,6 +203,330 @@ a:active { overflow-y: auto; -webkit-overflow-scrolling: touch; } +input[type=text], +input[type=email], +input[type=password], +input[type=search], +input[type=date], +input[type=url], +input[type=file], +textarea, +.main .status { + width: 100%; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +input[type=text].inline, +input[type=email].inline, +input[type=password].inline, +input[type=search].inline, +input[type=date].inline, +input[type=url].inline, +input[type=file].inline, +textarea.inline, +.main .status.inline { + display: inline-block; + width: auto; +} +input[type=text]:disabled, +input[type=email]:disabled, +input[type=password]:disabled, +input[type=search]:disabled, +input[type=date]:disabled, +input[type=url]:disabled, +input[type=file]:disabled, +textarea:disabled, +select:disabled, +input[type=checkbox]:disabled, +input[type=radio]:disabled { + cursor: not-allowed; +} +.invalid label { + color: #de0a32; +} +.invalid input[type=text], +.invalid input[type=email], +.invalid input[type=password], +.invalid input[type=search], +.invalid input[type=date], +.invalid input[type=url], +.invalid input[type=file], +.invalid textarea { + background: #fff7f8; + border: 1px solid #fdcad3; + color: #fdcad3; +} +.invalid input[type=text]:focus, +.invalid input[type=email]:focus, +.invalid input[type=password]:focus, +.invalid input[type=search]:focus, +.invalid input[type=date]:focus, +.invalid input[type=url]:focus, +.invalid input[type=file]:focus, +.invalid textarea:focus { + border: 1px solid #fdcad3; + box-shadow: 0 0 5px #fdcad3; +} +.valid label { + color: #43bb6e; +} +.valid input[type=text], +.valid input[type=email], +.valid input[type=password], +.valid input[type=search], +.valid input[type=date], +.valid input[type=url], +.valid input[type=file], +.valid textarea { + background: #f4fbf6; + border: 1px solid #c6ebd3; + color: #c6ebd3; +} +.valid input[type=text]:focus, +.valid input[type=email]:focus, +.valid input[type=password]:focus, +.valid input[type=search]:focus, +.valid input[type=date]:focus, +.valid input[type=url]:focus, +.valid input[type=file]:focus, +.valid textarea:focus { + border: 1px solid #c6ebd3; + box-shadow: 0 0 5px #c6ebd3; +} +input[type=text], +input[type=email], +input[type=password], +input[type=search], +input[type=date], +input[type=url], +input[type=file], +textarea, +select, +.main .status { + display: block; + border-radius: 3px; + border: 1px solid #eee; +} +input[type=text]:focus, +input[type=email]:focus, +input[type=password]:focus, +input[type=search]:focus, +input[type=date]:focus, +input[type=url]:focus, +input[type=file]:focus, +textarea:focus, +select:focus, +.main .status:focus { + outline: none; + border: 1px solid #88d5f7; + box-shadow: 0 0 5px #88d5f7; + -webkit-transition: all 0.3s ease-in; + -o-transition: all 0.3s ease-in; + transition: all 0.3s ease-in; + -moz-transition: all 0.3s ease-in; + -webkit-transition: all 0.3s ease-in; +} +input[type=text]:disabled, +input[type=email]:disabled, +input[type=password]:disabled, +input[type=search]:disabled, +input[type=date]:disabled, +input[type=url]:disabled, +input[type=file]:disabled, +textarea:disabled, +select:disabled, +.main .status:disabled { + background: #f8f8f8; +} +input[type=text], +input[type=email], +input[type=password], +input[type=search], +input[type=date], +input[type=url], +.main .status { + height: 35px; + padding: 7px 10px; +} +textarea { + padding: 10px; + resize: none; + font-size: 12px; +} +input[type=file] { + padding: 15px; + background: #fafafa; + font-size: 12px; + color: #878787; +} +label { + display: block; + margin-bottom: 5px; + font-weight: 800; + font-size: 12px; +} +.has-icon { + position: relative; +} +.has-icon .ss-icon { + position: absolute; + top: 31px; + right: 10px; + font-size: 12px; + -webkit-transition: all 0.3s ease-in; + -o-transition: all 0.3s ease-in; + transition: all 0.3s ease-in; + -moz-transition: all 0.3s ease-in; +} +.has-icon .ss-icon.ss-delete { + color: #fdcad3; +} +.has-icon .ss-icon.ss-check { + color: #c6ebd3; +} +.has-icon .ss-icon.ss-search { + color: #eee; +} +button { + border: none; +} +.button { + line-height: 35px; +} +.button, +button { + display: inline-block; + border-radius: 3px; + padding: 0 15px; + height: 35px; + background: #eee; + font-size: 12px; + font-weight: 800; + text-align: center; + text-decoration: none; + color: #878787; + text-overflow: ellipsis; + vertical-align: middle; +} +.button:focus, +button:focus { + outline: none; +} +.button:hover:not(:disabled), +button:hover:not(:disabled) { + color: #565656; + background: #d6d6d6; + -webkit-transition: all 0.3s ease-in; + -o-transition: all 0.3s ease-in; + transition: all 0.3s ease-in; + -moz-transition: all 0.3s ease-in; +} +.button:disabled, +button:disabled { + cursor: not-allowed; + color: #b7b7b7; +} +.button.small, +button.small { + height: 25px; + padding: 0 8px; + font-size: 12px; + line-height: 25px; +} +.button.large, +button.large { + height: 50px; + line-height: 50px; + padding: 0 30px; + font-size: 16px; +} +.button.primary, +button.primary, +.button.secondary, +button.secondary, +.button.primary:hover, +button.primary:hover, +.button.secondary:hover, +button.secondary:hover { + color: #fff; +} +.button.primary, +button.primary { + background: #ec008c; +} +.button.primary:hover:not(:disabled), +button.primary:hover:not(:disabled) { + background: #d4007e; +} +.button.primary:disabled, +button.primary:disabled { + background: #f8bee0; +} +.button.secondary, +button.secondary { + background: #12acef; +} +.button.secondary:disabled, +button.secondary:disabled { + background: #88d5f7; +} +.button.secondary:hover:not(:disabled), +button.secondary:hover:not(:disabled) { + background: #0f9bd9; +} +.button-group .button, +.button-group button { + border-radius: 0; + margin-left: -1px; +} +.button-group .button:first-child:only-child, +.button-group button:first-child:only-child { + border-radius: 3px; +} +.button-group .button:first-child, +.button-group button:first-child { + border-radius: 3px 0 0 3px; +} +.button-group .button:last-child, +.button-group button:last-child { + border-radius: 0 3px 3px 0; +} +.button-group.outlined { + display: inline-block; + border-radius: 3px; +} +.button-group.outlined button, +.button-group.outlined .button { + border: 1px solid #dbdbdb; +} +.button-group.outlined.primary button, +.button-group.outlined.primary .button { + background: #fce8f1; + border: 1px solid #f8bee0; + color: #ec008c; +} +.button-group.outlined.primary button:hover, +.button-group.outlined.primary .button:hover { + background: #fbd8ec; +} +.button-group.outlined.secondary button, +.button-group.outlined.secondary .button { + background: #e7f7fd; + border: 1px solid #88d5f7; + color: #12acef; +} +.button-group.outlined.secondary button:hover, +.button-group.outlined.secondary .button:hover { + background: #b8e6fa; +} +.installFirefox, +.addContact { + margin-left: 5px; +} +.addContact { + margin-top: -2px; +} #connectionOverlay { position: fixed; top: 0px; @@ -895,330 +1219,6 @@ a:active { width: 50%; } } -input[type=text], -input[type=email], -input[type=password], -input[type=search], -input[type=date], -input[type=url], -input[type=file], -textarea, -.main .status { - width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -input[type=text].inline, -input[type=email].inline, -input[type=password].inline, -input[type=search].inline, -input[type=date].inline, -input[type=url].inline, -input[type=file].inline, -textarea.inline, -.main .status.inline { - display: inline-block; - width: auto; -} -input[type=text]:disabled, -input[type=email]:disabled, -input[type=password]:disabled, -input[type=search]:disabled, -input[type=date]:disabled, -input[type=url]:disabled, -input[type=file]:disabled, -textarea:disabled, -select:disabled, -input[type=checkbox]:disabled, -input[type=radio]:disabled { - cursor: not-allowed; -} -.invalid label { - color: #de0a32; -} -.invalid input[type=text], -.invalid input[type=email], -.invalid input[type=password], -.invalid input[type=search], -.invalid input[type=date], -.invalid input[type=url], -.invalid input[type=file], -.invalid textarea { - background: #fff7f8; - border: 1px solid #fdcad3; - color: #fdcad3; -} -.invalid input[type=text]:focus, -.invalid input[type=email]:focus, -.invalid input[type=password]:focus, -.invalid input[type=search]:focus, -.invalid input[type=date]:focus, -.invalid input[type=url]:focus, -.invalid input[type=file]:focus, -.invalid textarea:focus { - border: 1px solid #fdcad3; - box-shadow: 0 0 5px #fdcad3; -} -.valid label { - color: #43bb6e; -} -.valid input[type=text], -.valid input[type=email], -.valid input[type=password], -.valid input[type=search], -.valid input[type=date], -.valid input[type=url], -.valid input[type=file], -.valid textarea { - background: #f4fbf6; - border: 1px solid #c6ebd3; - color: #c6ebd3; -} -.valid input[type=text]:focus, -.valid input[type=email]:focus, -.valid input[type=password]:focus, -.valid input[type=search]:focus, -.valid input[type=date]:focus, -.valid input[type=url]:focus, -.valid input[type=file]:focus, -.valid textarea:focus { - border: 1px solid #c6ebd3; - box-shadow: 0 0 5px #c6ebd3; -} -input[type=text], -input[type=email], -input[type=password], -input[type=search], -input[type=date], -input[type=url], -input[type=file], -textarea, -select, -.main .status { - display: block; - border-radius: 3px; - border: 1px solid #eee; -} -input[type=text]:focus, -input[type=email]:focus, -input[type=password]:focus, -input[type=search]:focus, -input[type=date]:focus, -input[type=url]:focus, -input[type=file]:focus, -textarea:focus, -select:focus, -.main .status:focus { - outline: none; - border: 1px solid #88d5f7; - box-shadow: 0 0 5px #88d5f7; - -webkit-transition: all 0.3s ease-in; - -o-transition: all 0.3s ease-in; - transition: all 0.3s ease-in; - -moz-transition: all 0.3s ease-in; - -webkit-transition: all 0.3s ease-in; -} -input[type=text]:disabled, -input[type=email]:disabled, -input[type=password]:disabled, -input[type=search]:disabled, -input[type=date]:disabled, -input[type=url]:disabled, -input[type=file]:disabled, -textarea:disabled, -select:disabled, -.main .status:disabled { - background: #f8f8f8; -} -input[type=text], -input[type=email], -input[type=password], -input[type=search], -input[type=date], -input[type=url], -.main .status { - height: 35px; - padding: 7px 10px; -} -textarea { - padding: 10px; - resize: none; - font-size: 12px; -} -input[type=file] { - padding: 15px; - background: #fafafa; - font-size: 12px; - color: #878787; -} -label { - display: block; - margin-bottom: 5px; - font-weight: 800; - font-size: 12px; -} -.has-icon { - position: relative; -} -.has-icon .ss-icon { - position: absolute; - top: 31px; - right: 10px; - font-size: 12px; - -webkit-transition: all 0.3s ease-in; - -o-transition: all 0.3s ease-in; - transition: all 0.3s ease-in; - -moz-transition: all 0.3s ease-in; -} -.has-icon .ss-icon.ss-delete { - color: #fdcad3; -} -.has-icon .ss-icon.ss-check { - color: #c6ebd3; -} -.has-icon .ss-icon.ss-search { - color: #eee; -} -button { - border: none; -} -.button { - line-height: 35px; -} -.button, -button { - display: inline-block; - border-radius: 3px; - padding: 0 15px; - height: 35px; - background: #eee; - font-size: 12px; - font-weight: 800; - text-align: center; - text-decoration: none; - color: #878787; - text-overflow: ellipsis; - vertical-align: middle; -} -.button:focus, -button:focus { - outline: none; -} -.button:hover:not(:disabled), -button:hover:not(:disabled) { - color: #565656; - background: #d6d6d6; - -webkit-transition: all 0.3s ease-in; - -o-transition: all 0.3s ease-in; - transition: all 0.3s ease-in; - -moz-transition: all 0.3s ease-in; -} -.button:disabled, -button:disabled { - cursor: not-allowed; - color: #b7b7b7; -} -.button.small, -button.small { - height: 25px; - padding: 0 8px; - font-size: 12px; - line-height: 25px; -} -.button.large, -button.large { - height: 50px; - line-height: 50px; - padding: 0 30px; - font-size: 16px; -} -.button.primary, -button.primary, -.button.secondary, -button.secondary, -.button.primary:hover, -button.primary:hover, -.button.secondary:hover, -button.secondary:hover { - color: #fff; -} -.button.primary, -button.primary { - background: #ec008c; -} -.button.primary:hover:not(:disabled), -button.primary:hover:not(:disabled) { - background: #d4007e; -} -.button.primary:disabled, -button.primary:disabled { - background: #f8bee0; -} -.button.secondary, -button.secondary { - background: #12acef; -} -.button.secondary:disabled, -button.secondary:disabled { - background: #88d5f7; -} -.button.secondary:hover:not(:disabled), -button.secondary:hover:not(:disabled) { - background: #0f9bd9; -} -.button-group .button, -.button-group button { - border-radius: 0; - margin-left: -1px; -} -.button-group .button:first-child:only-child, -.button-group button:first-child:only-child { - border-radius: 3px; -} -.button-group .button:first-child, -.button-group button:first-child { - border-radius: 3px 0 0 3px; -} -.button-group .button:last-child, -.button-group button:last-child { - border-radius: 0 3px 3px 0; -} -.button-group.outlined { - display: inline-block; - border-radius: 3px; -} -.button-group.outlined button, -.button-group.outlined .button { - border: 1px solid #dbdbdb; -} -.button-group.outlined.primary button, -.button-group.outlined.primary .button { - background: #fce8f1; - border: 1px solid #f8bee0; - color: #ec008c; -} -.button-group.outlined.primary button:hover, -.button-group.outlined.primary .button:hover { - background: #fbd8ec; -} -.button-group.outlined.secondary button, -.button-group.outlined.secondary .button { - background: #e7f7fd; - border: 1px solid #88d5f7; - color: #12acef; -} -.button-group.outlined.secondary button:hover, -.button-group.outlined.secondary .button:hover { - background: #b8e6fa; -} -.installFirefox, -.addContact { - margin-left: 5px; -} -.addContact { - margin-top: -2px; -} #wrapper { position: relative !important; -webkit-transition: all 1s; diff --git a/public/css/otalk.styl b/public/css/otalk.styl index 3aa1768..c32dd5e 100644 --- a/public/css/otalk.styl +++ b/public/css/otalk.styl @@ -1,12 +1,14 @@ @import '_normalize' @import '_variables' @import '_mixins' -@import 'app/layout' -@import 'app/connectionStatus' -@import 'app/roster' -@import 'app/chat' -@import 'app/settings' -@import 'app/aux' -@import 'app/forms' -@import 'app/buttons' -@import 'app/callbar' + +@import 'components/layout' +@import 'components/forms' +@import 'components/buttons' + +@import 'pages/connectionStatus' +@import 'pages/roster' +@import 'pages/chat' +@import 'pages/settings' +@import 'pages/aux' +@import 'pages/callbar' diff --git a/public/css/app/aux.styl b/public/css/pages/aux.styl similarity index 100% rename from public/css/app/aux.styl rename to public/css/pages/aux.styl diff --git a/public/css/app/callbar.styl b/public/css/pages/callbar.styl similarity index 100% rename from public/css/app/callbar.styl rename to public/css/pages/callbar.styl diff --git a/public/css/app/chat.styl b/public/css/pages/chat.styl similarity index 100% rename from public/css/app/chat.styl rename to public/css/pages/chat.styl diff --git a/public/css/app/connectionStatus.styl b/public/css/pages/connectionStatus.styl similarity index 100% rename from public/css/app/connectionStatus.styl rename to public/css/pages/connectionStatus.styl diff --git a/public/css/app/roster.styl b/public/css/pages/roster.styl similarity index 100% rename from public/css/app/roster.styl rename to public/css/pages/roster.styl diff --git a/public/css/app/settings.styl b/public/css/pages/settings.styl similarity index 100% rename from public/css/app/settings.styl rename to public/css/pages/settings.styl