copy dari repo om Irfan
This commit is contained in:
@@ -0,0 +1,657 @@
|
||||
// FROM GITHUB
|
||||
// -----------------------------------------------------------------------------
|
||||
.fc {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fc table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.fc .btn {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
html .fc {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.fc table {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.fc td, .fc th {
|
||||
padding: 1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.fc-header td {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fc-header-left {
|
||||
width: 1%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fc-header-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-header-right {
|
||||
width: 99%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-header td.fc-header-right {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.fc-header-title {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.fc-header-title h2 {
|
||||
margin: 0 0 $spacement-sm;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fc .fc-header-space {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.fc-header .fc-button {
|
||||
margin-bottom: 1em;
|
||||
vertical-align: top;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.fc-header .fc-corner-right {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.fc-header .ui-corner-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.fc-header .fc-state-hover, .fc-header .ui-state-hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fc-header .fc-state-down {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.fc-header .fc-state-active, .fc-header .ui-state-active, .fc-header .ui-state-down {
|
||||
z-index: 4;
|
||||
background-color: #e6e6e6;
|
||||
background-color: #d9d9d9;
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.fc-content {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.fc-view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc .ui-widget-header {
|
||||
border-color: #dddddd;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
thead th.fc-first {
|
||||
border-top-left-radius: 5px;
|
||||
-moz-border-top-left-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
thead th.fc-last {
|
||||
border-top-right-radius: 5px;
|
||||
-moz-border-top-right-radius: 5px;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.ui-state-highlight.fc-today {
|
||||
background: #f4f4f4;
|
||||
margin: 2px !important;
|
||||
border: 0;
|
||||
border-left: 1px solid #dddddd;
|
||||
border-top: 1px solid #dddddd;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fc-button-inner {
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fc-button-content {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 1.9em;
|
||||
line-height: 1.9em;
|
||||
padding: 0 0.6em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fc-button-content .fc-icon-wrap {
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.fc-button-content .ui-icon {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: -50%;
|
||||
*margin-top: 0;
|
||||
*top: -50%;
|
||||
}
|
||||
|
||||
.fc-state-default {
|
||||
border-style: solid;
|
||||
border-color: #cccccc #bbbbbb #aaaaaa;
|
||||
background: #f3f3f3;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.fc-state-default .fc-button-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fc-state-default .fc-button-effect span {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 0;
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
border-width: 100px 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
background: #444444;
|
||||
opacity: 0.09;
|
||||
filter: alpha(opacity=9);
|
||||
}
|
||||
|
||||
.fc-state-default .fc-button-inner {
|
||||
border-style: solid;
|
||||
border-color: #cccccc #bbbbbb #aaaaaa;
|
||||
background: #f3f3f3;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.fc-state-hover {
|
||||
border-color: #999999;
|
||||
}
|
||||
|
||||
.fc-state-hover .fc-button-inner {
|
||||
border-color: #999999;
|
||||
}
|
||||
|
||||
.fc-state-down {
|
||||
border-color: #555555;
|
||||
background: #777777;
|
||||
}
|
||||
|
||||
.fc-state-down .fc-button-inner {
|
||||
border-color: #555555;
|
||||
background: #777777;
|
||||
}
|
||||
|
||||
.fc-state-active {
|
||||
border-color: #555555;
|
||||
background: #777777;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fc-state-active .fc-button-inner {
|
||||
border-color: #555555;
|
||||
background: #777777;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fc-state-disabled {
|
||||
color: #999999;
|
||||
border-color: #dddddd;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.fc-state-disabled .fc-button-inner {
|
||||
color: #999999;
|
||||
border-color: #dddddd;
|
||||
}
|
||||
|
||||
.fc-state-disabled .fc-button-effect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
font-size: 0.85em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.fc-event, .fc-event-draggable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.fc-event {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fc-rtl .fc-event {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-event-skin {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.fc-event-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fc-event-time, .fc-event-title {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.fc-event-hori {
|
||||
border-width: 1px 0;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.fc-event-hori .ui-resizable-e {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
table.fc-border-separate {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.fc-border-separate th, .fc-border-separate td {
|
||||
border-width: 1px 0 0 1px;
|
||||
}
|
||||
|
||||
.fc-border-separate th.fc-last, .fc-border-separate td.fc-last {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.fc-border-separate tbody tr.fc-first td, .fc-border-separate tbody tr.fc-first th {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.fc-grid th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-grid .fc-day-number {
|
||||
float: right;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.fc-grid .fc-other-month .fc-day-number {
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
|
||||
.fc-rtl .fc-grid .fc-day-number {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fc-rtl .fc-grid .fc-event-time {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fc-agenda table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.fc-agenda-days th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-agenda .fc-agenda-axis {
|
||||
width: 50px;
|
||||
padding: 0 4px;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fc-agenda .fc-day-content {
|
||||
padding: 2px 2px 1px;
|
||||
}
|
||||
|
||||
.fc-agenda-days .fc-agenda-axis {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.fc-agenda-days .fc-col0 {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.fc-agenda-allday th {
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.fc-agenda-allday .fc-day-content {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.fc-agenda-divider-inner {
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fc-widget-header .fc-agenda-divider-inner {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.fc-agenda-slots th {
|
||||
border-width: 1px 1px 0;
|
||||
}
|
||||
|
||||
.fc-agenda-slots td {
|
||||
border-width: 1px 0 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.fc-agenda-slots td div {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.fc-agenda-slots tr.fc-slot0 th, .fc-agenda-slots tr.fc-slot0 td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.fc-agenda-slots tr.fc-minor th, .fc-agenda-slots tr.fc-minor td {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
.fc-agenda-slots tr.fc-minor th.ui-widget-header {
|
||||
*border-top-style: solid;
|
||||
}
|
||||
|
||||
.fc-event-vert {
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.fc-event-vert .fc-event-head, .fc-event-vert .fc-event-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fc-event-vert .fc-event-time {
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.fc .ui-draggable-dragging .fc-event-bg, .fc-select-helper .fc-event-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-event-vert .ui-resizable-s {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// THEME CUSTOMIZATION
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Fullcalendar - header */
|
||||
.fc {
|
||||
.fc-header-center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-widget-header {
|
||||
background: $color-primary;
|
||||
border-color: $color-primary;
|
||||
color: $color-primary-inverse;
|
||||
@include font-size(13);
|
||||
font-weight: 500;
|
||||
padding: 10px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-header-title {
|
||||
h2 {
|
||||
color: $color-dark;
|
||||
@include font-size(24);
|
||||
font-weight: normal;
|
||||
|
||||
&:before {
|
||||
color: $color-primary;
|
||||
content: "\f073";
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
@include font-size(30);
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
margin-right: 10px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// BORDERS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Fullcalendar - Borders */
|
||||
.fc-widget-content {
|
||||
border-color: #DDD;
|
||||
}
|
||||
|
||||
/* Fullcalendar - Border Radius */
|
||||
.fc-content {
|
||||
thead {
|
||||
.fc-last {
|
||||
.fc-first {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.fc-last {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
.fc-last {
|
||||
.fc-first {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.fc-last {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODAY
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Fullcalendar - Today */
|
||||
.fc-content {
|
||||
// today
|
||||
.fc-widget-content.fc-today {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// EVENTS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Fullcalendar - Event Basics */
|
||||
.fc-event {
|
||||
background: $color-primary;
|
||||
border-color: $color-primary;
|
||||
|
||||
.fc-event-inner {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fullcalendar - Link Event */
|
||||
a.fc-event:hover {
|
||||
.fc-event-inner {
|
||||
color: #FFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fullcalendar - Event Time Format */
|
||||
.fc-grid {
|
||||
.fc-event-time {
|
||||
font-weight: 500;
|
||||
|
||||
&:after {
|
||||
content: ' /';
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-title {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
// STATES
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Fullcalendar - Event States */
|
||||
/* Buttons - States */
|
||||
.fc-event.fc-event-default {
|
||||
background: $color-default;
|
||||
border-color: $color-default;
|
||||
|
||||
.fc-event-inner {
|
||||
color: $color-default-inverse;
|
||||
}
|
||||
}
|
||||
|
||||
a.fc-event.fc-event-default:hover {
|
||||
color: $color-default-inverse;
|
||||
}
|
||||
|
||||
@each $state in $states {
|
||||
.fc-event.fc-event-#{nth($state,1)} {
|
||||
background: #{nth($state,2)};
|
||||
border-color: #{nth($state,2)};
|
||||
|
||||
.fc-event-inner {
|
||||
color: #{nth($state,3)};
|
||||
}
|
||||
}
|
||||
|
||||
a.fc-event.fc-event-#{nth($state,1)}:hover {
|
||||
color: #{nth($state,3)};
|
||||
}
|
||||
}
|
||||
|
||||
// EXTERNAL EVENTS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Fullcalendar - External Events */
|
||||
.external-event {
|
||||
cursor: move;
|
||||
display: inline-block;
|
||||
@include font-size(12);
|
||||
font-weight: normal;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// RESPONSIVE
|
||||
// -----------------------------------------------------------------------------
|
||||
@media only screen and (max-width: 400px) {
|
||||
.fc {
|
||||
.fc-header-right {
|
||||
.btn-group {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
br.hidden {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.fc {
|
||||
.fc-header-left,
|
||||
.fc-header-right {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-header-right {
|
||||
padding: 0 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.fc {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// DARK SKIN
|
||||
// -----------------------------------------------------------------------------\
|
||||
/* dark */
|
||||
html.dark {
|
||||
.fc .fc-header-title h2 {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.ui-state-highlight.fc-today,
|
||||
.fc .ui-widget-header,
|
||||
.fc-widget-content,
|
||||
.fc-state-disabled,
|
||||
.fc-state-disabled .fc-button-inner {
|
||||
border-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.fc-content {
|
||||
.fc-widget-content.fc-today {
|
||||
background: $dark-color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
// WRAPPER
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Error Pages - wrappers */
|
||||
.body-error {
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
|
||||
&.error-outside {
|
||||
display: table;
|
||||
height: 100vh;
|
||||
|
||||
.center-error {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.error-inside {
|
||||
margin-top: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
// HEADER
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Error Pages - header */
|
||||
.body-error {
|
||||
.error-header {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
.form {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPO
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Error Pages - typo */
|
||||
.body-error {
|
||||
.error-code {
|
||||
@include font-size(140);
|
||||
@include line-height(140);
|
||||
letter-spacing: -10px;
|
||||
}
|
||||
|
||||
.error-explanation {
|
||||
@include font-size(20);
|
||||
@include line-height(36);
|
||||
}
|
||||
}
|
||||
|
||||
// RESPONSIVE
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Error Pages - Responsive */
|
||||
@media only screen and (max-width: 1150px) {
|
||||
.body-error.error-inside {
|
||||
margin-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 1150px) {
|
||||
.body-error.error-inside {
|
||||
.error-code {
|
||||
@include font-size(100);
|
||||
@include line-height(100);
|
||||
letter-spacing: -7px;
|
||||
}
|
||||
|
||||
.error-explanation {
|
||||
@include font-size(18);
|
||||
@include line-height(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.body-error {
|
||||
|
||||
.error-code {
|
||||
@include font-size(90);
|
||||
@include line-height(90);
|
||||
letter-spacing: -7px;
|
||||
}
|
||||
|
||||
.error-explanation {
|
||||
@include font-size(16);
|
||||
@include line-height(28);
|
||||
}
|
||||
}
|
||||
|
||||
.body-error.error-outside {
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
// INVOICE BASIC
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice */
|
||||
.invoice {
|
||||
padding: 0 15px 15px;
|
||||
}
|
||||
|
||||
// ADDRESS FORMAT
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice Address Tag */
|
||||
.invoice {
|
||||
address {
|
||||
color: #7F8597;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// HEADER
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice header */
|
||||
.invoice {
|
||||
header {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.h2,
|
||||
.h4 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// BILL INFO
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice Billing Information */
|
||||
.invoice {
|
||||
.bill-to,
|
||||
.bill-data {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.bill-data {
|
||||
.value {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TABLE
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice table */
|
||||
.invoice {
|
||||
table.table {
|
||||
table-layout: fixed;
|
||||
|
||||
> thead:first-child {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: #F8F8F8;
|
||||
border: {
|
||||
bottom: 1px solid #DADADA;
|
||||
top: 1px solid #DADADA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody tr > td {
|
||||
border-color: #DADADA;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// TABLE ITEMS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice table items */
|
||||
.invoice {
|
||||
.invoice-items {
|
||||
> tbody tr:last-child > td {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
}
|
||||
|
||||
#cell-id {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#cell-item {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#cell-desc {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#cell-price {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#cell-qty {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#cell-total {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SUMMARY
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice summary */
|
||||
.invoice-summary {
|
||||
.col-sm-4 {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// RESPONSIVE
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice Responsiveness */
|
||||
@media only screen and (max-width: 991px) {
|
||||
.invoice {
|
||||
.table-responsive > table.table {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-summary {
|
||||
.col-sm-4 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// PRINT
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Invoice Print */
|
||||
@media print {
|
||||
.invoice {
|
||||
.table-responsive {
|
||||
border: none !important;
|
||||
overflow: visible !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
table.table.invoice-items {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
header .col-sm-6:first-child,
|
||||
header .col-sm-6:last-child,
|
||||
.bill-info .col-md-6 {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
header .col-sm-6:first-child {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
header .col-sm-6:last-child {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.bill-info .col-md-6 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.invoice-summary {
|
||||
.col-sm-4 {
|
||||
float: right;
|
||||
padding: 0;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DARK SKIN
|
||||
// -----------------------------------------------------------------------------\
|
||||
/* dark */
|
||||
html.dark {
|
||||
.invoice {
|
||||
header {
|
||||
border-bottom-color: $dark-color-3;
|
||||
}
|
||||
|
||||
table.table {
|
||||
> thead:first-child {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: $dark-color-3;
|
||||
border-bottom-color: $dark-color-3;
|
||||
border-top-color: $dark-color-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody tr > td {
|
||||
border-color: $dark-color-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.log-viewer {
|
||||
@include line-height(26);
|
||||
font-family: monospace;
|
||||
@include font-size(14);
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
.media-gallery {
|
||||
|
||||
ul.mg-folders {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > li {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
a.menu-item {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 80px;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-options {
|
||||
position: absolute;
|
||||
padding: 10px 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transition: opacity 0.1s ease-in;
|
||||
-moz-transition: opacity 0.1s ease-in;
|
||||
transition: opacity 0.1s ease-in;
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.item-options {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ul.mg-tags {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px 0 0;
|
||||
|
||||
& > li {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 2px 7px;
|
||||
font-size: 11px;
|
||||
background-color: #171717;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mg-files {
|
||||
padding: 5px 0 30px;
|
||||
|
||||
.thumbnail {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
.thumb-preview {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.thumb-image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
-webkit-transition: all 0.1s linear;
|
||||
-moz-transition: all 0.1s linear;
|
||||
transition: all 0.1s linear;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mg-thumb-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#000, 0.7);
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
.mg-zoom {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 5px 15px 10px;
|
||||
@include font-size(22);
|
||||
color: #fff;
|
||||
background-color: $color-primary;
|
||||
border-radius: 0 0 0 15px;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-transition: -webkit-transform 0.1s linear 0.1s;
|
||||
-moz-transition: -moz-transform 0.1s linear 0.1s;
|
||||
-ms-transition: -ms-transform 0.1s linear 0.1s;
|
||||
transition: transform 0.1s linear 0.1s;
|
||||
|
||||
-webkit-transform: translate(100%, 0);
|
||||
-moz-transform: translate(100%, 0);
|
||||
-ms-transform: translate(100%, 0);
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.mg-toolbar {
|
||||
@include clearfix;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
|
||||
-webkit-transition: -webkit-transform 0.1s linear 0.1s;
|
||||
-moz-transition: -moz-transform 0.1s linear 0.1s;
|
||||
-ms-transition: -ms-transform 0.1s linear 0.1s;
|
||||
transition: transform 0.1s linear 0.1s;
|
||||
|
||||
-webkit-transform: translate(0, 100%);
|
||||
-moz-transform: translate(0, 100%);
|
||||
-ms-transform: translate(0, 100%);
|
||||
transform: translate(0, 100%);
|
||||
|
||||
.mg-option {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mg-group {
|
||||
|
||||
& > a {
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.mg-toggle {
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 2px 2px 2px 10px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mg-title {
|
||||
margin: 13px 0 2px;
|
||||
padding-bottom: 2px;
|
||||
display: inline-block;
|
||||
@include font-size(18);
|
||||
|
||||
small {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #9e9e9e;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
@include font-size(10);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mg-description {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
&.thumbnail-selected {
|
||||
border-color: #FFF;
|
||||
box-shadow: 0 0 8px -1px $color-primary;
|
||||
.mg-title {
|
||||
small {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-preview {
|
||||
|
||||
.mg-thumb-options {
|
||||
visibility: visible;
|
||||
|
||||
.mg-toolbar {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .thumbnail
|
||||
&:hover {
|
||||
|
||||
.mg-title {
|
||||
small {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-preview {
|
||||
|
||||
img {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.mg-thumb-options {
|
||||
visibility: visible;
|
||||
|
||||
.mg-zoom {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.mg-toolbar {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// DARK SKIN
|
||||
// -----------------------------------------------------------------------------
|
||||
html.dark {
|
||||
|
||||
.media-gallery .mg-files .thumbnail {
|
||||
|
||||
&.thumbnail-selected {
|
||||
border-color: $dark-color-5;
|
||||
}
|
||||
.mg-title small {
|
||||
color: $dark-default-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
// SEARCH RESULTS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Change Content Background Color */
|
||||
html.search-results {
|
||||
body {
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
// WRAPPER
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Search Results Wrapper */
|
||||
.search-content {
|
||||
margin: -($content-body-padding);
|
||||
|
||||
.search-control-wrapper {
|
||||
background: darken( #FFF, 3% );
|
||||
border-bottom: 1px solid darken( #FFF, 8% );
|
||||
margin-top: 3px;
|
||||
padding: ($content-body-padding / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// WRAPPER
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Search Results Tabs */
|
||||
.search-content {
|
||||
.search-toolbar {
|
||||
border-bottom :1px solid #ebebeb;
|
||||
margin: 0 0 $content-body-padding;
|
||||
|
||||
.nav-pills {
|
||||
margin: 0 $content-body-padding;
|
||||
|
||||
li {
|
||||
margin: 0 15px 0 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid #FFF;
|
||||
border-top: 2px solid #FFF;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid #FFF;
|
||||
border-top: 2px solid #FFF;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $color-primary;
|
||||
border-bottom-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tab-content {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0 $content-body-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// TOTALS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Search Result Totals */
|
||||
.search-content {
|
||||
.total-results {
|
||||
margin-top: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
// LIST
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Search Results List */
|
||||
.search-results-list {
|
||||
max-width: 750px;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #EEE;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.result-type {
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding: 25px;
|
||||
text-decoration: none;
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken( #FFF, 3% );
|
||||
}
|
||||
}
|
||||
|
||||
.has-thumb {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
.result-thumb,
|
||||
.result-data {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.result-thumb {
|
||||
padding-right: 25px;
|
||||
|
||||
img,
|
||||
.fa {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
background: $color-primary;
|
||||
color: $color-primary-inverse;
|
||||
@include font-size(36);
|
||||
@include line-height(75);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RESPONSIVENESS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Search Results Responsive */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.search-content {
|
||||
margin: -($content-body-padding / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.search-results-list {
|
||||
.has-thumb {
|
||||
@include clearfix();
|
||||
display: block;
|
||||
|
||||
.result-thumb,
|
||||
.result-data {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.result-thumb {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.result-data {
|
||||
.title {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-thumb {
|
||||
img,
|
||||
.fa {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@include font-size(16);
|
||||
@include line-height(35);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DARK
|
||||
// -----------------------------------------------------------------------------
|
||||
/* dark */
|
||||
html.dark {
|
||||
.search-content {
|
||||
.search-control-wrapper {
|
||||
background: $dark-color-1;
|
||||
border-bottom-color: $dark-color-3;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
background: $dark-color-2;
|
||||
border-bottom-color: $dark-color-2;
|
||||
|
||||
.nav-pills {
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom-color: $dark-color-2;
|
||||
border-top-color: $dark-color-2;
|
||||
color: $dark-default-text;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom-color: $dark-color-2;
|
||||
border-top-color: $dark-color-2;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
border-bottom-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
li {
|
||||
border-bottom-color: $dark-color-3;
|
||||
}
|
||||
|
||||
a {
|
||||
.description {
|
||||
color: $dark-default-text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten( $dark-bg, 5% );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
// WRAPPER
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Sign Screens - Wrappers */
|
||||
.body-sign {
|
||||
display: table;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
|
||||
.center-sign {
|
||||
display: table-cell;
|
||||
padding-top: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.panel-sign {
|
||||
background: transparent;
|
||||
|
||||
.panel-title-sign {
|
||||
.title {
|
||||
background-color: $color-primary;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
color: #FFF;
|
||||
display: inline-block;
|
||||
@include font-size(12);
|
||||
@include line-height(20);
|
||||
padding: 13px 17px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background: #FFF;
|
||||
border-top: 5px solid $color-primary;
|
||||
border-radius: $border-radius 0 $border-radius $border-radius;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
padding: 33px 33px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ELEMENTS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Sign Screens - Elements */
|
||||
.body-sign {
|
||||
.input-group-icon {
|
||||
.input-group-addon i {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-custom {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.line-thru {
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: #CCC;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-color: #FFF;
|
||||
content: '';
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
margin: -5px 0 0 -20px;
|
||||
top: 50%;
|
||||
width: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 10%;
|
||||
position: absolute;
|
||||
top: 47%;
|
||||
width: 81%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LOCK SCREEN
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Lock Screen */
|
||||
.body-locked {
|
||||
background: url(../images/patterns/noisy_net.png) repeat;
|
||||
max-width: none;
|
||||
min-height: 400px;
|
||||
|
||||
&.body-locked-inline {
|
||||
background: none;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
min-height: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.panel-sign {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
padding-top: 40px;
|
||||
|
||||
.panel-body {
|
||||
border-radius: $border-radius;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.current-user {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 35px;
|
||||
|
||||
.user-image {
|
||||
border: 5px solid $color-primary;
|
||||
border-radius: 150px;
|
||||
height: 150px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
margin-left: -75px;
|
||||
top: -75px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
@include font-size(30);
|
||||
@include line-height(36);
|
||||
}
|
||||
|
||||
.user-email {
|
||||
@include font-size(11);
|
||||
@include line-height(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Locked Screen - Responsive Landscape */
|
||||
@media only screen and (max-width: 767px) and (orientation : landscape) {
|
||||
.body-locked {
|
||||
&,
|
||||
&.body-locked-inline {
|
||||
.panel-sign {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.center-sign {
|
||||
padding-top: 0;
|
||||
|
||||
.current-user {
|
||||
margin-bottom: 45px;
|
||||
margin-left: 100px;
|
||||
margin-top: 10px;
|
||||
|
||||
.user-image {
|
||||
height: 100px;
|
||||
left: 35px;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
top: 15px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Lock Screen - Modal */
|
||||
.mfp-lock-screen {
|
||||
&.mfp-bg {
|
||||
background: #000 url(../images/patterns/noisy_net.png) repeat;
|
||||
opacity: 0.99;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
&.mfp-wrap {
|
||||
background: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
// DARK SKIN
|
||||
// -----------------------------------------------------------------------------\
|
||||
/* dark */
|
||||
html.dark {
|
||||
.body-sign {
|
||||
.panel-sign .panel-body {
|
||||
background-color: $dark-color-4;
|
||||
}
|
||||
|
||||
.line-thru {
|
||||
|
||||
&:before {
|
||||
background-color: $dark-color-4;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom-color: $dark-color-3;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
// TIMELINE
|
||||
// -----------------------------------------------------------------------------
|
||||
$timeline-line-left: 140px;
|
||||
$timeline-simple-line-left: 30px;
|
||||
|
||||
.timeline {
|
||||
|
||||
.tm-body {
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
|
||||
&:after {
|
||||
background: #505050;
|
||||
background: -moz-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8));
|
||||
background: -webkit-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
|
||||
background: -o-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
|
||||
background: linear, to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: $timeline-line-left;
|
||||
margin-left: -2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
z-index: 0;
|
||||
filter: alpha(opacity=35);
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
.tm-title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-width: 200px;
|
||||
background-color: #fff;
|
||||
padding: 4px 5px;
|
||||
margin: 0 40px;
|
||||
z-index: 1;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tm-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
padding: 0 0 0 ($timeline-line-left + 50);
|
||||
min-height: 65px;
|
||||
z-index: 1;
|
||||
|
||||
.tm-datetime {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 48px;
|
||||
margin-top: -24px;
|
||||
text-align: right;
|
||||
z-index: 3;
|
||||
|
||||
.tm-datetime-time {
|
||||
color: $color-primary;
|
||||
@include font-size(24);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.tm-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $timeline-line-left;
|
||||
background-color: $body-color;
|
||||
border: 3px solid $color-primary;
|
||||
color: $color-primary;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
margin-top: -28px;
|
||||
margin-left: -28px;
|
||||
z-index: 2;
|
||||
-webkit-border-radius: 28px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.tm-box {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
min-height: 65px;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #e9e9e9;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
&:after {
|
||||
right: 100%;
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-right-color: #fff;
|
||||
border-width: 8px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tm-meta {
|
||||
margin: 10px 0 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding-right: 8px;
|
||||
|
||||
&:last-child,
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-simple {
|
||||
|
||||
.tm-body {
|
||||
|
||||
&:after {
|
||||
left: $timeline-simple-line-left;
|
||||
}
|
||||
|
||||
.tm-title {
|
||||
border: 1px solid #e9e9e9;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tm-items {
|
||||
|
||||
& > li {
|
||||
padding: 0 0 0 ($timeline-simple-line-left + 25);
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
background: none repeat scroll 0 0 $color-primary;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 3px #FFF, 0 0 0 6px $color-primary;
|
||||
height: 7px;
|
||||
left: $timeline-simple-line-left;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.tm-box {
|
||||
|
||||
&:before {
|
||||
left: -17px;
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-right-color: #e9e9e9;
|
||||
border-width: 8px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// TIMELINE - RESPONSIVE
|
||||
// -----------------------------------------------------------------------------
|
||||
$timeline-responsive-line-left: 20px;
|
||||
$timeline-responsive-simple-line-left: 30px;
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.timeline {
|
||||
.tm-body {
|
||||
&:after {
|
||||
left: $timeline-responsive-line-left;
|
||||
}
|
||||
}
|
||||
|
||||
.tm-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tm-items {
|
||||
& > li {
|
||||
padding-left: 50px;
|
||||
|
||||
.tm-info {
|
||||
@include clearfix;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.tm-icon {
|
||||
border-width: 2px;
|
||||
float: left;
|
||||
font-size: 22px;
|
||||
height: 40px;
|
||||
line-height: 36px;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
position: static;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.tm-datetime {
|
||||
margin: 0;
|
||||
position: static;
|
||||
text-align: left;
|
||||
|
||||
.tm-datetime-date {
|
||||
@include font-size(12);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tm-datetime-time {
|
||||
@include font-size(18);
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.timeline {
|
||||
.tm-items > li .tm-box .tm-meta span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DARK SKIN
|
||||
// -----------------------------------------------------------------------------
|
||||
html.dark {
|
||||
.timeline {
|
||||
.tm-items > li {
|
||||
.tm-box {
|
||||
background: $dark-color-3;
|
||||
border-color: $dark-color-2;
|
||||
|
||||
&:after {
|
||||
border-right-color: $dark-color-3;
|
||||
}
|
||||
&:before {
|
||||
border-right-color: $dark-color-2;
|
||||
}
|
||||
}
|
||||
.tm-icon {
|
||||
background-color: $dark-color-1;
|
||||
}
|
||||
}
|
||||
.tm-title {
|
||||
background-color: $dark-color-3;
|
||||
border-color: $dark-color-2;
|
||||
}
|
||||
|
||||
&.timeline-simple {
|
||||
|
||||
.tm-body {
|
||||
.tm-title {
|
||||
background-color: $dark-color-3;
|
||||
border-color: $dark-color-2;
|
||||
}
|
||||
.tm-items > li {
|
||||
&:before {
|
||||
box-shadow: 0 0 0 3px $dark-color-4, 0 0 0 6px $color-primary;
|
||||
}
|
||||
|
||||
.tm-box {
|
||||
&:after {
|
||||
border-right-color: $dark-color-3;
|
||||
}
|
||||
&:before {
|
||||
border-right-color: $dark-color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user