From e6fefcc36138a05ad42fab6b8fa222a08e10b9e9 Mon Sep 17 00:00:00 2001 From: Guillaume Lajarige Date: Wed, 15 Jun 2016 11:44:23 +0000 Subject: [PATCH] Customers portal : Started CSS rework to simply change BS theme SVN:trunk[4213] --- .../portal/web/css/portal.css | 1177 ----------------- 1 file changed, 1177 deletions(-) delete mode 100644 datamodels/2.x/itop-portal-base/portal/web/css/portal.css diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css deleted file mode 100644 index 0d4a7ef3bb..0000000000 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css +++ /dev/null @@ -1,1177 +0,0 @@ -/*******************/ -/* Global settings */ -/*******************/ -@media (max-width: 768px){ - body{ - padding-top: 60px; - } - body.home{ - padding-top: 70px; - } -} -footer{ - margin: 5em 1em; -} - -/* Navigation menu */ -.navbar-nav .dropdown-menu a .glyphicon, -.user_infos .dropdown-menu a .glyphicon{ - margin-right: 15px; -} -.nav > li > a > span.brick_icon, -.dropdown-menu > li > a > span.brick_icon{ - margin-right: 20px; - vertical-align: sub; -} -/* Topbar */ -#topbar .navbar-header{ - position: relative; - z-index: 2; -} -#topbar .navbar-collapse{ - position: relative; - z-index: 1; - overflow-y: auto; -} -#topbar .navbar-collapse > .navbar-nav{ - padding-top: 30px; -} -#topbar .navbar-collapse > .navbar-nav .divider{ - height: 1px; - margin: 8px 15px; - overflow: hidden; - background-color: #292827; - opacity: 0.6; -} -#topbar .navbar-brand{ - padding: 5px 15px; -} -#topbar .navbar-brand > img{ - max-height: 100%; -} -#topbar .user_infos{ - text-decoration: none; -} -#topbar .user_photo{ - position: absolute; - display: block; - top: 5px; - left: 10px; - width: 65px; - height: 65px; - background-size: 100%; - background-position: center center; - background-color: #585653; - border: 2px solid #FFFFFF; - border-radius: 100%; - box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); -} -#topbar .user_fullname{ - display: inline-block; - position: absolute; - padding-left: 85px; - max-width: 55%; - color: #FFFFFF; - white-space: nowrap; - text-overflow: ellipsis; - overflow-x: hidden; -} -/* Sidebar */ -@media (min-width: 768px){ - #sidebar{ - position: fixed; - top: 0px; - left: 0px; - padding: 0px; /* Overriding BS */ - height: 100%; - } - #sidebar .user_card{ - padding: 30px 0px; - background-color: #EA7D1E; - background-image: url('../img/backgrounds/geometric-orange.svg'); - background-size: 170%; - background-position: 60% 60%; - text-align: center; - box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4); - } - #sidebar .user_card .user_photo{ - margin: 0px auto 10px auto; - width: 80px; - height: 80px; - background-size: 100%; - background-position: center center; - background-color: #585653; - background-repeat: no-repeat; - border: 2px solid #FFFFFF; - border-radius: 100%; - } - #sidebar .user_card .user_infos{ - font-size: 1em; - color: #FFFFFF; - } - #sidebar .user_card .user_infos .dropdown-toggle{ - color: #FFFFFF; - } - #sidebar .user_card .user_options.dropdown-menu{ - width: 92%; - left: 4%; - } - #sidebar .user_card .user_fullname{ - font-weight: 600; - } - #sidebar .menu{ - max-height: 59%; - overflow-y: auto; - } - #sidebar .menu .nav > li{ - line-height: 3.0em; - } - #sidebar .menu .nav > li:after{ - content: ""; - display: block; - position: relative; - /*margin-left: 6.8em; - width: 56%;*/ - color: #FFFFFF; - border-bottom: 1px solid #7D7D7D; - } - #sidebar .menu .nav > li.active{ - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset; - } - #sidebar .menu .nav > li.active:after{ - content: " "; - position: absolute; - right: 0px; - top: 0px; - border: 30px solid transparent; - border-right-width: 20px; - border-right-color: #EDECEC; - } - #sidebar .menu .nav > li.active > a{ - margin-top: -1px; /* To mask border from previous li item */ - /*margin-left: 4em; - padding-left: 1em;*/ - } - #sidebar .menu .nav > li > a{ - /*padding-left: 3em;*/ - padding-left: 10%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - #sidebar .menu .nav > li > a > .brick_icon{ - width: 1.2em; - vertical-align: sub; - text-align: center; - margin-right: 10px; - } - #sidebar .logo{ - position: absolute; - bottom: 15px; - width: 100%; - text-align: center; - } - #sidebar .logo img{ - width: 40%; - max-width: 100%; -} -} -@media (min-width: 992px){ - -} -/* Warning : Not a offical BS breakpoint */ -@media (min-width: 1600px){ - #sidebar .user_card .user_photo{ - width: 120px; - height: 120px; - } - #sidebar .menu .nav > li > a > .brick_icon{ - margin-right: 20px; - } -} - -/* Main content */ -@media (min-width: 768px) { - #main-wrapper{ - margin-top: 20px; - } -} - -/* Overlays*/ -.global_overlay{ - z-index: 9999; - display: none; - position: fixed; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: black; - opacity: 0.5; -} -#page_overlay .overlay_content{ - margin-top: 20em; - width: 100%; - color: white; -} -.overlay_content{ - text-align: center; -} -.content_loader .icon{ - margin-bottom: 0.3em; - /*width: 52px;*/ - height: 38px; /* 50px; *//* Hack to make loader circle perfectly */ - font-size: 3em; /* 4em; */ - animation: spin 1.2s linear infinite; - -webkit-animation: spin 1.2s linear infinite; - -moz-animation: spin 1.2s linear infinite; - -ms-animation: spin 1.2s linear infinite; -} -.content_loader .message{ - font-size: 1.5em; /* 2em; */ -} - -.datatables_overlay{ - padding: 5% 0px !important; - background-color: white; -} - -/******************/ -/* Global classes */ -/******************/ -.vertical-center { - /* Make it a flex container */ - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - /* Align the bootstrap's container vertically */ - -webkit-box-align : center; - -webkit-align-items : center; - -moz-box-align : center; - -ms-flex-align : center; - align-items : center; - - /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers - hence the bootstrap's container won't be aligned to the center anymore. - - Therefore, we should use the following declarations to get it centered again */ - -webkit-box-pack : center; - -moz-box-pack : center; - -ms-flex-pack : center; - -webkit-justify-content : center; - justify-content : center; -} - -/*********************/ -/* Global animations */ -/*********************/ -/* Spin */ -@keyframes spin{ - 100% { - transform: rotate(360deg); - } -} -@-webkit-keyframes spin{ - 100% { - -webkit-transform: rotate(360deg); - } -} -@-moz-keyframes spin{ - 100% { - -moz-transform: rotate(360deg); - } -} -@-ms-keyframes spin{ - 100% { - -ms-transform: rotate(360deg); - } -} - -/***************/ -/* BS override */ -/***************/ -@font-face { - font-family: 'Glyphicons Halflings'; - - src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot'); - src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); -} -label{ - font-weight: bold; -} - -/*********************/ -/* BS theme override */ -/*********************/ -body{ - background-color: #EDECEC; -} -a{ - color: #D46201; -} -a:hover, a:focus{ - color: #C15A02; /* TODO : Darken #D46201 */ -} -.pagination{ - margin: 14px 0px; -} -.list-group.tree{ - margin-top: 11px; - margin-bottom: -11px; -} -.list-group-item{ - padding-right: 0px; /* To align all actions on the right without indent */ -} -.tooltip-inner{ - max-width: 400px; - padding: 15px; -} - -/* Navbars */ -.navbar-fixed-top .navbar-header{ - box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); -} -.navbar-fixed-top .navbar-collapse, -.navbar-fixed-bottom .navbar-collapse{ - max-height: 400px; -} - -.navbar-default .navbar-toggle { - border-top: none; - border-right: none; - border-bottom: none; - border-radius: 0px; - margin-right: 0px; -} -.navbar-default .navbar-toggle:hover, -.navbar-default .navbar-toggle:focus{ - background-color: inherit; -} -.navbar-default .navbar-toggle .icon-bar{ - height: 3px; -} -.navbar-default .navbar-collapse, -.navbar-default .navbar-form{ - border: none; -} - -.navbar-default{ - background-color: #585653; - border: none; -} -.navbar-default .nav > li > a, -.navbar-default .nav.navbar-nav > li > a{ - color: #FFFFFF; -} -.navbar-default .nav > li > a:focus, -.navbar-default .nav > li > a:hover, -.navbar-default .nav.navbar-nav > li > a:focus, -.navbar-default .nav.navbar-nav > li > a:hover{ - background-color: #FFFFFF; - color: #EA7D1E; -} -.navbar-default .nav > li.active, -.navbar-default .nav.navbar-nav > li.active > a{ - background-color: #292827; /* TODO Darken #585653 */ - color: #FFFFFF; - font-weight: 600; -} - -/* Dropdowns */ -.dropdown-menu>li>a:hover, -.dropdown-menu>li>a:focus { - text-decoration: none; - color: #FFFFFF; - background-color: #EA7D1E; -} - -.navbar-default .navbar-nav .open .dropdown-menu > li > a{ - color: #FFFFFF; - background-color: inherit; -} - -/* Buttons */ -/* - Default */ -.btn-default, -.btn-default:active, .btn-default.active, -.btn-default:hover, .btn-default:focus{ - color: inherit; - background-color: #FFFFFF; - background-image: none; - border: 1px solid rgba(0, 0, 0, 0.15); -} -.btn-default:hover, .btn-default.active:focus{ - background-color: #FAFAFA; /* TODO : Darken white */ -} -.btn-default:active, .btn-default.active{ - background-color: transparent; /* Body background */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset; - border: none; - border-bottom-color: #EBEAEA; -} -.btn-default:active:hover, .btn-default.active:hover, -.btn-default:active:focus, .btn-default.active:focus, -.btn-default:active.focus, .btn-default.active.focus { - color: inherit; - background-color: #EAEAEA; /* Darken body background */ - border: inherit; -} -/* - Primary */ -.btn-primary, -.btn-primary:active, .btn-primary.active, -.btn-primary:hover, .btn-primary:focus{ - color: #FFFFFF; - background-color: #EA7D1E; - background-image: none; - border: 1px solid rgba(0, 0, 0, 0.15); -} -.btn-primary:hover, -.btn-primary:active:hover, .btn-primary.active:hover, -.btn-primary:active:focus, .btn-primary.active:focus, -.btn-primary:active.focus, .btn-primary.active.focus{ - background-color: #DA751C; /* TODO : Darken #EA7D1E */ -} - -/* Button groups */ -.btn-group.btn_group_explicit{ - padding: 7px; - background-color: #292827; - border: 1px solid #EBEAEA; - border-radius: 30px; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) inset; -} -.btn-group.btn_group_explicit .btn{ - color: #FFFFFF; - background-color: transparent; - border: none; -} -.btn-group.btn_group_explicit .btn.active{ - color: #6B6965; - background-color: #EDECEC; - border-radius: 37px !important; - box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4); -} - -/* Panels */ -.panel{ - border: none; - border-radius: 0px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/* Forms */ -.form-control{ - border-radius: 0px; -} - -/* Pagination */ -.pagination>.active>a, -.pagination>.active>span, -.pagination>.active>a:hover, -.pagination>.active>span:hover, -.pagination>.active>a:focus, -.pagination>.active>span:focus { - background-color: #EA7D1E; - border-color: #EA7D1E; -} -.pagination>li>a:hover, -.pagination>li>span:hover, -.pagination>li>a:focus, -.pagination>li>span:focus { - background-color: #EA7D1E; - border-color: #EA7D1E; -} - -/* Modal */ -.modal-content{ - border-radius: 0px; -} - -/* Custom "glyphicons" */ -.glyphicon-ext-hierarchy:before { - content: url('../img/icons/hierarchy-white-13px.png'); -} - -/**********************/ -/* BS plugin override */ -/**********************/ -/* Datatables */ -.table-striped > tbody > tr:hover { - background-color: #fdf5d0; -} - -/******************/ -/* Modal settings */ -/******************/ -.modal-content .content_loader{ - margin: 7em 0em; - text-align: center; -} - -@media (min-width: 992px){ - .modal-lg { - width: 80%; - max-width: 1200px; - } -} - -/**************************/ -/* MagnificPopup settings */ -/**************************/ -.mfp-bg{ - z-index: 1200; -} -.mfp-wrap{ - z-index: 1210; -} - -/********************/ -/* Typeahed setting */ -/********************/ -.twitter-typeahead .tt-menu{ - max-height: 200px; - overflow-y: auto; -} -@media (min-width: 768px){ - .twitter-typeahead .tt-menu{ - max-height: 300px; - } -} - -.twitter-typeahead .tt-dataset > .content_loader{ - margin: 10px 0px; - text-align: center; - font-size: 0.6em; -} -.twitter-typeahead .tt-dataset > .content_loader .icon{ - height: 25px; -} -.twitter-typeahead .tt-dataset .no_result{ - text-align: center; - font-style: italic; -} - -/*****************/ -/* Home settings */ -/*****************/ -.home #main-wrapper{ - padding-top: 15px; -} - -.home .tile{ - display: block; - margin-bottom: 8px; - padding: 0em 1em; - min-height: 4em; - background-color: #FFFFFF; - background-image: none; - border: none; - border-radius: 0px; - text-align: center; - text-decoration: none; - white-space: normal; - line-height: 4em; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -} -.home .tile .tile_decoration{ - position: absolute; - top: 0.3em; - left: 2.5em; -} -.home .tile .tile_title{ - font-weight: bold; - color: #333; -} -.home .tile .tile_description{ - display: none; - color: #555555; -} -@media (min-width: 768px) { - .home .tile{ - display: block; - margin-bottom: 25px; - padding: 40px 40px 30px 40px; - min-height: 10em; - text-align: left; - transition: all 0.2s linear; - } - .home .tile:hover{ - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.10); - } - .home .tile .tile_decoration{ - display: block; - position: relative; - float: left; - top: 1.5em; - left: initial; - margin: 0px 30px 15px 0px; - } - .home .tile .tile_body{ - display: block; - padding-left: 4.3em; - text-align: left; - line-height: 1.5em; - } - .home .tile .tile_title{ - margin-bottom: 1em; - font-size: 1.0em; - } - .home .tile .tile_description{ - display: block; - text-align: left; - } -} -@media (min-width: 992px) { - .home .tile{ - min-height: 14em; - padding: 30px 40px 30px 40px; - } - .home .tile .tile_decoration > span.icon{ - font-size: 4em; - } - .home .tile .tile_body{ - padding-left: 6.3em; - } - .home .tile .tile_title{ - font-size: 1.4em; - } - .home .tile .tile_description{ - font-size: 1.2em; - } -} -@media (min-width: 1200px) { - .home .tile{ - margin-bottom: 40px; - min-height: 15em; - padding: 40px 50px 30px 50px; - } - .home .tile .tile_decoration{ - margin: 0px 40px 15px 0px; - top: 1.5em; - } - .home .tile .tile_decoration > span.icon{ - font-size: 6em; - } - .home .tile .tile_body{ - padding-left: 9.1em; - } - .home .tile .tile_title{ - font-size: 1.5em; - } - .home .tile .tile_description{ - font-size: 1.2em; - } -} - -/********************/ -/* Modules settings */ -/********************/ - -#main-header{ - text-align: center; -} -#main-header-title{ - margin-bottom: 15px; -} - -#main-header-actions{ - margin-bottom: 15px; -} -#main-header-actions .btn-group .btn{ - padding: 0em 1.5em; - line-height: 2.4em; - font-size: 14px; -} -@media (min-width: 768px) { - #main-header:after{ - clear: both; - } - #main-header-title{ - float: left; - margin-bottom: 0px; - min-height: 6em; - text-align: left; - } - #main-header-actions{ - float: right; - margin-bottom: 0px; - } -} - -.dataTables_wrapper{ - padding: 10px 10px; -} -#brick_content_toolbar{ - /* margin: 10px 0px 6px 0px; */ - padding: 10px; -} -#brick_content_toolbar > div label{ - font-weight: normal; - white-space: nowrap; - text-align: left; -} -#brick_content_toolbar > div label input{ - margin-left: 0.5em; - display: inline-block; - width: 130px; -} - -/***********************/ -/* Brick communication */ -/***********************/ -/* Home tile */ -.home .tile.tile_communication{ - padding: 20px; - background-color: #EDEDED; - border: none; - font-weight: initial; -} -.home .tile_communication .carousel{ - margin-bottom: 0px; - width: 100%; - height: 200px; -} - -/**********************/ -/* Brick user profile */ -/**********************/ -.home .userprofile-brick{ - background-color: #E8E7E7; -} - -/****************/ -/* Brick browse */ -/****************/ -/* - Tree mode */ -/****************/ -#brick_content_tree{ - position: relative; -} -.panel > .list-group:last-child .list-group-item:last-child, -.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child{ - margin-bottom: 1px; -} - -.list-group-item > .list-group-item-actions{ - /*display: none; Displaying actions only when hovering was not unanimous in the team */ - position: absolute; - top: 10px; - right: 10px; -} -.list-group-item:hover > .list-group-item-actions{ - display: block; -} -.list-group-item .list-group-item-actions a:not(:first-child){ - margin-left: 10px; -} -.list-group-item .list-group-item-text{ - margin-left: 5px; - font-size: 1em; - line-height: 1em; -} -.list-group-item .keep-spinning{ - animation: spin 1s linear infinite; - -webkit-animation: spin 1s linear infinite; - -moz-animation: spin 1s linear infinite; - -ms-animation: spin 1s linear infinite; -} - -/* Secondary actions */ -table .group-actions{ - position: relative; -} -.list-group-item-actions a.glyphicon-menu-hamburger, -table .group-actions a.glyphicon-menu-hamburger{ - cursor: pointer; - text-decoration: none; -} -.list-group-item-actions .item-action-wrapper, -table .group-actions .item-action-wrapper -{ - display: none; - position: absolute; - z-index: 5; - bottom: 5px; - right: 0px; - -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); - box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); -} -.list-group-item-actions .item-action-wrapper .glyphicon, -table .group-actions .item-action-wrapper .glyphicon{ - margin-right: 0.6em; -} -.list-group-item-actions .item-action-wrapper.collapse.in, -table .group-actions .item-action-wrapper.collapse.in{ - display: block; -} -.list-group-item-actions .item-action-wrapper .panel-body > p, -table .group-actions .item-action-wrapper .panel-body > p{ - white-space: nowrap; -} -.list-group-item-actions .item-action-wrapper .panel-body > p:last-child, -table .group-actions .item-action-wrapper .panel-body > p:last-child{ - margin-bottom: 0px; -} - -#brick_content_empty{ - display: none; - padding: 40px; - font-size: 1.3em; - font-style: italic; -} - -/* Loader */ -#brick_tree_overlay{ - /*z-index: 10;*/ - display: none; - padding: 8% 0px; - /*position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - min-height: 130px;*/ - /*background-color: black;*/ - border-radius: 0px 0px 4px 4px; - /*opacity: 0.5; - color: white;*/ - font-size: 1em; -} -/****************/ -/* - List mode */ -/****************/ - - -/*********/ -/* Forms */ -/*********/ -.form_fields textarea{ - height: 160px; -} -.form_field .form_mandatory .control-label:after{ - content: "\002a"; - position: relative; - left: 3px; - color: red; /* TODO : SASS this */ - font-size: 0.9em; -} -/* Subform field */ -.subform_field > fieldset{ - margin: inherit; - margin-bottom: 15px; /* TODO : SASS this from .form-group */ - padding: 10px 15px; - border: 1px solid #dddddd; /* TODO : SASS this */ - border-radius: 4px; /* TODO : SASS this */ -} -.subform_field > fieldset > legend{ - margin: 0px 0px; - padding: 0px 7px; - width: inherit; - border: none; - font-size: 1em; - font-weight: bold; - color: #777777; /* TODO : SASS this */ -} -/* CaseLog field */ -.caselog_field_entry{ - border: 1px solid #dddddd; - border-top: none; -} -.caselog_field_entry_header{ - padding: 6px; - font-size: 1em; - border-bottom: 1px solid #FFFFFF; - background-color: #F2F2F2; -} -.caselog_field_entry_button{ - display: block; - width: 15px; - height: 15px; - text-align: center; - line-height: 15px; - font-size: 16px; - border: 1px solid #a6a6a6; - border-bottom-color: #979797; -} -.caselog_field_entry_button:hover{ - background-color: #cccccc; -} -.caselog_field_entry_button:before{ - content: "▴"; -} -.caselog_field_entry_button.collapsed:before{ - content: "▾"; -} -.caselog_field_entry_content{ - margin: 10px; - overflow-x: auto; -} -/* LinkedSet*/ -.form_linkedset_toggler, -.form_linkedset_toggler:hover, -.form_linkedset_toggler:focus{ - margin-left: 0.4em; - text-decoration: none; - color: inherit; -} -.form_linkedset_toggler > .text:before{ - content: "("; -} -.form_linkedset_toggler > .text:after{ - content: ")"; -} -.form_linkedset_toggler > .glyphicon{ - margin-left: 0.5em; - font-size: 0.85em; - color: #EA7D1E; /* TODO : SASS this to primary color */ - transition: transform 0.2s linear; -} -.form_linkedset_toggler > .glyphicon.collapsed{ - transform: rotateZ(-90deg); -} -/* - DataTables : Loader */ -.form_linkedset_wrapper .datatables_overlay{ - padding: 8px !important; -} -.form_linkedset_wrapper .overlay_content{ - font-size: 0.6em; -} -.form_linkedset_wrapper .content_loader{ - margin: 0px; -} -.form_linkedset_wrapper .content_loader .icon{ - height: 23px; -} -/* - DataTables : Fit the table in the form */ -.form_linkedset_wrapper .dataTables_wrapper{ - margin-bottom: 5px; - padding: 0px; -} -/* FileUpload */ -.fileupload_field_content{ - padding: 8px 23px; - border: 1px solid #DDDDDD; /* TODO : SASS this */ - background-color: #F9F9F9; /* TODO : SASS this*/ -} -.fileupload_field_content > div{ - margin-bottom: 15px; -} -.attachments_container .attachment { - height: 95px; - overflow-x: hidden; - text-align: center; -} -.attachments_container .attachment:hover { - background-color: #e0e0e0; -} -.attachments_container .attachment .attachment_name{ - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.attachments_container .attachment .btn{ - margin-top: 3px; -} -.upload_container input{ - display: inline; -} -.upload_container .loader{ - visibility: hidden; - margin-left: 7px; - font-size: 1.2em; - animation: spin 1.0s linear infinite; - -webkit-animation: spin 1.0s linear infinite; - -moz-animation: spin 1.0s linear infinite; - -ms-animation: spin 1.0s linear infinite; -} -#drag_overlay{ - display: block; - top: inherit; - bottom: 0px; - height: 0px; -} -#drag_overlay .overlay_content{ - margin-top: 5em; - width: 100%; - color: white; -} -#drag_overlay .overlay_content .icon{ - font-size: 3em; -} -#drag_overlay .overlay_content .message{ - font-size: 1.5em; -} -/* Attachments drag & drop zone, only for none mobile devices */ -@media (min-width: 768px){ - #drag_overlay.drag_in{ - animation: show-drop-zone 0.3s ease-out forwards; - -webkit-animation: show-drop-zone 0.3s ease-out forwards; - -moz-animation: show-drop-zone 0.3s ease-out forwards; - -ms-animation: show-drop-zone 0.3s ease-out forwards; - } - #drag_overlay.drag_out{ - animation: hide-drop-zone 0.3s ease-out forwards; - -webkit-animation: hide-drop-zone 0.3s ease-out forwards; - -moz-animation: hide-drop-zone 0.3s ease-out forwards; - -ms-animation: hide-drop-zone 0.3s ease-out forwards; - } - @keyframes show-drop-zone{ - 100% { - height: 20%; - } - } - @-webkit-keyframes show-drop-zone{ - 100% { - height: 20%; - } - } - @-moz-keyframes show-drop-zone{ - 100% { - height: 20%; - } - } - @-ms-keyframes show-drop-zone{ - 100% { - height: 20%; - } - } - @keyframes hide-drop-zone{ - 0% { - height: 20%; - } - 100% { - height: 0%; - } - } - @-webkit-keyframes hide-drop-zone{ - 0% { - height: 20%; - } - 100% { - height: 0%; - } - } - @-moz-keyframes hide-drop-zone{ - 0% { - height: 20%; - } - 100% { - height: 0%; - } - } - @-ms-keyframes hide-drop-zone{ - 0% { - height: 20%; - } - 100% { - height: 0%; - } - } -} - -.form_field .form-control-static img{ - max-width: 100% !important; - height: initial !important; -} - -.form_buttons{ - padding-top: 20px; - text-align: center; -} -.form_buttons .form_btn_transitions{ - margin-bottom: 20px; -} -.form_buttons .btn .glyphicon{ - margin-right: 0.5em; -} -.form_btn_regular.sticky{ - display: none; -} -@media (min-width: 768px){ - .form_buttons .form_btn_transitions{ - float: left !important; - } - .form_buttons .form_btn_regular{ - text-align: right; - } - .form_buttons .form_btn_regular btn{ - width: inherit; - } - /* Making regular button sticky */ - .form_btn_regular.sticky{ - display: block; - position: fixed; - bottom: 5em; - right: -2px; /* TODO : SASS this to col-xs-12 padding */ - padding: 15px; - background-color: #FFF; /* TODO : SASS this to panel bg */ - border: 1px solid #DDD; /* TODO : SASS this to panel border */ - border-radius: 4px; /* TODO : SASS this to panel border */ - transition: right 0.3s; - } - .form_btn_regular.sticky.closed{ - right: -75px; - } - .form_btn_regular.sticky button{ - display: block; - } - .form_btn_regular.sticky button:first-child{ - margin-bottom: 4px; - } - /* - Adjustments for modal sticky buttons */ - .modal.in .form_btn_regular.sticky{ - /*right: 15px;*/ /* TODO : SASS this to col-xs-12 padding */ - } -} - -/* CKEditor : Adding BS error feedback */ -.form_field div.cke{ - border: 1px solid #dddddd; /* TODO : SASS this */ -} -.form_field.has-error div.cke{ - border: 1px solid #D9230F; /* TODO : SASS this */ - border-radius: 3px; /* TODO : SASS this */ - box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -} -/* CKEditor : Styling notifications based on BS alerts */ -.cke_notification{ - position: relative; - padding: 15px; - margin-bottom: 18px; - border: 1px solid transparent; - border-radius: 4px; - background-color: #FFFFFF -} -.cke_notification_close{ - position: absolute; - top: 2px; - right: 5px; -} -.cke_notification_message{ - margin-bottom: 0px; - line-height: 1em; - font-size: 1em; -} -.cke_notification_success{ /* TODO : SASS this */ - display: none; - background-color: #dff0d8; - border-color: #d6e9c6; - color: #468847; -} -.cke_notification_warning{ /* TODO : SASS this */ - background-color: #fcf8e3; - border-color: #fbeed5; - color: #c09853; -} - -/* DataTables : Selection inputs */ -.dataTable.table th span.row_input, -.dataTable.table td span.row_input{ - display: inline-block; - width: 100%; - text-align: center; -} \ No newline at end of file