Origin commit
This commit is contained in:
Hoang Huu
200
assets/scss/admin.scss
Executable file
200
assets/scss/admin.scss
Executable file
@@ -0,0 +1,200 @@
|
||||
.post-type-opalestate_property .post-state{
|
||||
background:#ef114c;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
padding: 3px 6px;
|
||||
color:#FFF;
|
||||
border-radius: 5px 5px 5px;
|
||||
}
|
||||
.fixed .column-featured,
|
||||
.fixed .column-sku{
|
||||
width: 10%;
|
||||
}
|
||||
.fixed .column-address{
|
||||
width: 20%;
|
||||
}
|
||||
.type-download {
|
||||
float: left;
|
||||
margin: 0 1em 1em 0 !important;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
width: 280px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: 2px solid #ddd;
|
||||
display: block;
|
||||
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
-webkit-transition-property: border, background, color;
|
||||
transition-property: border, background, color;
|
||||
-webkit-transition-duration: .05s;
|
||||
transition-duration: .05s;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
}
|
||||
.type-download:hover{
|
||||
border-color: #0073aa;
|
||||
}
|
||||
.type-download h4{
|
||||
margin: 6px 0px;
|
||||
}
|
||||
.type-download a{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
outline: 0 none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.type-download .feed-content{
|
||||
color: #72777c;
|
||||
}
|
||||
.type-download img{
|
||||
max-width: 100%;
|
||||
}
|
||||
.type-download .feed-content{
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.type-download .feed-bottom {
|
||||
background: #ddd;
|
||||
padding: 15px 8px;
|
||||
}
|
||||
.type-download:hover .feed-bottom{
|
||||
background: #0073aa;
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-1{
|
||||
background-image:url(images/1.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-2{
|
||||
background-image:url(images/2.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-3{
|
||||
background-image:url(images/3.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-4{
|
||||
background-image:url(images/4.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-5{
|
||||
background-image:url(images/5.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-6{
|
||||
background-image:url(images/6.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-7{
|
||||
background-image:url(images/7.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-8{
|
||||
background-image:url(images/8.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-9{
|
||||
background-image:url(images/9.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-10{
|
||||
background-image:url(images/10.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-11{
|
||||
background-image:url(images/11.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-12{
|
||||
background-image:url(images/12.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-13{
|
||||
background-image:url(images/13.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-14{
|
||||
background-image:url(images/14.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-15{
|
||||
background-image:url(images/15.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-16{
|
||||
background-image:url(images/16.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-17{
|
||||
background-image:url(images/17.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-18{
|
||||
background-image:url(images/18.png);
|
||||
}
|
||||
|
||||
.vc_element-icon.icon-wpb-estates-19{
|
||||
background-image:url(images/19.png);
|
||||
}
|
||||
|
||||
/** CMD BOX 2 */
|
||||
.cmb2-wrap .field-row-2 .cmb-row {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cmb2-wrap .field-row-2 .cmb-row:nth-child(even) > div {
|
||||
padding-left: 12px;
|
||||
}
|
||||
.cmb2-wrap .cmb-td {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.cmb2-wrap .cmb-th {
|
||||
padding: 0px 10px 10px 0
|
||||
}
|
||||
|
||||
/***/
|
||||
.form-settings-wrap {
|
||||
display:flex;
|
||||
.cmb2-wrap {
|
||||
min-height:300px;
|
||||
}
|
||||
.subtab-settings-navs {
|
||||
width:220px;
|
||||
background:#2f73e9;
|
||||
min-height:300px;
|
||||
|
||||
ul {
|
||||
padding:0;
|
||||
margin:0;
|
||||
li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
a{
|
||||
display:block;
|
||||
padding:12px 6px;
|
||||
background:#2f73e9;
|
||||
text-align:right;
|
||||
text-decoration:none;
|
||||
color:#FFF;
|
||||
font-weight:bold;
|
||||
&.active {
|
||||
background-color:#f1f1f1;
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.form-settings-form {
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
}
|
||||
}
|
||||
31
assets/scss/bootstrap/_grid.scss
Executable file
31
assets/scss/bootstrap/_grid.scss
Executable file
@@ -0,0 +1,31 @@
|
||||
.opal-row, .row {
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
|
||||
// Medium grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include make-grid(sm);
|
||||
@include make-grid-columns(sm);
|
||||
@include make-row;
|
||||
}
|
||||
@media (min-width: $screen-md-min) {
|
||||
@include make-grid(md);
|
||||
@include make-grid-columns(md);
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
@include make-grid(lg);
|
||||
@include make-grid-columns(lg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
7
assets/scss/bootstrap/_mixins.scss
Executable file
7
assets/scss/bootstrap/_mixins.scss
Executable file
@@ -0,0 +1,7 @@
|
||||
@import "mixins/opacity";
|
||||
@import "mixins/size";
|
||||
@import "mixins/vendor-prefixes";
|
||||
// Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
55
assets/scss/bootstrap/_unlities.scss
Executable file
55
assets/scss/bootstrap/_unlities.scss
Executable file
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Floats
|
||||
// -------------------------
|
||||
|
||||
.clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
.center-block {
|
||||
@include center-block;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
|
||||
// Toggling content
|
||||
// -------------------------
|
||||
|
||||
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.text-hide {
|
||||
@include text-hide;
|
||||
}
|
||||
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
// For Affix plugin
|
||||
// -------------------------
|
||||
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
887
assets/scss/bootstrap/_variables.scss
Executable file
887
assets/scss/bootstrap/_variables.scss
Executable file
@@ -0,0 +1,887 @@
|
||||
$bootstrap-sass-asset-helper: false !default;
|
||||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
$gray-base : #000;
|
||||
$light-gray : lighten(#000000, 60%) !default; // #999999
|
||||
$very-light-gray : #ebebeb !default; // #e5e5e5
|
||||
$very-dark-gray : lighten(#000000, 9%) !default; // #171717
|
||||
$gray-darker : #0d292f !default; // #0d292f
|
||||
$gray-dark : #888888 !default; // #888888
|
||||
$gray : lighten(#000, 33.5%) !default; // #555555
|
||||
$gray-light : lighten(#000, 46.7%) !default; // #777777
|
||||
$gray-lighter : lighten(#000, 93.5%) !default; // #eeeeee
|
||||
|
||||
$brand-primary : #ef114c !default;
|
||||
$brand-success : #8ac842 !default;
|
||||
$brand-info : #07a5db !default;
|
||||
$brand-warning : #fabd47 !default;
|
||||
$brand-danger : #ef114c !default;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
$body-bg: #f7f7f7 !default;
|
||||
//** Global text color on `<body>`.
|
||||
$text-color: $gray-dark !default;
|
||||
|
||||
//** Global textual link color.
|
||||
$link-color: $gray-base !default;
|
||||
//** Link hover color set via `darken()` function.
|
||||
$link-hover-color: $brand-primary !default;
|
||||
//** Link hover decoration.
|
||||
$link-hover-decoration: none !default;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: 'Lato', sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
$font-family-monospace: "Montserrat", monospace !default;
|
||||
$font-family-base: 'Lato', sans-serif !default;
|
||||
|
||||
$font-size-base: 15px !default;
|
||||
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
$font-size-md: 12px !default;
|
||||
|
||||
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
||||
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
|
||||
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
|
||||
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-h5: $font-size-base !default;
|
||||
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
$font-weight-base : 400 !default;
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$line-height-base: 1.428571429 !default; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
$headings-font-family: "Montserrat", monospace !default;
|
||||
$headings-font-weight: 700 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-color: $gray-base !default;
|
||||
|
||||
|
||||
//== Iconography
|
||||
//
|
||||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
//** Load fonts from this directory.
|
||||
|
||||
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
|
||||
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
|
||||
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
|
||||
|
||||
//** File name for all font files.
|
||||
$icon-font-name: "glyphicons-halflings-regular" !default;
|
||||
//** Element ID within SVG icon file.
|
||||
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
|
||||
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
$padding-base-vertical: 6px !default;
|
||||
$padding-base-horizontal: 12px !default;
|
||||
|
||||
$padding-large-vertical: 12px !default;
|
||||
$padding-large-horizontal: 16px !default;
|
||||
|
||||
$padding-small-vertical: 5px !default;
|
||||
$padding-small-horizontal: 10px !default;
|
||||
|
||||
$padding-md-vertical: 10px !default;
|
||||
$padding-md-horizontal: 20px !default;
|
||||
|
||||
$padding-xs-vertical: 1px !default;
|
||||
$padding-xs-horizontal: 5px !default;
|
||||
|
||||
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
|
||||
$line-height-small: 1.5 !default;
|
||||
|
||||
$border-radius-base: 10px !default;
|
||||
$border-radius-large: 20px !default;
|
||||
$border-radius-small: 4px !default;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
$component-active-color: #fff !default;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
$caret-width-base: 4px !default;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
$caret-width-large: 5px !default;
|
||||
|
||||
|
||||
//== Tables
|
||||
//
|
||||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
//** Padding for `<th>`s and `<td>`s.
|
||||
$table-cell-padding: 8px !default;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
$table-condensed-cell-padding: 5px !default;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
$table-bg: transparent !default;
|
||||
//** Background color used for `.table-striped`.
|
||||
$table-bg-accent: #f9f9f9 !default;
|
||||
//** Background color used for `.table-hover`.
|
||||
$table-bg-hover: #f5f5f5 !default;
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
$table-border-color: #ddd !default;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-font-weight: 900 !default;
|
||||
|
||||
$btn-default-color: #fff !default;
|
||||
$btn-default-bg: #999 !default;
|
||||
$btn-default-border: #999 !default;
|
||||
|
||||
$btn-white-color: #000 !default;
|
||||
$btn-white-bg: #fff !default;
|
||||
$btn-white-border: rgba(255,255,255,.2) !default;
|
||||
|
||||
$btn-primary-color: #fff !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
|
||||
|
||||
$btn-success-color: #fff !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-border: darken($btn-success-bg, 5%) !default;
|
||||
|
||||
$btn-info-color: #fff !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-border: darken($btn-info-bg, 5%) !default;
|
||||
|
||||
$btn-warning-color: #fff !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%) !default;
|
||||
|
||||
$btn-danger-color: #fff !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius-base: $border-radius-base !default;
|
||||
$btn-border-radius-large: $border-radius-large !default;
|
||||
$btn-border-radius-small: $border-radius-small !default;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
$input-bg: #fff !default;
|
||||
//** `<input disabled>` background color
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
$input-color: $gray !default;
|
||||
//** `<input>` border color
|
||||
$input-border: #ebebeb !default;
|
||||
|
||||
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
|
||||
//** Default `.form-control` border radius
|
||||
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
$input-border-radius: $border-radius-small !default;
|
||||
//** Large `.form-control` border radius
|
||||
$input-border-radius-large: $border-radius-large !default;
|
||||
//** Small `.form-control` border radius
|
||||
$input-border-radius-small: $border-radius-small !default;
|
||||
|
||||
//** Border color for inputs on focus
|
||||
$input-border-focus: #fff !default;
|
||||
|
||||
//** Placeholder text color
|
||||
$input-color-placeholder: #999 !default;
|
||||
|
||||
//** Default `.form-control` height
|
||||
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
|
||||
//** Large `.form-control` height
|
||||
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
||||
//** Small `.form-control` height
|
||||
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
//** `.form-group` margin
|
||||
$form-group-margin-bottom: 15px !default;
|
||||
|
||||
$legend-color: $gray-dark !default;
|
||||
$legend-border-color: #e5e5e5 !default;
|
||||
|
||||
//** Background color for textual input addons
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
//** Border color for textual input addons
|
||||
$input-group-addon-border-color: $input-border !default;
|
||||
|
||||
//** Disabled cursor for form controls and buttons.
|
||||
$cursor-disabled: not-allowed !default;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
$dropdown-bg: #fff !default;
|
||||
//** Dropdown menu `border-color`.
|
||||
$dropdown-border: rgba(0,0,0,.15) !default;
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
$dropdown-fallback-border: #ccc !default;
|
||||
//** Divider color for between dropdown items.
|
||||
$dropdown-divider-bg: #e5e5e5 !default;
|
||||
|
||||
//** Dropdown link text color.
|
||||
$dropdown-link-color: $gray-dark !default;
|
||||
//** Hover color for dropdown links.
|
||||
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
||||
//** Hover background for dropdown links.
|
||||
$dropdown-link-hover-bg: #f5f5f5 !default;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
//** Active dropdown menu item background color.
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
$dropdown-link-disabled-color: $gray-light !default;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
$dropdown-header-color: $gray-light !default;
|
||||
|
||||
//** Deprecated `$dropdown-caret-color` as of v3.1.0
|
||||
$dropdown-caret-color: #000 !default;
|
||||
|
||||
|
||||
//-- Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
//
|
||||
// Note: These variables are not generated into the Customizer.
|
||||
|
||||
$zindex-navbar: 1000 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
$zindex-navbar-fixed: 1030 !default;
|
||||
$zindex-modal-background: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
|
||||
|
||||
//== Media queries breakpoints
|
||||
//
|
||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra small screen / phone
|
||||
//** Deprecated `$screen-xs` as of v3.0.1
|
||||
$screen-xs: 480px !default;
|
||||
//** Deprecated `$screen-xs-min` as of v3.2.0
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
//** Deprecated `$screen-phone` as of v3.0.1
|
||||
$screen-phone: $screen-xs-min !default;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `$screen-sm` as of v3.0.1
|
||||
$screen-sm: 768px !default;
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
//** Deprecated `$screen-tablet` as of v3.0.1
|
||||
$screen-tablet: $screen-sm-min !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `$screen-md` as of v3.0.1
|
||||
$screen-md: 992px !default;
|
||||
$screen-md-min: $screen-md !default;
|
||||
//** Deprecated `$screen-desktop` as of v3.0.1
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `$screen-lg` as of v3.0.1
|
||||
$screen-lg: 1200px !default;
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
$grid-gutter-width: 30px !default;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
$grid-float-breakpoint: $screen-sm-min !default;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
$container-tablet: ((750px + $grid-gutter-width)) !default;
|
||||
//** For `$screen-sm-min` and up.
|
||||
$container-sm: $container-tablet !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
$container-desktop: ((970px + $grid-gutter-width)) !default;
|
||||
//** For `$screen-md-min` and up.
|
||||
$container-md: $container-desktop !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$container-large-desktop: ((1170px + $grid-gutter-width) ) !default;
|
||||
//** For `$screen-lg-min` and up.
|
||||
$container-lg: $container-large-desktop !default;
|
||||
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-height: 50px !default;
|
||||
$navbar-margin-bottom: $line-height-computed !default;
|
||||
$navbar-border-radius: $border-radius-base !default;
|
||||
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
||||
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
|
||||
$navbar-collapse-max-height: 340px !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: #f8f8f8 !default;
|
||||
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
|
||||
|
||||
// Navbar links
|
||||
$navbar-default-link-color: #777 !default;
|
||||
$navbar-default-link-hover-color: #333 !default;
|
||||
$navbar-default-link-hover-bg: transparent !default;
|
||||
$navbar-default-link-active-color: #555 !default;
|
||||
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
|
||||
$navbar-default-link-disabled-color: #ccc !default;
|
||||
$navbar-default-link-disabled-bg: transparent !default;
|
||||
|
||||
// Navbar brand label
|
||||
$navbar-default-brand-color: $navbar-default-link-color !default;
|
||||
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
|
||||
$navbar-default-brand-hover-bg: transparent !default;
|
||||
|
||||
// Navbar toggle
|
||||
$navbar-default-toggle-hover-bg: #ddd !default;
|
||||
$navbar-default-toggle-icon-bar-bg: #888 !default;
|
||||
$navbar-default-toggle-border-color: #ddd !default;
|
||||
|
||||
|
||||
//=== Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
$navbar-inverse-color: lighten($gray-light, 15%) !default;
|
||||
$navbar-inverse-bg: #222 !default;
|
||||
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
|
||||
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
|
||||
$navbar-inverse-link-hover-color: #fff !default;
|
||||
$navbar-inverse-link-hover-bg: transparent !default;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
|
||||
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
|
||||
$navbar-inverse-link-disabled-color: #444 !default;
|
||||
$navbar-inverse-link-disabled-bg: transparent !default;
|
||||
|
||||
// Inverted navbar brand label
|
||||
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
||||
$navbar-inverse-brand-hover-color: #fff !default;
|
||||
$navbar-inverse-brand-hover-bg: transparent !default;
|
||||
|
||||
// Inverted navbar toggle
|
||||
$navbar-inverse-toggle-hover-bg: #333 !default;
|
||||
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-inverse-toggle-border-color: #333 !default;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
$nav-link-padding: 10px 15px !default;
|
||||
$nav-link-hover-bg: $gray-lighter !default;
|
||||
|
||||
$nav-disabled-link-color: $gray-light !default;
|
||||
$nav-disabled-link-hover-color: $gray-light !default;
|
||||
|
||||
//== Tabs
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter !default;
|
||||
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-color: $gray !default;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd !default;
|
||||
|
||||
$nav-tabs-justified-link-border-color: #ddd !default;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg !default;
|
||||
|
||||
//== Pills
|
||||
$nav-pills-border-radius: $border-radius-base !default;
|
||||
$nav-pills-active-link-hover-bg: $component-active-bg !default;
|
||||
$nav-pills-active-link-hover-color: $component-active-color !default;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: transparent !default;
|
||||
$pagination-border: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-lighter !default;
|
||||
$pagination-hover-border: #ddd !default;
|
||||
|
||||
$pagination-active-color: #fff !default;
|
||||
$pagination-active-bg: $brand-primary !default;
|
||||
$pagination-active-border: $brand-primary !default;
|
||||
|
||||
$pagination-disabled-color: $gray-light !default;
|
||||
$pagination-disabled-bg: #fff !default;
|
||||
$pagination-disabled-border: #ddd !default;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
$pager-bg: $pagination-bg !default;
|
||||
$pager-border: $pagination-border !default;
|
||||
$pager-border-radius: 15px !default;
|
||||
|
||||
$pager-hover-bg: $pagination-hover-bg !default;
|
||||
|
||||
$pager-active-bg: $pagination-active-bg !default;
|
||||
$pager-active-color: $pagination-active-color !default;
|
||||
|
||||
$pager-disabled-color: $pagination-disabled-color !default;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
$jumbotron-padding: 30px !default;
|
||||
$jumbotron-color: inherit !default;
|
||||
$jumbotron-bg: $gray-lighter !default;
|
||||
$jumbotron-heading-color: inherit !default;
|
||||
$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
|
||||
$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #8ac842 !default;
|
||||
$state-success-bg: #1bbc9b !default;
|
||||
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
|
||||
|
||||
$state-info-text: #31708f !default;
|
||||
$state-info-bg: #56b0ee !default;
|
||||
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
|
||||
|
||||
$state-warning-text: #8a6d3b !default;
|
||||
$state-warning-bg: #fcb53f !default;
|
||||
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
|
||||
|
||||
$state-danger-text: #a94442 !default;
|
||||
$state-danger-bg: #ff7877 !default;
|
||||
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
$tooltip-max-width: 200px !default;
|
||||
//** Tooltip text color
|
||||
$tooltip-color: #fff !default;
|
||||
//** Tooltip background color
|
||||
$tooltip-bg: $brand-primary !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
|
||||
//** Tooltip arrow width
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
//** Tooltip arrow color
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
$popover-bg: #fff !default;
|
||||
//** Popover maximum width
|
||||
$popover-max-width: 276px !default;
|
||||
//** Popover border color
|
||||
$popover-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Popover fallback border color
|
||||
$popover-fallback-border-color: #ccc !default;
|
||||
|
||||
//** Popover title background color
|
||||
$popover-title-bg: darken($popover-bg, 3%) !default;
|
||||
|
||||
//** Popover arrow width
|
||||
$popover-arrow-width: 10px !default;
|
||||
//** Popover arrow color
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
//** Popover outer arrow width
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
|
||||
//** Popover outer arrow color
|
||||
$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default;
|
||||
//** Popover outer arrow fallback color
|
||||
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
$label-default-bg: $gray-light !default;
|
||||
//** Primary label background color
|
||||
$label-primary-bg: $brand-primary !default;
|
||||
//** Success label background color
|
||||
$label-success-bg: $brand-success !default;
|
||||
//** Info label background color
|
||||
$label-info-bg: $brand-info !default;
|
||||
//** Warning label background color
|
||||
$label-warning-bg: $brand-warning !default;
|
||||
//** Danger label background color
|
||||
$label-danger-bg: $brand-danger !default;
|
||||
|
||||
//** Default label text color
|
||||
$label-color: #fff !default;
|
||||
//** Default text color of a linked label
|
||||
$label-link-hover-color: #fff !default;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
$modal-inner-padding: 20px !default;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
$modal-title-padding: 20px !default;
|
||||
//** Modal title line-height
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
//** Background color of modal content area
|
||||
$modal-content-bg: #fff !default;
|
||||
//** Modal content border color
|
||||
$modal-content-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Modal content border color **for IE8**
|
||||
$modal-content-fallback-border-color: #999 !default;
|
||||
|
||||
//** Modal backdrop background color
|
||||
$modal-backdrop-bg: #000 !default;
|
||||
//** Modal backdrop opacity
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
//** Modal header border color
|
||||
$modal-header-border-color: #e5e5e5 !default;
|
||||
//** Modal footer border color
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
|
||||
$modal-lg: 900px !default;
|
||||
$modal-md: 600px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding: 15px !default;
|
||||
$alert-border-radius: $border-radius-small !default;
|
||||
$alert-link-font-weight: bold !default;
|
||||
|
||||
$alert-success-bg: $state-success-bg !default;
|
||||
$alert-success-text: $state-success-text !default;
|
||||
$alert-success-border: $state-success-border !default;
|
||||
|
||||
$alert-info-bg: $state-info-bg !default;
|
||||
$alert-info-text: $state-info-text !default;
|
||||
$alert-info-border: $state-info-border !default;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg !default;
|
||||
$alert-warning-text: $state-warning-text !default;
|
||||
$alert-warning-border: $state-warning-border !default;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg !default;
|
||||
$alert-danger-text: $state-danger-text !default;
|
||||
$alert-danger-border: $state-danger-border !default;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
$progress-bg: #f5f5f5 !default;
|
||||
//** Progress bar text color
|
||||
$progress-bar-color: #fff !default;
|
||||
//** Variable for setting rounded corners on progress bar.
|
||||
$progress-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Default progress bar color
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
//** Success progress bar color
|
||||
$progress-bar-success-bg: $brand-success !default;
|
||||
//** Warning progress bar color
|
||||
$progress-bar-warning-bg: $brand-warning !default;
|
||||
//** Danger progress bar color
|
||||
$progress-bar-danger-bg: $brand-danger !default;
|
||||
//** Info progress bar color
|
||||
$progress-bar-info-bg: $brand-info !default;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
$list-group-bg: #fff !default;
|
||||
//** `.list-group-item` border color
|
||||
$list-group-border: #ddd !default;
|
||||
//** List group border radius
|
||||
$list-group-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
$list-group-hover-bg: #f5f5f5 !default;
|
||||
//** Text color of active list items
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
//** Background color of active list items
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
//** Border color of active list elements
|
||||
$list-group-active-border: $list-group-active-bg !default;
|
||||
//** Text color for content within active list items
|
||||
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
|
||||
|
||||
//** Text color of disabled list items
|
||||
$list-group-disabled-color: $gray-light !default;
|
||||
//** Background color of disabled list items
|
||||
$list-group-disabled-bg: $gray-lighter !default;
|
||||
//** Text color for content within disabled list items
|
||||
$list-group-disabled-text-color: $list-group-disabled-color !default;
|
||||
|
||||
$list-group-link-color: #555 !default;
|
||||
$list-group-link-hover-color: $list-group-link-color !default;
|
||||
$list-group-link-heading-color: #333 !default;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
$panel-bg: #fff !default;
|
||||
$box-content-padding: 15px !default;
|
||||
$panel-heading-padding: 10px 15px !default;
|
||||
$panel-footer-padding: $panel-heading-padding !default;
|
||||
$panel-border-radius: 0 !default;
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: #ddd !default;
|
||||
$panel-footer-bg: #f5f5f5 !default;
|
||||
|
||||
$panel-default-text: $gray-dark !default;
|
||||
$panel-default-border: #FFF !default;
|
||||
$panel-default-heading-bg: #f5f5f5 !default;
|
||||
|
||||
$panel-primary-text: #fff !default;
|
||||
$panel-primary-border: $brand-primary !default;
|
||||
$panel-primary-heading-bg: $brand-primary !default;
|
||||
|
||||
$panel-success-text: $state-success-text !default;
|
||||
$panel-success-border: $state-success-border !default;
|
||||
$panel-success-heading-bg: $state-success-bg !default;
|
||||
|
||||
$panel-info-text: $state-info-text !default;
|
||||
$panel-info-border: $state-info-border !default;
|
||||
$panel-info-heading-bg: $state-info-bg !default;
|
||||
|
||||
$panel-warning-text: $state-warning-text !default;
|
||||
$panel-warning-border: $state-warning-border !default;
|
||||
$panel-warning-heading-bg: $state-warning-bg !default;
|
||||
|
||||
$panel-danger-text: $state-danger-text !default;
|
||||
$panel-danger-border: $state-danger-border !default;
|
||||
$panel-danger-heading-bg: $state-danger-bg !default;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
$thumbnail-padding: 4px !default;
|
||||
//** Thumbnail background color
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
//** Thumbnail border color
|
||||
$thumbnail-border: #ddd !default;
|
||||
//** Thumbnail border radius
|
||||
$thumbnail-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
$thumbnail-caption-color: $text-color !default;
|
||||
//** Padding around the thumbnail caption
|
||||
$thumbnail-caption-padding: 9px !default;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
$well-bg: #f5f5f5 !default;
|
||||
$well-border: darken($well-bg, 7%) !default;
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
$badge-color: #fff !default;
|
||||
//** Linked badge text color on hover
|
||||
$badge-link-hover-color: #fff !default;
|
||||
$badge-bg: $gray-light !default;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
$badge-active-color: $link-color !default;
|
||||
//** Badge background color in active nav link
|
||||
$badge-active-bg: #fff !default;
|
||||
|
||||
$badge-font-weight: bold !default;
|
||||
$badge-line-height: 1 !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
$breadcrumb-padding-vertical: 40px !default;
|
||||
$breadcrumb-padding-horizontal: 0px !default;
|
||||
//** Breadcrumb background color
|
||||
$breadcrumb-bg: transparent !default;
|
||||
//** Breadcrumb text color
|
||||
$breadcrumb-color: #fff !default;
|
||||
//** Text color of current page in the breadcrumb
|
||||
$breadcrumb-active-color: #fff !default;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
$breadcrumb-separator: "/" !default;
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
$carousel-text-shadow: none !default;
|
||||
|
||||
$carousel-control-color: #fff !default;
|
||||
$carousel-control-width: 44px !default;
|
||||
$carousel-control-opacity: 1 !default;
|
||||
$carousel-control-font-size: 20px !default;
|
||||
|
||||
$carousel-indicator-active-bg: $brand-primary !default;
|
||||
$carousel-indicator-border-color: $brand-primary !default;
|
||||
|
||||
$carousel-caption-color: #fff !default;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
$close-font-weight: bold !default;
|
||||
$close-color: #000 !default;
|
||||
$close-text-shadow: 0 1px 0 #fff !default;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
$code-color: #c7254e !default;
|
||||
$code-bg: #f9f2f4 !default;
|
||||
|
||||
$kbd-color: #fff !default;
|
||||
$kbd-bg: #333 !default;
|
||||
|
||||
$pre-bg: #f5f5f5 !default;
|
||||
$pre-color: $gray-dark !default;
|
||||
$pre-border-color: #ccc !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
$component-offset-horizontal: 180px !default;
|
||||
//** Text muted color
|
||||
$text-muted: $gray-light !default;
|
||||
//** Abbreviations and acronyms border color
|
||||
$abbr-border-color: $gray-light !default;
|
||||
//** Headings small color
|
||||
$headings-small-color: $gray-light !default;
|
||||
//** Blockquote small color
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
//** Blockquote font size
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
//** Blockquote border color
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
//** Page header border color
|
||||
$page-header-border-color: $gray-lighter !default;
|
||||
//** Width of horizontal description list titles
|
||||
$dl-horizontal-offset: $component-offset-horizontal !default;
|
||||
//** Horizontal line color.
|
||||
$hr-border: $gray-lighter !default;
|
||||
22
assets/scss/bootstrap/mixins/_clearfix.scss
Executable file
22
assets/scss/bootstrap/mixins/_clearfix.scss
Executable file
@@ -0,0 +1,22 @@
|
||||
// Clearfix
|
||||
//
|
||||
// For modern browsers
|
||||
// 1. The space content is one way to avoid an Opera bug when the
|
||||
// contenteditable attribute is included anywhere else in the document.
|
||||
// Otherwise it causes space to appear at the top and bottom of elements
|
||||
// that are clearfixed.
|
||||
// 2. The use of `table` rather than `block` is only necessary if using
|
||||
// `:before` to contain the top-margins of child elements.
|
||||
//
|
||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " "; // 1
|
||||
display: table; // 2
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
79
assets/scss/bootstrap/mixins/_grid-framework.scss
Executable file
79
assets/scss/bootstrap/mixins/_grid-framework.scss
Executable file
@@ -0,0 +1,79 @@
|
||||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin make-grid-columns($class,$i: 1, $list: ".col-#{$class}-#{$i}") {
|
||||
@for $i from (1 + 1) through $grid-columns {
|
||||
$list: "#{$list}, .col-#{$class}-#{$i}";
|
||||
}
|
||||
#{$list} {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: ceil(($grid-gutter-width / 2));
|
||||
padding-right: floor(($grid-gutter-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
||||
@for $i from (1 + 1) through $grid-columns {
|
||||
$list: "#{$list}, .col-#{$class}-#{$i}";
|
||||
}
|
||||
#{$list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin calc-grid-column($index, $class, $type) {
|
||||
@if ($type == width) and ($index > 0) {
|
||||
.col-#{$class}-#{$index} {
|
||||
width: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == push) and ($index > 0) {
|
||||
.col-#{$class}-push-#{$index} {
|
||||
left: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == push) and ($index == 0) {
|
||||
.col-#{$class}-push-0 {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@if ($type == pull) and ($index > 0) {
|
||||
.col-#{$class}-pull-#{$index} {
|
||||
right: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == pull) and ($index == 0) {
|
||||
.col-#{$class}-pull-0 {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@if ($type == offset) {
|
||||
.col-#{$class}-offset-#{$index} {
|
||||
margin-left: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin loop-grid-columns($columns, $class, $type) {
|
||||
@for $i from 0 through $columns {
|
||||
@include calc-grid-column($i, $class, $type);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Create grid for specific class
|
||||
@mixin make-grid($class) {
|
||||
@include float-grid-columns($class);
|
||||
@include loop-grid-columns($grid-columns, $class, width);
|
||||
|
||||
}
|
||||
122
assets/scss/bootstrap/mixins/_grid.scss
Executable file
122
assets/scss/bootstrap/mixins/_grid.scss
Executable file
@@ -0,0 +1,122 @@
|
||||
// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
// Centered container element
|
||||
@mixin container-fixed($gutter: $grid-gutter-width) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
margin-left: ceil(($gutter / -2));
|
||||
margin-right: floor(($gutter / -2));
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Generate the extra small columns
|
||||
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
@mixin make-xs-column-offset($columns) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
@mixin make-xs-column-push($columns) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
@mixin make-xs-column-pull($columns) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
|
||||
// Generate the small columns
|
||||
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-offset($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-push($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-pull($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the medium columns
|
||||
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-offset($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-push($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-pull($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large columns
|
||||
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-offset($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-push($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-pull($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
8
assets/scss/bootstrap/mixins/_opacity.scss
Executable file
8
assets/scss/bootstrap/mixins/_opacity.scss
Executable file
@@ -0,0 +1,8 @@
|
||||
// Opacity
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: alpha(opacity=$opacity-ie);
|
||||
}
|
||||
6
assets/scss/bootstrap/mixins/_resize.scss
Executable file
6
assets/scss/bootstrap/mixins/_resize.scss
Executable file
@@ -0,0 +1,6 @@
|
||||
// Resize anything
|
||||
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||
}
|
||||
10
assets/scss/bootstrap/mixins/_size.scss
Executable file
10
assets/scss/bootstrap/mixins/_size.scss
Executable file
@@ -0,0 +1,10 @@
|
||||
// Sizing shortcuts
|
||||
|
||||
@mixin size($width, $height) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
222
assets/scss/bootstrap/mixins/_vendor-prefixes.scss
Executable file
222
assets/scss/bootstrap/mixins/_vendor-prefixes.scss
Executable file
@@ -0,0 +1,222 @@
|
||||
// Vendor Prefixes
|
||||
//
|
||||
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
|
||||
// Autoprefixer in our Gruntfile. They will be removed in v4.
|
||||
|
||||
// - Animations
|
||||
// - Backface visibility
|
||||
// - Box shadow
|
||||
// - Box sizing
|
||||
// - Content columns
|
||||
// - Hyphens
|
||||
// - Placeholder text
|
||||
// - Transformations
|
||||
// - Transitions
|
||||
// - User Select
|
||||
|
||||
|
||||
// Animations
|
||||
@mixin animation($animation) {
|
||||
-webkit-animation: $animation;
|
||||
-o-animation: $animation;
|
||||
animation: $animation;
|
||||
}
|
||||
@mixin animation-name($name) {
|
||||
-webkit-animation-name: $name;
|
||||
animation-name: $name;
|
||||
}
|
||||
@mixin animation-duration($duration) {
|
||||
-webkit-animation-duration: $duration;
|
||||
animation-duration: $duration;
|
||||
}
|
||||
@mixin animation-timing-function($timing-function) {
|
||||
-webkit-animation-timing-function: $timing-function;
|
||||
animation-timing-function: $timing-function;
|
||||
}
|
||||
@mixin animation-delay($delay) {
|
||||
-webkit-animation-delay: $delay;
|
||||
animation-delay: $delay;
|
||||
}
|
||||
@mixin animation-iteration-count($iteration-count) {
|
||||
-webkit-animation-iteration-count: $iteration-count;
|
||||
animation-iteration-count: $iteration-count;
|
||||
}
|
||||
@mixin animation-direction($direction) {
|
||||
-webkit-animation-direction: $direction;
|
||||
animation-direction: $direction;
|
||||
}
|
||||
@mixin animation-fill-mode($fill-mode) {
|
||||
-webkit-animation-fill-mode: $fill-mode;
|
||||
animation-fill-mode: $fill-mode;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden`
|
||||
|
||||
@mixin backface-visibility($visibility){
|
||||
-webkit-backface-visibility: $visibility;
|
||||
-moz-backface-visibility: $visibility;
|
||||
backface-visibility: $visibility;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
//
|
||||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
|
||||
// supported browsers that have box shadow capabilities now support it.
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
|
||||
-webkit-column-count: $column-count;
|
||||
-moz-column-count: $column-count;
|
||||
column-count: $column-count;
|
||||
-webkit-column-gap: $column-gap;
|
||||
-moz-column-gap: $column-gap;
|
||||
column-gap: $column-gap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
@mixin hyphens($mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: $mode;
|
||||
-moz-hyphens: $mode;
|
||||
-ms-hyphens: $mode; // IE10+
|
||||
-o-hyphens: $mode;
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
|
||||
}
|
||||
|
||||
// Transformations
|
||||
@mixin scale($ratio...) {
|
||||
-webkit-transform: scale($ratio);
|
||||
-ms-transform: scale($ratio); // IE9 only
|
||||
-o-transform: scale($ratio);
|
||||
transform: scale($ratio);
|
||||
}
|
||||
|
||||
@mixin scaleX($ratio) {
|
||||
-webkit-transform: scaleX($ratio);
|
||||
-ms-transform: scaleX($ratio); // IE9 only
|
||||
-o-transform: scaleX($ratio);
|
||||
transform: scaleX($ratio);
|
||||
}
|
||||
@mixin scaleY($ratio) {
|
||||
-webkit-transform: scaleY($ratio);
|
||||
-ms-transform: scaleY($ratio); // IE9 only
|
||||
-o-transform: scaleY($ratio);
|
||||
transform: scaleY($ratio);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skewX($x) skewY($y);
|
||||
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
-o-transform: skewX($x) skewY($y);
|
||||
transform: skewX($x) skewY($y);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y); // IE9 only
|
||||
-o-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees); // IE9 only
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin rotateX($degrees) {
|
||||
-webkit-transform: rotateX($degrees);
|
||||
-ms-transform: rotateX($degrees); // IE9 only
|
||||
-o-transform: rotateX($degrees);
|
||||
transform: rotateX($degrees);
|
||||
}
|
||||
@mixin rotateY($degrees) {
|
||||
-webkit-transform: rotateY($degrees);
|
||||
-ms-transform: rotateY($degrees); // IE9 only
|
||||
-o-transform: rotateY($degrees);
|
||||
transform: rotateY($degrees);
|
||||
}
|
||||
@mixin perspective($perspective) {
|
||||
-webkit-perspective: $perspective;
|
||||
-moz-perspective: $perspective;
|
||||
perspective: $perspective;
|
||||
}
|
||||
@mixin perspective-origin($perspective) {
|
||||
-webkit-perspective-origin: $perspective;
|
||||
-moz-perspective-origin: $perspective;
|
||||
perspective-origin: $perspective;
|
||||
}
|
||||
@mixin transform-origin($origin) {
|
||||
-webkit-transform-origin: $origin;
|
||||
-moz-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin; // IE9 only
|
||||
transform-origin: $origin;
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-property($transition-property...) {
|
||||
-webkit-transition-property: $transition-property;
|
||||
transition-property: $transition-property;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration...) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
@mixin transition-timing-function($timing-function) {
|
||||
-webkit-transition-timing-function: $timing-function;
|
||||
transition-timing-function: $timing-function;
|
||||
}
|
||||
@mixin transition-transform($transition...) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select; // IE10+
|
||||
user-select: $select;
|
||||
}
|
||||
6
assets/scss/cmb2-front.scss
Executable file
6
assets/scss/cmb2-front.scss
Executable file
@@ -0,0 +1,6 @@
|
||||
@import "bootstrap/variables";
|
||||
@import "bootstrap/mixins";
|
||||
|
||||
|
||||
@import "opalestate/vars";
|
||||
@import "cmb2/cmb2-front";
|
||||
1
assets/scss/cmb2/cmb2-display.scss
Executable file
1
assets/scss/cmb2/cmb2-display.scss
Executable file
@@ -0,0 +1 @@
|
||||
@import "partials/display";
|
||||
77
assets/scss/cmb2/cmb2-front.scss
Executable file
77
assets/scss/cmb2/cmb2-front.scss
Executable file
@@ -0,0 +1,77 @@
|
||||
@import "partials/variables";
|
||||
@import "partials/mixins";
|
||||
|
||||
|
||||
|
||||
|
||||
// uploader fields //
|
||||
.cmb2-uploader-files {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
> div{
|
||||
width: 180px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-image{
|
||||
height: 100%;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.button-placehold {
|
||||
border:dashed 1px #ebebeb;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
i{
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.button-placehold-content{
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
input.select-file{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.uploader-item-preview {
|
||||
position:relative;
|
||||
.btn-close {
|
||||
position:absolute;
|
||||
top:4px;
|
||||
right:5px;
|
||||
width:15px;
|
||||
height:15px;
|
||||
cursor:pointer;
|
||||
&:hover::before{
|
||||
color: red;
|
||||
}
|
||||
&::before{
|
||||
content: '\f00d';
|
||||
font-family: Fontawesome;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
.preview-icon{
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
|
||||
|
||||
@import "partials/main_wrap";
|
||||
@import "partials/post_metaboxes";
|
||||
@import "partials/context_metaboxes";
|
||||
@import "partials/misc";
|
||||
@import "partials/collapsible_ui";
|
||||
@import "partials/jquery_ui";
|
||||
|
||||
/**
|
||||
* CMB2 Frontend
|
||||
*/
|
||||
@import "partials/front";
|
||||
12
assets/scss/cmb2/cmb2.scss
Executable file
12
assets/scss/cmb2/cmb2.scss
Executable file
@@ -0,0 +1,12 @@
|
||||
@import "partials/variables";
|
||||
@import "partials/mixins";
|
||||
|
||||
@import "partials/main_wrap";
|
||||
@import "partials/post_metaboxes";
|
||||
@import "partials/context_metaboxes";
|
||||
@import "partials/options-page";
|
||||
@import "partials/new_term";
|
||||
@import "partials/misc";
|
||||
@import "partials/sidebar_placements";
|
||||
@import "partials/collapsible_ui";
|
||||
@import "partials/jquery_ui";
|
||||
1
assets/scss/cmb2/index.html
Executable file
1
assets/scss/cmb2/index.html
Executable file
@@ -0,0 +1 @@
|
||||
do not hack here
|
||||
2
assets/scss/cmb2/index.php
Executable file
2
assets/scss/cmb2/index.php
Executable file
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
// Silence is golden
|
||||
56
assets/scss/cmb2/partials/_collapsible_ui.scss
Executable file
56
assets/scss/cmb2/partials/_collapsible_ui.scss
Executable file
@@ -0,0 +1,56 @@
|
||||
/*--------------------------------------------------------------
|
||||
* Collapsible UI
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.cmb2-metabox {
|
||||
.cmbhandle {
|
||||
color: $gray;
|
||||
float: right;
|
||||
width: 27px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
right: -1em;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '\f142';
|
||||
right: 12px;
|
||||
font: normal 20px/1 'dashicons';
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
padding: 8px 10px;
|
||||
top: 0;
|
||||
position: relative;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox.closed {
|
||||
.cmbhandle {
|
||||
&:before {
|
||||
content: '\f140';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.dashicons-before.dashicons-no-alt.cmb-remove-group-row {
|
||||
-webkit-appearance: none !important;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: .5em;
|
||||
line-height: 1em;
|
||||
padding: 2px 6px 3px;
|
||||
opacity: .5;
|
||||
&:not([disabled]) {
|
||||
cursor: pointer;
|
||||
color: $dark-red;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
107
assets/scss/cmb2/partials/_context_metaboxes.scss
Executable file
107
assets/scss/cmb2/partials/_context_metaboxes.scss
Executable file
@@ -0,0 +1,107 @@
|
||||
/*--------------------------------------------------------------
|
||||
* Context Metaboxes
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Metabox collapse arrow indicators */
|
||||
.js .cmb2-postbox.context-box {
|
||||
|
||||
.toggle-indicator {
|
||||
&:before {
|
||||
content: "\f142";
|
||||
display: inline-block;
|
||||
font: normal 20px/1 dashicons;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
.toggle-indicator {
|
||||
&:before {
|
||||
content: "\f140";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cmb2-postbox.context-box {
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.context-before_permalink-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.context-after_title-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.context-after_editor-box {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.context-form_top-box {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
.hndle {
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.hndle {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb2-context-wrap {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
&.cmb2-context-wrap-form_top {
|
||||
margin-right: 300px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.cmb2-context-wrap-no-title {
|
||||
|
||||
.cmb2-metabox {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-th {
|
||||
padding: 0 2% 0 0;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
.cmb-td {
|
||||
width: 80%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cmb-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* one column on the post write/edit screen */
|
||||
@media only screen and (max-width: 850px) {
|
||||
|
||||
.cmb2-context-wrap.cmb2-context-wrap-form_top {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
34
assets/scss/cmb2/partials/_display.scss
Executable file
34
assets/scss/cmb2/partials/_display.scss
Executable file
@@ -0,0 +1,34 @@
|
||||
/*--------------------------------------------------------------
|
||||
* CMB2 Display Styling
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.cmb2-colorpicker-swatch {
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
float: left;
|
||||
margin-top: 3px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb2-code {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cmb-image-display {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cmb2-display-file-list li {
|
||||
display: inline;
|
||||
margin: 0 .5em .5em 0;
|
||||
}
|
||||
|
||||
.cmb2-oembed * {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
56
assets/scss/cmb2/partials/_front.scss
Executable file
56
assets/scss/cmb2/partials/_front.scss
Executable file
@@ -0,0 +1,56 @@
|
||||
/*--------------------------------------------------------------
|
||||
* CMB2 Frontend
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.closed .inside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cmb-repeatable-grouping {
|
||||
position: relative;
|
||||
|
||||
.cmb-group-title {
|
||||
margin-left: -1em;
|
||||
margin-right: -1em;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cmb-repeatable-group {
|
||||
|
||||
&.repeatable .cmb-group-title {
|
||||
padding-left: 2.2em;
|
||||
}
|
||||
|
||||
&.non-repeatable .cmb-group-title {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cmb-type-group .cmb-row .cmbhandle {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cmb-spinner {
|
||||
background: url(images/spinner.gif) no-repeat;
|
||||
-webkit-background-size: 20px 20px;
|
||||
background-size: 20px 20px;
|
||||
display: none;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
opacity: 0.7;
|
||||
filter: alpha(opacity=70);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 4px 10px 0;
|
||||
}
|
||||
457
assets/scss/cmb2/partials/_jquery_ui.scss
Executable file
457
assets/scss/cmb2/partials/_jquery_ui.scss
Executable file
@@ -0,0 +1,457 @@
|
||||
/*
|
||||
* jQuery UI CSS Framework 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Theming/API
|
||||
*
|
||||
* WordPress Styles adopted from "jQuery UI Datepicker CSS for WordPress"
|
||||
* https://github.com/stuttter/wp-datepicker-styling
|
||||
*
|
||||
*/
|
||||
|
||||
* html .cmb2-element.ui-helper-clearfix {
|
||||
height:1%;
|
||||
}
|
||||
|
||||
$weekend: #f4f4f4;
|
||||
$freshblue: #00a0d2;
|
||||
$freshdark: #32373c;
|
||||
$freshdarkblue: #0073aa;
|
||||
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-top: none;
|
||||
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
|
||||
min-width: 17em;
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background-image: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ui-datepicker-header .ui-state-hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-datepicker-title {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
|
||||
select {
|
||||
margin-top: -8px;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.ui-state-hover.ui-datepicker-prev,
|
||||
.ui-state-hover.ui-datepicker-next {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-prev-hover {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui-datepicker-next,
|
||||
.ui-datepicker-next-hover {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui-datepicker-next span,
|
||||
.ui-datepicker-prev span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ui-datepicker-next {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev:before,
|
||||
.ui-datepicker-next:before {
|
||||
font: normal 20px/34px 'dashicons';
|
||||
padding-left: 7px;
|
||||
color: #fff;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev:before {
|
||||
content: '\f341';
|
||||
}
|
||||
|
||||
.ui-datepicker-next:before {
|
||||
content: '\f345';
|
||||
}
|
||||
|
||||
.ui-datepicker-prev-hover:before,
|
||||
.ui-datepicker-next-hover:before {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
select.ui-datepicker-month,
|
||||
select.ui-datepicker-year {
|
||||
width: 33%;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
option {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
th {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
border: 1px solid $weekend;
|
||||
}
|
||||
|
||||
td.ui-datepicker-other-month {
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
td.ui-datepicker-week-end {
|
||||
background-color: $weekend;
|
||||
border: 1px solid $weekend;
|
||||
&.ui-datepicker-today {
|
||||
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
td.ui-datepicker-today {
|
||||
background-color: #f0f0c0;
|
||||
}
|
||||
|
||||
td.ui-datepicker-current-day {
|
||||
background: #bbdd88;
|
||||
}
|
||||
|
||||
td .ui-state-default {
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
font-weight: normal;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
td.ui-state-disabled .ui-state-default {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Default Color Scheme */
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: $freshblue;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $freshdark;
|
||||
}
|
||||
|
||||
td .ui-state-hover, td .ui-state-active {
|
||||
background: $freshdarkblue;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-timepicker-div {
|
||||
font-size: 14px;
|
||||
dl {
|
||||
text-align: left;
|
||||
padding: 0 .6em;
|
||||
dt {
|
||||
float: left;
|
||||
clear:left;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
dd {
|
||||
margin: 0 10px 10px 40%;
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .ui-datepicker-buttonpane {
|
||||
padding: .6em;
|
||||
text-align: left;
|
||||
|
||||
.button-primary, .button-secondary {
|
||||
padding: 0 10px 1px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin: 0 .6em .4em .4em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.admin-color-fresh {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: $freshblue;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $freshdark;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: $freshdarkblue;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-blue {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #52accc;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #4796b3;
|
||||
}
|
||||
|
||||
// td .ui-state-hover {
|
||||
// background: #096484;
|
||||
// }
|
||||
|
||||
td {
|
||||
.ui-state-hover, .ui-state-active {
|
||||
background: #096484;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.ui-datepicker-today {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.admin-color-coffee {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #59524c;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #46403c;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #c7a589;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-ectoplasm {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #523f6d;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #413256;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #a3b745;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-midnight {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #363b3f;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #26292c;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #e14d43;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-ocean {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #738e96;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #627c83;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #9ebaa0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-sunrise {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header,
|
||||
.ui-datepicker-header .ui-state-hover {
|
||||
background: #cf4944;
|
||||
}
|
||||
|
||||
th {
|
||||
border-color: #be3631;
|
||||
background: #be3631;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #dd823b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-light {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
select.ui-datepicker-month,
|
||||
select.ui-datepicker-year {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.ui-datepicker-title,
|
||||
td .ui-state-default,
|
||||
.ui-datepicker-prev:before,
|
||||
.ui-datepicker-next:before {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
td {
|
||||
.ui-state-hover, .ui-state-active {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
&.ui-datepicker-today {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-bbp-evergreen {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #56b274;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #36533f;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #446950;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-color-bbp-mint {
|
||||
.cmb2-element.ui-datepicker, .cmb2-element .ui-datepicker {
|
||||
.ui-widget-header,
|
||||
.ui-datepicker-header {
|
||||
background: #4ca26a;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #4f6d59;
|
||||
}
|
||||
|
||||
td .ui-state-hover {
|
||||
background: #5fb37c;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
678
assets/scss/cmb2/partials/_main_wrap.scss
Executable file
678
assets/scss/cmb2/partials/_main_wrap.scss
Executable file
@@ -0,0 +1,678 @@
|
||||
/*--------------------------------------------------------------
|
||||
* Main Wrap
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.cmb2-wrap {
|
||||
margin: 0;
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-size: $font-size;
|
||||
max-width: 100%;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
|
||||
&.cmb2-oembed {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 500px;
|
||||
|
||||
&.cmb2-textarea-code {
|
||||
font-family: $font-mono;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
&.cmb2-text-small,
|
||||
&.cmb2-timepicker {
|
||||
width: 100px;
|
||||
// margin-right: 15px
|
||||
}
|
||||
|
||||
&.cmb2-text-money {
|
||||
width: 90px;
|
||||
// margin-right: 15px
|
||||
}
|
||||
|
||||
&.cmb2-text-medium {
|
||||
width: 230px;
|
||||
// margin-right: 15px
|
||||
}
|
||||
|
||||
&.cmb2-upload-file {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
&.ed_button {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
&:not([type="hidden"]) {
|
||||
+ input,
|
||||
+ .button-secondary,
|
||||
+ select {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: $font-size;
|
||||
line-height: 16px;
|
||||
margin: 1px 0 5px 0;
|
||||
}
|
||||
|
||||
// .cmb-field-list .cmb-field-list {
|
||||
// padding-top:5px;
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
select {
|
||||
font-size: $font-size;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
background: $light-yellow;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin: 0 5px 0 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 0 5px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: #555;
|
||||
border-color: #cccccc;
|
||||
background: #f7f7f7;
|
||||
box-shadow: 0 1px 0 #cccccc;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
padding: 0 10px 1px;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
&:hover{
|
||||
background: #fafafa;
|
||||
border-color: #999;
|
||||
color: #23282d;
|
||||
}
|
||||
}
|
||||
|
||||
.mceLayout {
|
||||
border: 1px solid $light-gray !important;
|
||||
}
|
||||
|
||||
.mceIframeContainer {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.meta_mce {
|
||||
width: 97%;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.field-row-2{
|
||||
margin: 0 -15px;
|
||||
&::after{
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.cmb-row{
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
@media screen and (min-width:768px) {
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// Color picker
|
||||
.wp-color-result,
|
||||
.wp-picker-input-wrap {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wp-color-result,
|
||||
.wp-picker-container {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.cmb-row {
|
||||
margin: 0;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.cmb-repeat .cmb2-metabox-description {
|
||||
padding-top: 0;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cmb2-metabox {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
|
||||
> .cmb-row:first-of-type >,
|
||||
.cmb-field-list > .cmb-row:first-of-type > {
|
||||
.cmb-td,
|
||||
.cmb-th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-add-row {
|
||||
margin: 1.8em 0 0;
|
||||
}
|
||||
|
||||
.cmb-nested .cmb-td,
|
||||
.cmb-repeatable-group .cmb-th,
|
||||
.cmb-repeatable-group:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cmb-row:last-of-type,
|
||||
.cmb2-wrap .cmb-row:last-of-type,
|
||||
.cmb-repeatable-group:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.cmb-repeatable-grouping {
|
||||
border: 1px solid $light-gray;
|
||||
padding: 0 1em;
|
||||
|
||||
&.cmb-row {
|
||||
margin: 0 0 0.8em;
|
||||
}
|
||||
|
||||
+ .cmb-repeatable-grouping {
|
||||
}
|
||||
}
|
||||
$headings-color: #0a1938;
|
||||
.cmb-th {
|
||||
color: $headings-color;
|
||||
float: left;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
padding: 20px 10px 20px 0;
|
||||
vertical-align: top;
|
||||
width: 200px;
|
||||
|
||||
@media (max-width: $mobile-break) {
|
||||
@include fullth;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-td {
|
||||
line-height: 1.3;
|
||||
max-width: 100%;
|
||||
padding: 15px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cmb-type-title {
|
||||
|
||||
.cmb-td {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-th label {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.cmb-th + .cmb-td {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cmb-td .cmb-td {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.cmb-remove-row {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.empty-row.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Repeatable fields styles
|
||||
.cmb-repeat-table {
|
||||
background-color: $almostwhite;
|
||||
border: 1px solid darken($light-gray, 3%);
|
||||
|
||||
.cmb-row.cmb-repeat-row {
|
||||
position: relative;
|
||||
counter-increment: el;
|
||||
|
||||
margin: 0;
|
||||
padding: 10px 10px 10px 50px;
|
||||
border-bottom: none !important; // Sometime, we need !important :).
|
||||
|
||||
& + .cmb-repeat-row {
|
||||
border-top: solid 1px $light-gray;
|
||||
}
|
||||
|
||||
&.ui-sortable-helper {
|
||||
outline: dashed 2px $light-gray !important; // Sometime, we need !important :).
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: counter(el);
|
||||
display: block;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
width: 35px;
|
||||
height: 100%;
|
||||
line-height: 35px;
|
||||
cursor: move;
|
||||
color: $gray;
|
||||
text-align: center;
|
||||
border-right: solid 1px $light-gray;
|
||||
}
|
||||
|
||||
.cmb-td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+ .cmb-add-row {
|
||||
margin: 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 1.6em;
|
||||
display: block;
|
||||
margin-left: 17px;
|
||||
background-color: darken($light-gray, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-remove-row {
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
position: absolute;
|
||||
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
padding: 0 !important; // Sometime, we need !important :).
|
||||
|
||||
display: none;
|
||||
|
||||
> .cmb-remove-row-button {
|
||||
font-size: 20px;
|
||||
text-indent: -1000px;
|
||||
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0 10px 0;
|
||||
|
||||
&:before {
|
||||
@include pseudo-dashicons("\f335");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-repeat-row:hover .cmb-remove-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cmb-repeatable-group {
|
||||
|
||||
.cmb-th {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.cmb-group-title {
|
||||
background-color: $light-gray;
|
||||
padding: 8px 12px 8px 2.2em;
|
||||
margin: 0 -1em;
|
||||
min-height: 1.5em;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
|
||||
h4 {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
|
||||
.cmb-th {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-group-description .cmb-th {
|
||||
@include fullth;
|
||||
}
|
||||
|
||||
.cmb-shift-rows {
|
||||
font-size: 1em;
|
||||
margin-right: 1em;
|
||||
text-decoration: none;
|
||||
|
||||
.dashicons {
|
||||
font-size: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.2em;
|
||||
width: 1em;
|
||||
|
||||
&.dashicons-arrow-down-alt2 {
|
||||
line-height: 1.3em;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmb2-upload-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
p.cmb2-metabox-description {
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
span.cmb2-metabox-description {
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cmb2-metabox-title {
|
||||
margin: 0 0 5px 0;
|
||||
padding: 5px 0 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cmb-inline ul {
|
||||
padding: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.cmb-inline li {
|
||||
display: inline-block;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.cmb-type-textarea-code pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cmb2-media-status {
|
||||
|
||||
.img-status {
|
||||
clear: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
|
||||
img {
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.img-status img,
|
||||
.embed-status {
|
||||
background: $lightchecker;
|
||||
border: 5px solid $white;
|
||||
outline: 1px solid $light-gray;
|
||||
box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.3 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
|
||||
background-image: linear-gradient(45deg, $darkchecker 25%, transparent 25%, transparent 75%, $darkchecker 75%, $darkchecker), linear-gradient(45deg, $darkchecker 25%, transparent 25%, transparent 75%, $darkchecker 75%, $darkchecker);
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
.embed-status {
|
||||
float: left;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.img-status, .embed-status {
|
||||
position: relative;
|
||||
|
||||
.cmb2-remove-file-button {
|
||||
background: url(../images/ico-delete.png);
|
||||
height: 16px;
|
||||
left: -5px;
|
||||
position: absolute;
|
||||
text-indent: -9999px;
|
||||
top: -5px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img-status {
|
||||
|
||||
.cmb2-remove-file-button {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-status img, .file-status > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.cmb-attach-list {
|
||||
.img-status img, .file-status > span {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cmb-type-file-list .cmb2-media-status .img-status {
|
||||
clear: none;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cmb-attach-list li {
|
||||
clear: both;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb2-remove-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.child-cmb2 .cmb-th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cmb2-indented-hierarchy {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-break) {
|
||||
.cmb-th,
|
||||
.cmb-td,
|
||||
.cmb-th + .cmb-td {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.opalestate-submission-form {
|
||||
position: relative;
|
||||
.cmb-td{
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.cmb-th{
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
padding-top: 15px;
|
||||
label{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
span.cmb2-metabox-description{
|
||||
padding-top: .5em;
|
||||
display: block;
|
||||
}
|
||||
.cmb2-wrap{
|
||||
input.cmb2-text-medium, input.cmb2-text-small{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.opalestate-tab-content{
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.submission-next-btn{
|
||||
@media screen and (min-width:768px){
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.btn-submit-cmb{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
padding: 19px 25px 17px 20px;
|
||||
@media screen and (max-width:767px){
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
&::before{
|
||||
content: "\f138";
|
||||
font-family: Fontawesome;
|
||||
margin-right: 18px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&::after{
|
||||
content: "";
|
||||
width: 52px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
.submission-back-btn,.submission-next-btn,.submission-next-btn{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.cmb-repeatable-group{
|
||||
.cmb-group-title{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.cmb2-metabox{
|
||||
button.dashicons-before.dashicons-no-alt.cmb-remove-group-row{
|
||||
top: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-type-group{
|
||||
.field-row-2{
|
||||
.cmb-row{
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.cmb-row{
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
&.postbox{
|
||||
padding-top: 0;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
.cmb-th{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
float: none;
|
||||
& + .cmb-td{
|
||||
width: 100%;
|
||||
float: none;
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
29
assets/scss/cmb2/partials/_misc.scss
Executable file
29
assets/scss/cmb2/partials/_misc.scss
Executable file
@@ -0,0 +1,29 @@
|
||||
/*--------------------------------------------------------------
|
||||
* Misc.
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#poststuff .cmb-repeatable-group h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.edit-tags-php,
|
||||
.profile-php,
|
||||
.user-edit-php {
|
||||
.cmb2-metabox-title {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb2-postbox, .cmb2-no-box-wrap {
|
||||
.cmb-spinner {
|
||||
float: left;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-spinner {
|
||||
display: none;
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
51
assets/scss/cmb2/partials/_mixins.scss
Executable file
51
assets/scss/cmb2/partials/_mixins.scss
Executable file
@@ -0,0 +1,51 @@
|
||||
//--------------------------------------------------------------
|
||||
// Mixins
|
||||
//--------------------------------------------------------------
|
||||
|
||||
@mixin fullth() {
|
||||
font-size: 1.2em;
|
||||
@include _fullth;
|
||||
}
|
||||
|
||||
@mixin fullth_side() {
|
||||
|
||||
@include _fullth;
|
||||
|
||||
label {
|
||||
font-size: $font-size;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _fullth() {
|
||||
display: block;
|
||||
float: none;
|
||||
padding-bottom: 1em;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pseudo-dashicons( $glyph: "\f333" ) {
|
||||
content: $glyph;
|
||||
font-family: 'Dashicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
31
assets/scss/cmb2/partials/_new_term.scss
Executable file
31
assets/scss/cmb2/partials/_new_term.scss
Executable file
@@ -0,0 +1,31 @@
|
||||
/*--------------------------------------------------------------
|
||||
* New-Term Page
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#addtag {
|
||||
.cmb-th {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.cmb-td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cmb-th + .cmb-td {
|
||||
float: none;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cmb2-metabox {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.cmb-row li label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
71
assets/scss/cmb2/partials/_options-page.scss
Executable file
71
assets/scss/cmb2/partials/_options-page.scss
Executable file
@@ -0,0 +1,71 @@
|
||||
/*--------------------------------------------------------------
|
||||
* Options page
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.cmb2-options-page {
|
||||
max-width: 1200px;
|
||||
|
||||
&.wrap > h2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.cmb2-metabox > .cmb-row {
|
||||
padding: 1em;
|
||||
margin-top: -1px;
|
||||
background: $white;
|
||||
border: 1px solid $light-gray;
|
||||
box-shadow: 0 1px 1px rgba(black, 0.05);
|
||||
|
||||
> .cmb-th {
|
||||
padding: 0;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
> .cmb-th + .cmb-td {
|
||||
float: none;
|
||||
padding: 0 0 0 1em;
|
||||
margin-left: 200px;
|
||||
|
||||
@media (max-width: $mobile-break) {
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title field style.
|
||||
.cmb2-wrap .cmb-type-title {
|
||||
margin-top: 1em;
|
||||
padding: 0.6em 1em;
|
||||
background-color: $almostwhite;
|
||||
|
||||
.cmb2-metabox-title {
|
||||
font-size: 12px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cmb2-metabox-description {
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-repeatable-group {
|
||||
.cmb-group-description .cmb-th {
|
||||
padding: 0 0 0.8em 0;
|
||||
}
|
||||
|
||||
.cmb-group-name {
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cmb-th > .cmb2-metabox-description {
|
||||
font-weight: 400;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
84
assets/scss/cmb2/partials/_post_metaboxes.scss
Executable file
84
assets/scss/cmb2/partials/_post_metaboxes.scss
Executable file
@@ -0,0 +1,84 @@
|
||||
/*--------------------------------------------------------------
|
||||
* Post Metaboxes
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#poststuff .cmb-group-title {
|
||||
margin-left: -1em;
|
||||
margin-right: -1em;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
#poststuff .repeatable .cmb-group-title {
|
||||
padding-left: 2.2em;
|
||||
}
|
||||
|
||||
.cmb2-postbox, .cmb-type-group {
|
||||
|
||||
.cmb2-wrap {
|
||||
margin: 0;
|
||||
|
||||
> .cmb-field-list > .cmb-row {
|
||||
padding: 1.8em 0;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
|
||||
&.cmb2-oembed {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-row {
|
||||
padding: 0 0 1.8em;
|
||||
margin: 0 0 0.8em;
|
||||
|
||||
.cmbhandle {
|
||||
right: -1em;
|
||||
position: relative;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-repeatable-grouping {
|
||||
padding: 0 1em;
|
||||
max-width: 100%;
|
||||
min-width: 1px !important;
|
||||
}
|
||||
|
||||
.cmb-repeatable-group > .cmb-row {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cmb-th {
|
||||
width: 18%;
|
||||
padding: 0 2% 0 0;
|
||||
// text-align: right;
|
||||
}
|
||||
|
||||
.cmb-td {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.cmb-th + .cmb-td {
|
||||
width: 80%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.cmb-row:not(:last-of-type),
|
||||
.cmb-repeatable-group:not(:last-of-type) {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
|
||||
@media (max-width: $mobile-break) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb-repeat-group-field,
|
||||
.cmb-remove-field-row {
|
||||
padding-top: 1.8em;
|
||||
}
|
||||
|
||||
}
|
||||
0
assets/scss/cmb2/partials/_sidebar_placements.scss
Executable file
0
assets/scss/cmb2/partials/_sidebar_placements.scss
Executable file
25
assets/scss/cmb2/partials/_variables.scss
Executable file
25
assets/scss/cmb2/partials/_variables.scss
Executable file
@@ -0,0 +1,25 @@
|
||||
//--------------------------------------------------------------
|
||||
// Variables
|
||||
//--------------------------------------------------------------
|
||||
|
||||
// Mobile break-point
|
||||
$mobile-break : 450px;
|
||||
|
||||
// Fonts
|
||||
$font-sans : sans-serif;
|
||||
$font-serif : Georgia, Times, "Times New Roman", serif;
|
||||
$font-mono : "Courier 10 Pitch", Courier, monospace;
|
||||
$font-size : 14px;
|
||||
|
||||
// Colors
|
||||
$dark-gray : #222222;
|
||||
$gray : #757575;
|
||||
$light-gray : #e9e9e9;
|
||||
$lightchecker : #eee;
|
||||
$darkchecker : #d0d0d0;
|
||||
$blue : #0063ce;
|
||||
$light-yellow : #fffff8;
|
||||
$white : #ffffff;
|
||||
$almostwhite : #fafafa;
|
||||
$red : #f00;
|
||||
$dark-red : #a00;
|
||||
2
assets/scss/cmb2/partials/index.php
Executable file
2
assets/scss/cmb2/partials/index.php
Executable file
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
// Silence is golden
|
||||
0
assets/scss/components/_grid.scss
Executable file
0
assets/scss/components/_grid.scss
Executable file
6
assets/scss/components/_mixins.scss
Executable file
6
assets/scss/components/_mixins.scss
Executable file
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Import component variables
|
||||
*/
|
||||
@import 'mixins/rtl';
|
||||
@import 'mixins/functions';
|
||||
@import 'mixins/template-mixins';
|
||||
32
assets/scss/components/_variables.scss
Executable file
32
assets/scss/components/_variables.scss
Executable file
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
* Global variables
|
||||
*/
|
||||
$image-theme-path : '../images/' !default;
|
||||
$image-theme-skin : '../images/' !default;
|
||||
// standard colors
|
||||
$white : #FFF !default;
|
||||
$black : #000 !default;
|
||||
$nocolor : transparent !default;
|
||||
|
||||
|
||||
// color for default theme
|
||||
$theme-color : #ef114c !default; /* main color which will be used for all main block styles... */
|
||||
$border-color : #ebebeb !default;
|
||||
|
||||
|
||||
$theme-color-second : #233354 !default;
|
||||
$theme-color-default : $theme-color !default;
|
||||
$theme-color-hover : #ff8106 !default;
|
||||
$theme-color-secondary : #da8664 !default;
|
||||
$link-color : #000 !default;
|
||||
|
||||
$header-bg-color : $brand-info;
|
||||
$footer-color : #000000;
|
||||
|
||||
|
||||
// Theme Margin, Padding
|
||||
// -------------------------
|
||||
$theme-margin : 30px !default;
|
||||
$theme-padding : 30px !default;
|
||||
// fonts
|
||||
$font-family-second : $font-family-base !default;
|
||||
699
assets/scss/components/mixins/_functions.scss
Executable file
699
assets/scss/components/mixins/_functions.scss
Executable file
@@ -0,0 +1,699 @@
|
||||
// Functions
|
||||
// --------------------------------------------------
|
||||
|
||||
// Position mixin
|
||||
//==========================================
|
||||
// @param [string] $position: position type
|
||||
// @param [list] $args: list of offsets and values
|
||||
//==========================================
|
||||
@mixin position($position, $args) {
|
||||
@each $o in top right bottom left {
|
||||
$i: index($args, $o);
|
||||
@if $i
|
||||
and $i + 1 <= length($args)
|
||||
and type-of( nth($args, $i + 1) ) == number {
|
||||
#{$o}: nth($args, $i + 1);
|
||||
}
|
||||
}
|
||||
position: $position;
|
||||
}
|
||||
|
||||
|
||||
// Absolute positioning mixin
|
||||
//==========================================
|
||||
// @param [list] $args: list of offsets and values
|
||||
//==========================================
|
||||
@mixin absolute($args) {
|
||||
@include position(absolute, $args);
|
||||
}
|
||||
|
||||
// Arrow mixin
|
||||
//==========================================
|
||||
// @param [string] $direction: arrow direction
|
||||
// @param [list] $position: list of offsets and values
|
||||
// @param [color] $color (inherit): arrow color
|
||||
// @param [number] $size (1em): arrow size
|
||||
//==========================================
|
||||
@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
|
||||
// Make sure the direction is valid
|
||||
@if not index(top right bottom left, $direction) {
|
||||
@warn "Direction must be one of top, right, bottom or left.";
|
||||
}
|
||||
|
||||
@else {
|
||||
@include absolute($position); // Position
|
||||
@include square(0); // Size
|
||||
content: '';
|
||||
z-index: 2;
|
||||
|
||||
border-#{opposite-position($direction)}: $size * 1.25 solid $color;
|
||||
$perpendicular-borders: $size solid transparent;
|
||||
|
||||
@if $direction == top or $direction == bottom {
|
||||
border-left: $perpendicular-borders;
|
||||
border-right: $perpendicular-borders;
|
||||
}
|
||||
|
||||
@else if $direction == right or $direction == left {
|
||||
border-bottom: $perpendicular-borders;
|
||||
border-top: $perpendicular-borders;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Font size - rem
|
||||
//==========================================
|
||||
|
||||
@function parseInt($n) { /* 2 */
|
||||
@return $n / ($n * 0 + 1);
|
||||
}
|
||||
|
||||
@mixin font-size($property, $values) {
|
||||
$px : (); /* 3 */
|
||||
$rem: (); /* 3 */
|
||||
|
||||
@each $value in $values { /* 4 */
|
||||
|
||||
@if $value == 0 or $value == auto { /* 5 */
|
||||
$px : append($px , $value);
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
|
||||
@else {
|
||||
$unit: unit($value); /* 6 */
|
||||
$val: parseInt($value); /* 6 */
|
||||
|
||||
@if $unit == "px" { /* 7 */
|
||||
$px : append($px, $value);
|
||||
$rem: append($rem, ($val / 10 + rem));
|
||||
}
|
||||
|
||||
@if $unit == "rem" { /* 7 */
|
||||
$px : append($px, ($val * 10 + px));
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $px == $rem { /* 8 */
|
||||
#{$property}: $px; /* 9 */
|
||||
} @else {
|
||||
#{$property}: $px; /* 9 */
|
||||
#{$property}: $rem; /* 9 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//== Border
|
||||
//==========================================
|
||||
@mixin border( $coordinates: 0 0 0 0, $colour: $border-color, $style: solid ) {
|
||||
$top: nth($coordinates, 1);
|
||||
$right: nth($coordinates, 2);
|
||||
$bottom: nth($coordinates, 3);
|
||||
$left: nth($coordinates, 4);
|
||||
@if not(unitless($top)) {
|
||||
border-top: $top $style $colour;
|
||||
}
|
||||
@if not(unitless($right)) {
|
||||
border-right: $right $style $colour;
|
||||
}
|
||||
@if not(unitless($bottom)) {
|
||||
border-bottom: $bottom $style $colour;
|
||||
}
|
||||
@if not(unitless($left)) {
|
||||
border-left: $left $style $colour;
|
||||
}
|
||||
}
|
||||
|
||||
// State and hover
|
||||
//==========================================
|
||||
@mixin state-hover-default($time, $background, $border-color){
|
||||
@include transition(all $time);
|
||||
&:hover{
|
||||
background: $background;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin state-hover($time,$height,$color){
|
||||
@include box-shadow(inset 0 0 0 0 $color);
|
||||
@include transition(all $time cubic-bezier(0.8,0,0,1));
|
||||
&:hover{
|
||||
@include transition(all $time cubic-bezier(0.8,0,0,1));
|
||||
@include box-shadow(inset 0 (-$height) 0 0 $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin state-hover-2($background){
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
z-index: -50;
|
||||
background-color: $background;
|
||||
visibility: hidden;
|
||||
@include scale(0);
|
||||
@include vertical-center(100%,100%);
|
||||
@include opacity(0);
|
||||
@include transition-delay(0.3s,0s);
|
||||
@include transition(transform 0s cubic-bezier(0.19,1,0.22,1) 0.3s,opacity 0.3s cubic-bezier(0.19,1,0.22,1));
|
||||
}
|
||||
&:hover{
|
||||
&:after{
|
||||
visibility: visible;
|
||||
@include scale(1);
|
||||
@include opacity(1);
|
||||
@include transition(transform 0.6s cubic-bezier(0.19,1,0.22,1),opacity 0.5s cubic-bezier(0.19,1,0.22,1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//== Flexible Layout
|
||||
//==========================================
|
||||
|
||||
@mixin flexbox {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
%flexbox {
|
||||
@include flexbox;
|
||||
}
|
||||
|
||||
@mixin inline-flex {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
%inline-flex {
|
||||
@include inline-flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Retina Sprite Mixins
|
||||
|
||||
@mixin retina-sprite-background($url,$position,$width,$height){
|
||||
background-repeat: no-repeat;
|
||||
background-image: url($url);
|
||||
background-position: $position;
|
||||
width:$width;
|
||||
height:$height;
|
||||
}
|
||||
|
||||
/** elements mixins **/
|
||||
|
||||
@mixin border-exclude-top($border-deep, $border-type , $border-color ){
|
||||
border-bottom: $border-deep $border-type $border-color ;
|
||||
border-left: $border-deep $border-type $border-color ;
|
||||
border-right: $border-deep $border-type $border-color ;
|
||||
}
|
||||
|
||||
@mixin border-exclude-bottom($border-deep, $border-type , $border-color ){
|
||||
border-top: $border-deep $border-type $border-color ;
|
||||
border-left: $border-deep $border-type $border-color ;
|
||||
border-right: $border-deep $border-type $border-color ;
|
||||
}
|
||||
|
||||
@mixin border-exclude-left($border-deep, $border-type , $border-color ){
|
||||
border-top: $border-deep $border-type $border-color ;
|
||||
border-bottom: $border-deep $border-type $border-color ;
|
||||
border-right: $border-deep $border-type $border-color ;
|
||||
}
|
||||
|
||||
@mixin border-exclude-right($border-deep, $border-type , $border-color ){
|
||||
border-top: $border-deep $border-type $border-color ;
|
||||
border-bottom: $border-deep $border-type $border-color ;
|
||||
border-left: $border-deep $border-type $border-color ;
|
||||
}
|
||||
|
||||
@mixin rounded-corners ($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
-o-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin clearboxstyle(){
|
||||
background: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
@mixin clearfloat(){
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@mixin transform-style($transform-style){
|
||||
-webkit-transform-style: $transform-style;
|
||||
-moz-transform-style: $transform-style;
|
||||
-ms-transform-style: $transform-style;
|
||||
-o-transform-style: $transform-style;
|
||||
transform-style: $transform-style;
|
||||
}
|
||||
|
||||
@mixin backface-visibility($backface-visibility){
|
||||
backface-visibility: $backface-visibility; /* W3C */
|
||||
-webkit-backface-visibility: $backface-visibility; /* Safari & Chrome */
|
||||
-moz-backface-visibility: $backface-visibility; /* Firefox */
|
||||
-ms-backface-visibility: $backface-visibility; /* Internet Explorer */
|
||||
-o-backface-visibility: $backface-visibility; /* Opera */
|
||||
}
|
||||
|
||||
@mixin animation-theme($animation-duration, $animation-fill-mode, $animation-name){
|
||||
-webkit-animation-duration: $animation-duration;
|
||||
-moz-animation-duration: $animation-duration;
|
||||
-ms-animation-duration: $animation-duration;
|
||||
-o-animation-duration: $animation-duration;
|
||||
animation-duration: $animation-duration;
|
||||
|
||||
-webkit-animation-fill-mode: $animation-fill-mode;
|
||||
-moz-animation-fill-mode: $animation-fill-mode;
|
||||
-ms-animation-fill-mode: $animation-fill-mode;
|
||||
-o-animation-fill-mode: $animation-fill-mode;
|
||||
animation-fill-mode: $animation-fill-mode;
|
||||
|
||||
-webkit-animation-name: $animation-name;
|
||||
-moz-animation-name: $animation-name;
|
||||
-ms-animation-name: $animation-name;
|
||||
-o-animation-name: $animation-name;
|
||||
animation-name: $animation-name;
|
||||
}
|
||||
|
||||
@mixin perspective($perspective){
|
||||
-webkit-perspective: $perspective;
|
||||
-ms-perspective: $perspective;
|
||||
-moz-perspective: $perspective;
|
||||
-o-perspective: $perspective;
|
||||
perspective: $perspective;
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition-timing-function property@mixin
|
||||
*/
|
||||
@mixin transition-timing-function($timing-function) {
|
||||
-moz-transition-timing-function: $timing-function;
|
||||
-o-transition-timing-function: $timing-function;
|
||||
-webkit-transition-timing-function: $timing-function;
|
||||
transition-timing-function: $timing-function;
|
||||
}
|
||||
|
||||
|
||||
@mixin appearance($appearance){
|
||||
appearance: $arguments;
|
||||
-moz-appearance: $arguments;
|
||||
-ms-appearance: $arguments;
|
||||
-o-appearance: $arguments;
|
||||
-webkit-appearance: $arguments;
|
||||
}
|
||||
|
||||
|
||||
/*background RGBA
|
||||
============================================*/
|
||||
@mixin rgba($colour, $alpha)
|
||||
{
|
||||
$alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
|
||||
$ieAlphaColour: argb($alphaColour);
|
||||
background-color: $colour;
|
||||
background-color: $alphaColour;
|
||||
zoom: 1;
|
||||
background-color: transparent\9;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin border-rgba($colour, $alpha)
|
||||
{
|
||||
$alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
|
||||
$ieAlphaColour: argb($alphaColour);
|
||||
border-color: $colour;
|
||||
border-color: $alphaColour;
|
||||
zoom: 1;
|
||||
border-color: transparent\9;
|
||||
|
||||
}
|
||||
|
||||
//copyright
|
||||
|
||||
//sub heading (h2,h3) define
|
||||
@mixin sub-heading {
|
||||
@include rtl-float-left();
|
||||
color: $block-heading-color;
|
||||
text-transform: uppercase;
|
||||
font: 600 14px/20px $font-custom;
|
||||
padding: 8px 15px;
|
||||
margin: 0 0 20px;
|
||||
min-width: 120px;
|
||||
position: relative;
|
||||
background: $theme-bg-default;
|
||||
}
|
||||
@mixin sub-heading-before {
|
||||
height: 0;
|
||||
width: 0;
|
||||
@include rtl-right(45%);
|
||||
top: 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 4px solid transparent;
|
||||
border-top-color: $theme-bg-default;
|
||||
}
|
||||
|
||||
//background
|
||||
@mixin background-hover {
|
||||
color: $base-text-color;
|
||||
background: rgba(228, 50, 40, 0.3);
|
||||
}
|
||||
|
||||
/*inline-block
|
||||
============================================*/
|
||||
|
||||
@mixin inline-block() {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
@mixin size($width, $height) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
@mixin box-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
|
||||
border-color: $border;
|
||||
|
||||
& > .box-heading {
|
||||
color: $heading-text-color;
|
||||
background-color: $heading-bg-color;
|
||||
border-color: $heading-border;
|
||||
|
||||
+ .box-content {
|
||||
border-top-color: $border;
|
||||
}
|
||||
}
|
||||
& > .box-content{
|
||||
border-color:$border;
|
||||
}
|
||||
& > .box-footer {
|
||||
+ .box-collapse .box-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin button-3d($suffixclass, $height3d ,$color3d){
|
||||
border: 0;
|
||||
@if ($suffixclass == "empty") {
|
||||
box-shadow: 0 $height3d $color3d inset;
|
||||
-o-box-shadow: 0 $height3d $color3d inset;
|
||||
-moz-box-shadow: 0 $height3d $color3d inset;
|
||||
-webkit-box-shadow: 0 $height3d $color3d inset;
|
||||
-ms-box-shadow: 0 $height3d $color3d inset;
|
||||
}
|
||||
@else {
|
||||
&.btn-#{$suffixclass}{
|
||||
box-shadow: 0 $height3d $color3d inset;
|
||||
-o-box-shadow: 0 $height3d $color3d inset;
|
||||
-moz-box-shadow: 0 $height3d $color3d inset;
|
||||
-webkit-box-shadow: 0 $height3d $color3d inset;
|
||||
-ms-box-shadow: 0 $height3d $color3d inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-inverse( $suffixclass, $color ,$background ){
|
||||
|
||||
&.btn-#{$suffixclass}{
|
||||
&:hover{
|
||||
color:$color;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline( $suffixclass, $color, $hovercolor ){
|
||||
background:transparent;
|
||||
&.btn-#{$suffixclass}{
|
||||
color:$color;
|
||||
&:hover{
|
||||
color:$hovercolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
/// button variant outline
|
||||
@mixin button-variant-outline($color, $background, $border, $colorhover, $bghover, $borderhover ) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $colorhover;
|
||||
background-color: $bghover;
|
||||
border-color: $borderhover ;
|
||||
}
|
||||
.open & { &.dropdown-toggle {
|
||||
color: $colorhover;
|
||||
background-color: $bghover;
|
||||
border-color: $borderhover ;
|
||||
} }
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
}
|
||||
.open & { &.dropdown-toggle {
|
||||
background-image: none;
|
||||
} }
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $background;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
// icon variant inverse
|
||||
|
||||
@mixin icons-inverse( $suffixclass, $color ,$background ){
|
||||
|
||||
&.icons-#{$suffixclass}{
|
||||
&:hover{
|
||||
color:$color;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
// icon variant outline
|
||||
|
||||
@mixin icons-outline( $suffixclass, $color, $hovercolor ){
|
||||
&.icons-#{$suffixclass}{
|
||||
background:transparent;
|
||||
color:$color;
|
||||
&:hover{
|
||||
color:$hovercolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block
|
||||
// -------------------------
|
||||
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
|
||||
|
||||
border: solid 1px $border;
|
||||
|
||||
& .#{$block-heading-selector} {
|
||||
+ .#{$block-prefix}-collapse .#{$block-content-selector} {
|
||||
border-top-color: $border;
|
||||
}
|
||||
}
|
||||
& > .#{$block-prefix}-footer {
|
||||
+ .#{$block-prefix}-collapse .#{$block-prefix}-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****/
|
||||
/****/
|
||||
@mixin container-layout-variant($color, $background, $linkcolor ){
|
||||
background: $background;
|
||||
color: $color;
|
||||
a{
|
||||
color:$linkcolor;
|
||||
&:hover{
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widget-heading-style(){
|
||||
font-size: 36px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-bottom: 35px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
&.style-2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
@include rtl-text-align-left();
|
||||
padding-bottom: 0;
|
||||
.widget-heading {
|
||||
font-size: 20px;
|
||||
> span:first-child {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
display: block;
|
||||
&:before {
|
||||
content: "";
|
||||
background-color: $theme-color;
|
||||
@include size(40px,1px);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@include rtl-left(0px);
|
||||
}
|
||||
}
|
||||
.description {
|
||||
font-size: 18px;
|
||||
font-family: $font-family-base;
|
||||
color: $black;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
@media screen and (max-width: $screen-xs-max) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
.description {
|
||||
margin: 15px 23% 0;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
background: url('#{$image-theme-path}heading-title-bg.png') no-repeat center bottom;
|
||||
.widget-heading {
|
||||
color: $white;
|
||||
.description {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
width: 156px;
|
||||
height: 1px;
|
||||
background-color: #d3d3d3;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@include rtl-left(50%);
|
||||
@include rtl-margin-left(-78px);
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
border: 2px solid $theme-color;
|
||||
@include border-radius(2px);
|
||||
@include rotate(45deg);
|
||||
position: absolute;
|
||||
bottom:-5px;
|
||||
@include rtl-left(50%);
|
||||
@include square(12px);
|
||||
z-index: 1;
|
||||
@include rtl-margin-left(-6px);
|
||||
background-color: $white;
|
||||
}
|
||||
.widget-heading {
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
@media screen and (max-width: 979px) {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media screen and (max-width: $screen-xs-min) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.description, .widget-desc{
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
color: $light-gray;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
font-family: $font-family-base;
|
||||
margin: 10px 0 0;
|
||||
line-height: 1.4;
|
||||
&:after {
|
||||
content: "";
|
||||
@include size(50px,1px);
|
||||
background-color: $body-bg;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@include rtl-left(50%);
|
||||
@include rtl-margin-left(-25px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 979px) {
|
||||
font-size: 30px;
|
||||
padding-bottom: 25px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widget-specical-style(){
|
||||
margin-bottom: 40px;
|
||||
@include widget-heading-style();
|
||||
&.text-white {
|
||||
.widget-heading {
|
||||
color: $white;
|
||||
&:after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
259
assets/scss/components/mixins/_rtl.scss
Executable file
259
assets/scss/components/mixins/_rtl.scss
Executable file
@@ -0,0 +1,259 @@
|
||||
// Support for RTL (Right to Left) & non-latin fonts
|
||||
|
||||
$rtl-left : left;
|
||||
$rtl-right : right;
|
||||
$rtl-center: center;
|
||||
|
||||
// BASIC CONVERTER (ignore these)
|
||||
|
||||
@mixin rtl-base-simple ($property, $direction) {
|
||||
#{$property}:$direction;
|
||||
.rtl & {
|
||||
@if $direction == $rtl-right {
|
||||
#{$property}:$rtl-left;
|
||||
}
|
||||
@else {
|
||||
#{$property}:$rtl-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin rtl-base-inherit ($property, $direction, $value, $inherit : inherit) {
|
||||
#{$property}-#{$direction}: $value;
|
||||
.rtl & {
|
||||
@if $direction == $rtl-right {
|
||||
#{$property}-#{$rtl-left}: $value;
|
||||
}
|
||||
@else {
|
||||
#{$property}-#{$rtl-right}: $value;
|
||||
}
|
||||
#{$property}-#{$direction}: $inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-base-toprightbottomleft ($property, $t, $r, $b, $l) {
|
||||
#{$property}: $t $r $b $l;
|
||||
.rtl & {
|
||||
#{$property}: $t $l $b $r;
|
||||
}
|
||||
}
|
||||
|
||||
// BODY STYLES
|
||||
@mixin rtl-direction ($forBody : true) {
|
||||
direction: ltr;
|
||||
@if $forBody {
|
||||
&.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.rtl & {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-font-family ($ltr, $rtl, $forBody : false) {
|
||||
font-family: $ltr;
|
||||
@if $forBody {
|
||||
&.rtl, &.non-latin {
|
||||
font-family:$rtl;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.rtl &, .non-latin & {
|
||||
font-family:$rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// MARGIN
|
||||
|
||||
@mixin rtl-margin ($t, $r, $b, $l) {
|
||||
@include rtl-base-toprightbottomleft(margin,$t, $r, $b, $l);
|
||||
}
|
||||
@mixin rtl-margin-left ($value) {
|
||||
@include rtl-base-inherit(margin,$rtl-left,$value);
|
||||
}
|
||||
@mixin rtl-margin-right ($value) {
|
||||
@include rtl-base-inherit(margin,$rtl-right,$value);
|
||||
}
|
||||
|
||||
// PADDING
|
||||
|
||||
@mixin rtl-padding ($t, $r, $b, $l) {
|
||||
@include rtl-base-toprightbottomleft(padding,$t, $r, $b, $l);
|
||||
}
|
||||
@mixin rtl-padding-left ($value) {
|
||||
@include rtl-base-inherit(padding,$rtl-left,$value);
|
||||
}
|
||||
@mixin rtl-padding-right ($value) {
|
||||
@include rtl-base-inherit(padding,$rtl-right,$value);
|
||||
}
|
||||
|
||||
// BORDER
|
||||
|
||||
@mixin rtl-border-left ($value) {
|
||||
@include rtl-base-inherit(border,$rtl-left,$value);
|
||||
}
|
||||
@mixin rtl-border-right ($value) {
|
||||
@include rtl-base-inherit(border,$rtl-right,$value);
|
||||
}
|
||||
|
||||
// POSITION
|
||||
|
||||
@mixin rtl-left ($value) {
|
||||
#{$rtl-left}: $value;
|
||||
.rtl & {
|
||||
#{$rtl-right}: $value;
|
||||
#{$rtl-left}: auto;
|
||||
}
|
||||
}
|
||||
@mixin rtl-right ($value) {
|
||||
#{$rtl-right}: $value;
|
||||
.rtl & {
|
||||
#{$rtl-left}: $value;
|
||||
#{$rtl-right}: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// CLEAR
|
||||
|
||||
@mixin rtl-clear-left () {
|
||||
@include rtl-base-simple(clear, $rtl-left);
|
||||
}
|
||||
@mixin rtl-clear-right () {
|
||||
@include rtl-base-simple(clear, $rtl-right);
|
||||
}
|
||||
|
||||
// TEXT-ALIGN
|
||||
|
||||
@mixin rtl-text-align-left () {
|
||||
@include rtl-base-simple(text-align, $rtl-left);
|
||||
}
|
||||
@mixin rtl-text-align-right () {
|
||||
@include rtl-base-simple(text-align, $rtl-right);
|
||||
}
|
||||
@mixin rtl-text-align-center () {
|
||||
@include rtl-base-simple(text-align, $rtl-center);
|
||||
}
|
||||
|
||||
// FLOAT
|
||||
|
||||
@mixin rtl-float-left () {
|
||||
@include rtl-base-simple(float, $rtl-left);
|
||||
}
|
||||
@mixin rtl-float-right () {
|
||||
@include rtl-base-simple(float, $rtl-right);
|
||||
}
|
||||
|
||||
// BACKGROUND-POSITION
|
||||
|
||||
@mixin rtl-background-position-left ($vertical) {
|
||||
background-position:$rtl-left $vertical;
|
||||
.rtl & {
|
||||
background-position:$rtl-right $vertical;
|
||||
}
|
||||
}
|
||||
@mixin rtl-background-position-right ($vertical) {
|
||||
background-position:$rtl-right $vertical;
|
||||
.rtl & {
|
||||
background-position:$rtl-left $vertical;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-background-position-percent ($vertical, $horPercent) {
|
||||
background-position:$horPercent $vertical;
|
||||
.rtl & {
|
||||
background-position:100% - $horPercent $vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// TEXT-SHADOW & BOX-SHADOW
|
||||
|
||||
@mixin rtl-text-shadow ($x, $rest) {
|
||||
text-shadow: $x $rest;
|
||||
.rtl & {
|
||||
text-shadow: -1 * $x $rest;
|
||||
}
|
||||
}
|
||||
@mixin rtl-box-shadow ($x, $rest) {
|
||||
-moz-box-shadow: $x $rest;
|
||||
-webkit-box-shadow: $x $rest;
|
||||
box-shadow: $x $rest;
|
||||
.rtl & {
|
||||
-moz-box-shadow: -1 * $x $rest;
|
||||
-webkit-box-shadow: -1 * $x $rest;
|
||||
box-shadow: -1 * $x $rest;
|
||||
}
|
||||
}
|
||||
|
||||
// BORDER-RADIUS
|
||||
|
||||
@mixin rtl-border-radius-topright ($tl, $tr, $br, $bl) {
|
||||
-moz-border-radius: $tl, $tr, $br, $bl;
|
||||
-webkit-border-radius: $tl, $tr, $br, $bl;
|
||||
border-top-radius: $tl, $tr, $br, $bl;
|
||||
.rtl & {
|
||||
-moz-border-radius: $tr, $tl, $bl, $br;
|
||||
-webkit-border-radius: $tr, $tl, $bl, $br;
|
||||
border-top-radius: $tr, $tl, $bl, $br;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-topright ($value) {
|
||||
-moz-border-radius-top#{$rtl-right}: $value;
|
||||
-webkit-border-top-#{$rtl-right}-radius: $value;
|
||||
border-top-#{$rtl-right}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-radius-top#{$rtl-left}: $value;
|
||||
-webkit-border-top-#{$rtl-left}-radius: $value;
|
||||
border-top-#{$rtl-left}-radius: $value;
|
||||
-moz-border-radius-top#{$rtl-right}: inherit;
|
||||
-webkit-border-top-#{$rtl-right}-radius: inherit;
|
||||
border-top-#{$rtl-right}-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-bottomright ($value) {
|
||||
-moz-border-radius-bottom#{$rtl-right}: $value;
|
||||
-webkit-border-bottom-#{$rtl-right}-radius: $value;
|
||||
border-bottom-#{$rtl-right}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-radius-bottom#{$rtl-left}: $value;
|
||||
-webkit-border-bottom-#{$rtl-left}-radius: $value;
|
||||
border-bottom-#{$rtl-left}-radius: $value;
|
||||
-moz-border-radius-bottom#{$rtl-right}: inherit;
|
||||
-webkit-border-bottom-#{$rtl-right}-radius: inherit;
|
||||
border-bottom-#{$rtl-right}-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-topleft ($value) {
|
||||
-moz-border-radius-top#{$rtl-left}: $value;
|
||||
-webkit-border-top-#{$rtl-left}-radius: $value;
|
||||
border-top-#{$rtl-left}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-radius-top#{$rtl-right}: $value;
|
||||
-webkit-border-top-#{$rtl-right}-radius: $value;
|
||||
border-top-#{$rtl-right}-radius: $value;
|
||||
-moz-border-radius-top#{$rtl-left}: inherit;
|
||||
-webkit-border-top-#{$rtl-left}-radius: inherit;
|
||||
border-top-#{$rtl-left}-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-bottomleft ($value) {
|
||||
-moz-border-radius-bottom#{$rtl-left}: $value;
|
||||
-webkit-border-bottom-#{$rtl-left}-radius: $value;
|
||||
border-bottom-#{$rtl-left}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-radius-bottom#{$rtl-right}: $value;
|
||||
-webkit-border-bottom-#{$rtl-right}-radius: $value;
|
||||
border-bottom-#{$rtl-right}-radius: $value;
|
||||
-moz-border-radius-bottom#{$rtl-left}: inherit;
|
||||
-webkit-border-bottom-#{$rtl-left}-radius: inherit;
|
||||
border-bottom-#{$rtl-left}-radius: inherit;
|
||||
}
|
||||
}
|
||||
278
assets/scss/components/mixins/_template-mixins.scss
Executable file
278
assets/scss/components/mixins/_template-mixins.scss
Executable file
@@ -0,0 +1,278 @@
|
||||
// Box Size
|
||||
// -------------------------
|
||||
@mixin box-size($background, $padding-top,$padding-bottom){
|
||||
background: $background;
|
||||
padding-top: $padding-top;
|
||||
padding-bottom: $padding-bottom;
|
||||
}
|
||||
|
||||
// Button
|
||||
// -------------------------
|
||||
@mixin button-outline($color, $background, $border, $background-hover, $color-hover, $border-hover, $border-radius) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border: $border;
|
||||
@include border-radius($border-radius);
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $color-hover;
|
||||
background-color: $background-hover;
|
||||
border: $border-hover;
|
||||
}
|
||||
.fa,.icon{
|
||||
font-size: $icon-font-size-base;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Block
|
||||
// -------------------------
|
||||
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
|
||||
border-color: $border;
|
||||
background: $heading-bg-color;
|
||||
& .#{$block-heading-selector} {
|
||||
& span:before, & span:after{ background:$white; }
|
||||
color: $heading-text-color;
|
||||
background-color: $heading-bg-color;
|
||||
border-color: $heading-border;
|
||||
+ .#{$block-prefix}-collapse .#{$block-content-selector} {
|
||||
border-top-color: $border;
|
||||
}
|
||||
}
|
||||
& > .#{$block-prefix}-footer {
|
||||
+ .#{$block-prefix}-collapse .#{$block-prefix}-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin block-elements-styles($border, $heading-text-color, $heading-bg-color, $heading-border, $text-color, $text-color-primary){
|
||||
border-color: $border;
|
||||
background: $heading-bg-color;
|
||||
& .#{$block-heading-selector} {
|
||||
color: $heading-text-color;
|
||||
background-color: $heading-bg-color;
|
||||
border-color: $heading-border;
|
||||
+ .#{$block-prefix}-collapse .#{$block-content-selector} {
|
||||
border-top-color: $border;
|
||||
}
|
||||
}
|
||||
& > .#{$block-prefix}-footer {
|
||||
+ .#{$block-prefix}-collapse .#{$block-prefix}-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****/
|
||||
@mixin container-layout-variant($color, $background, $linkcolor, $topbar-link-color-hover ){
|
||||
background: $background;
|
||||
color: $color;
|
||||
a{
|
||||
color:$linkcolor;
|
||||
}
|
||||
a:hover{
|
||||
color: $topbar-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
//== Inline block
|
||||
//==========================================
|
||||
@mixin inline-block ($haslayout : true){
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@if $haslayout == true {
|
||||
.lt-ie8 & {
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//== vertical block
|
||||
//==========================================
|
||||
@mixin vertical-center( $width: 100px, $height: 100px) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
width: $width;
|
||||
height: $height;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
//== Translate X - Y - Z
|
||||
//==========================================
|
||||
@mixin translateX($x) {
|
||||
-webkit-transform: translateX($x);
|
||||
-ms-transform: translateX($x); // IE9 only
|
||||
-o-transform: translateX($x);
|
||||
transform: translateX($x);
|
||||
}
|
||||
|
||||
@mixin translateY($y) {
|
||||
-webkit-transform: translateY($y);
|
||||
-ms-transform: translateY($y); // IE9 only
|
||||
-o-transform: translateY($y);
|
||||
transform: translateY($y);
|
||||
}
|
||||
|
||||
@mixin translateZ($z) {
|
||||
-webkit-transform: translateZ($z);
|
||||
-ms-transform: translateZ($z); // IE9 only
|
||||
-o-transform: translateZ($z);
|
||||
transform: translateZ($z);
|
||||
}
|
||||
|
||||
//== Transform
|
||||
//==========================================
|
||||
@mixin transform($argument){
|
||||
-webkit-transform: ($argument);
|
||||
-moz-transform: ($argument);
|
||||
-ms-transform: ($argument);
|
||||
-o-transform: ($argument);
|
||||
transform: ($argument);
|
||||
}
|
||||
|
||||
//== Transform
|
||||
//==========================================
|
||||
@mixin transition-delay($time1,$time2){
|
||||
-webkit-transition-delay: ($time1,$time2);
|
||||
-moz-transition-delay: ($time1,$time2);
|
||||
-ms-transition-delay: ($time1,$time2);
|
||||
-o-transition-delay: ($time1,$time2);
|
||||
transition-delay: ($time1,$time2);
|
||||
}
|
||||
|
||||
//== Background Size
|
||||
//==========================================
|
||||
@mixin background-size($size1,$size2) {
|
||||
-webkit-background-size: ($size1,$size2);
|
||||
-moz-background-size: ($size1,$size2);
|
||||
-ms-background-size: ($size1,$size2);
|
||||
-o-background-size: ($size1,$size2);
|
||||
background-size: ($size1,$size2);
|
||||
}
|
||||
|
||||
//== Background origin
|
||||
//==========================================
|
||||
@mixin background-origin($value1,$value2){
|
||||
-webkit-background-origin: ($value1,$value2);
|
||||
-moz-background-origin: ($value1,$value2);
|
||||
-ms-background-origin: ($value1,$value2);
|
||||
-o-background-origin: ($value1,$value2);
|
||||
background-origin: ($value1,$value2);
|
||||
}
|
||||
|
||||
//== Border radius
|
||||
//==========================================
|
||||
@mixin border-radius($radius) {
|
||||
border-radius : $radius;
|
||||
-webkit-border-radius : $radius;
|
||||
-moz-border-radius : $radius;
|
||||
-ms-border-radius : $radius;
|
||||
-o-border-radius : $radius;
|
||||
}
|
||||
|
||||
//== Text Shadow
|
||||
//==========================================
|
||||
@mixin text-shadow($shadow) {
|
||||
text-shadow : $shadow;
|
||||
-webkit-text-shadow : $shadow;
|
||||
-moz-text-shadow : $shadow;
|
||||
-ms-text-shadow : $shadow;
|
||||
-o-text-shadow : $shadow;
|
||||
}
|
||||
|
||||
//== Transform Origin
|
||||
//==========================================
|
||||
@mixin transform-origin($originX,$originY) {
|
||||
-webkit-transform-origin : $originX $originY;
|
||||
-moz-transform-origin : $originX $originY;
|
||||
-ms-transform-origin : $originX $originY; // IE9 only
|
||||
transform-origin : $originX $originY;
|
||||
}
|
||||
|
||||
//== appearance
|
||||
//==========================================
|
||||
@mixin appearance() {
|
||||
-webkit-appearance : none;
|
||||
-moz-appearance : none;
|
||||
-o-appearance : none;
|
||||
-ms-appearance : none;
|
||||
appearance : none;
|
||||
}
|
||||
|
||||
//== selection
|
||||
//==========================================
|
||||
$prefixes: ("-moz-", "");
|
||||
@mixin selection($color, $background) {
|
||||
@each $prefix in $prefixes {
|
||||
::#{$prefix}selection {
|
||||
color: $color;
|
||||
background: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//== animation fill mode
|
||||
//==========================================
|
||||
@mixin animation-fill-mode($fill) {
|
||||
-webkit-animation-fill-mode: $fill;
|
||||
-moz-animation-fill-mode: $fill;
|
||||
-o-animation-fill-mode: $fill;
|
||||
animation-fill-mode: $fill;
|
||||
}
|
||||
|
||||
//== filter
|
||||
//==========================================
|
||||
@mixin filter($argument){
|
||||
filter : $argument;
|
||||
-webkit-filter : $argument;
|
||||
-moz-filter : $argument;
|
||||
-o-filter : $argument;
|
||||
-ms-filter : $argument;
|
||||
}
|
||||
|
||||
// Clear Lists
|
||||
// -------------------------
|
||||
@mixin clear-list(){
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
list-style : none;
|
||||
}
|
||||
|
||||
// Formart lists widget
|
||||
// -------------------------
|
||||
@mixin lists-style() {
|
||||
ul,ol{
|
||||
@include clear-list();
|
||||
li{
|
||||
&:first-child{
|
||||
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.children{
|
||||
> li{
|
||||
&:before{
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul{
|
||||
li:first-child{
|
||||
padding-top: 14px;
|
||||
background-position: 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "functions";
|
||||
244
assets/scss/components/vars/_elements.scss
Executable file
244
assets/scss/components/vars/_elements.scss
Executable file
@@ -0,0 +1,244 @@
|
||||
$opalestate-parallax-before-background : url("http://venusdemo.com/wpopal/mix/mobile/wp-content/uploads/2014/11/bg-footer-cd.jpg")!default;
|
||||
|
||||
$element-color-primary : $theme-color !default;
|
||||
|
||||
/* --- SCSS For Accordion --- */
|
||||
$opalestate-accordion-background: $brand-success !default;
|
||||
$opalestate-accordion-color: $brand-success !default;
|
||||
|
||||
$opalestate-accordion-border-color: #eee !default;
|
||||
|
||||
/* --- SCSS For Breadcrumb --- */
|
||||
|
||||
/* --- SCSS For Buttons --- */
|
||||
|
||||
/* --- SCSS For Call-to-action --- */$white : #FFFFFF !default;
|
||||
|
||||
/* --- SCSS For Content-slider --- *//* */
|
||||
|
||||
$opalestate-carousel-md-width: 44px !default;
|
||||
$opalestate-carousel-md-height: 44px !default;
|
||||
|
||||
$opalestate-carousel-sm-width: 34px !default;
|
||||
$opalestate-carousel-sm-height: 34px !default;
|
||||
|
||||
$opalestate-carousel-xs-width: 30px !default;
|
||||
$opalestate-carousel-xs-height: 30px !default;
|
||||
|
||||
/* carousel-controls-v1 */
|
||||
$opalestate-carousel-controls-v1-color: #999 !default;
|
||||
$opalestate-carousel-controls-v1-hover-color: darken($opalestate-carousel-controls-v1-color, 15%) !default;
|
||||
$opalestate-carousel-controls-v1-bg: rgba(0, 0, 0, 0.5) !default;
|
||||
|
||||
/* carousel-controls-v2 */
|
||||
$opalestate-carousel-controls-v2-color: #999 !default;
|
||||
$opalestate-carousel-controls-v2-hover-color: darken($opalestate-carousel-controls-v2-color, 25%) !default;
|
||||
|
||||
/* carousel-controls-v3 */
|
||||
$opalestate-carousel-controls-v3-color: #fff !default;
|
||||
$opalestate-carousel-controls-v3-hover-color: #fff !default;
|
||||
$opalestate-carousel-controls-v3-bg: $element-color-primary !default;
|
||||
$opalestate-carousel-controls-v3-hover-bg: darken($opalestate-carousel-controls-v3-bg, 15%) !default;
|
||||
|
||||
|
||||
|
||||
/* Navigation Styles */
|
||||
|
||||
/* carousel-indicators-v1 */
|
||||
$opalestate-carousel-indicators-v1-bg: #ddd !default;
|
||||
$opalestate-carousel-indicators-v1-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v2 */
|
||||
$opalestate-carousel-indicators-v2-bg: #ddd !default;
|
||||
$opalestate-carousel-indicators-v2-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v3 */
|
||||
$opalestate-carousel-indicators-v3-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v3-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v4 */
|
||||
$opalestate-carousel-indicators-v4-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v4-hover-bg: $brand-success !default;
|
||||
|
||||
|
||||
/* carousel-indicators-v5 */
|
||||
$opalestate-carousel-indicators-v5-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v5-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v6 */
|
||||
$opalestate-carousel-indicators-v6-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v6-hover-bg: $brand-success !default;
|
||||
|
||||
/* --- SCSS For Counters --- */
|
||||
$opalestate-counter-color: $brand-primary;
|
||||
$opalestate-counter-font-weight: 700;
|
||||
$opalestate-counter-font-size: 48px;
|
||||
|
||||
$opalestate-counter-icon-font-size: 46px;
|
||||
$opalestate-counter-heading-font-weight: 400;
|
||||
|
||||
/* --- SCSS For Heading --- */$opalestate-heading-color: $brand-success;
|
||||
|
||||
/* --- SCSS For Icon-box --- */
|
||||
|
||||
/* --- SCSS For Interactive-banner --- */
|
||||
|
||||
/* --- SCSS For Latest-posts --- *//* latest posts */
|
||||
$opalestate-latest-posts-color: #696969;
|
||||
$opalestate-latest-posts-a-color: #000;
|
||||
$opalestate-latest-posts-a-hover-color: red;
|
||||
$opalestate-latest-posts-font-size: 14px;
|
||||
$opalestate-latest-posts-title-font-size: 18px;
|
||||
|
||||
$opalestate-latest-posts-profile-font-size: 13px;
|
||||
$opalestate-latest-posts-profile-color: #696969;
|
||||
|
||||
/* --- SCSS For List --- *//* variables for list */
|
||||
$opalestate-list-color: #666 !default;
|
||||
$opalestate-list-a-color: $opalestate-list-color !default;
|
||||
$opalestate-list-a-color-hover: $brand-success !default;
|
||||
|
||||
/* variables for list light */
|
||||
|
||||
$opalestate-list-light-color: #FFFFFF !default;
|
||||
$opalestate-list-light-a-color: $opalestate-list-light-color !default;
|
||||
$opalestate-list-light-a-color-hover: $brand-success !default;
|
||||
|
||||
|
||||
/* --- SCSS For Message --- */
|
||||
|
||||
/* --- SCSS For Newsletter --- */$newsletter-v2-bg : lighten($gray-light, 50%) !default;
|
||||
$newsletter-v3-bg : $gray-dark !default;
|
||||
|
||||
|
||||
/* --- SCSS For Piechart --- */
|
||||
|
||||
/* --- SCSS For Pricing --- */
|
||||
|
||||
/* --- SCSS For Process-steps --- *//* process-steps */
|
||||
$opalestate-process-steps-color: #000;
|
||||
$opalestate-process-steps-bg: #000;
|
||||
|
||||
$opalestate-process-steps-active-color: $brand-success;
|
||||
$opalestate-process-steps-active-bg: $brand-success;
|
||||
|
||||
/* --- SCSS For Service --- *//* variables for tab style1 using as base of tab */
|
||||
|
||||
|
||||
/* --- SCSS For Style-icon --- *//* Variables icons default */
|
||||
$opalestate-style-icon-color: #fff!default;
|
||||
$opalestate-style-icon-hover-color: #fff!default;
|
||||
$opalestate-style-icon-bg: $brand-success!default;
|
||||
$opalestate-style-icon-hover-bg: darken($opalestate-style-icon-bg, 5%)!default;
|
||||
|
||||
/* Variables icons bodered */
|
||||
$opalestate-style-icon-bodered-color: $brand-success!default;
|
||||
$opalestate-style-icon-bodered-hover-color: darken($opalestate-style-icon-bodered-color, 10%)!default;
|
||||
|
||||
/* Variables icons darker */
|
||||
$opalestate-style-icon-darker-color: #fff!default;
|
||||
$opalestate-style-icon-darker-hover-color: #fff!default;
|
||||
$opalestate-style-icon-darker-bg: #000!default;
|
||||
$opalestate-style-icon-darker-hover-bg: lighten($opalestate-style-icon-darker-bg, 35%)!default;
|
||||
|
||||
/* Variables icons light */
|
||||
$opalestate-style-icon-light-color: #000!default;
|
||||
$opalestate-style-icon-light-hover-color: #fff!default;
|
||||
$opalestate-style-icon-light-bg: #f0f0f0!default;
|
||||
$opalestate-style-icon-light-hover-bg: darken($opalestate-style-icon-light-bg, 10%)!default;
|
||||
|
||||
/* Variables icons plain */
|
||||
$opalestate-style-icon-plain-color: $brand-success!default;
|
||||
$opalestate-style-icon-plain-hover-color: #000!default;
|
||||
$opalestate-style-icon-plain-bg: transparent!default;
|
||||
$opalestate-style-icon-plain-hover-bg: transparent!default;
|
||||
|
||||
/* Variables icons for light style */
|
||||
$opalestate-light-style-icon-color: $brand-success!default;
|
||||
$opalestate-light-style-icon-hover-color: $brand-success!default;
|
||||
$opalestate-light-style-icon-bg: transparent!default;
|
||||
$opalestate-light-style-icon-hover-bg: darken(#fff, 5%)!default;
|
||||
|
||||
$opalestate-light-style-icon-bodered-color: #fff!default;
|
||||
$opalestate-light-style-icon-bodered-hover-color: darken(#fff, 5%)!default;
|
||||
$opalestate-light-style-icon-bodered-bg: #fff!default;
|
||||
$opalestate-light-style-icon-bodered-hover-bg: darken(#fff, 5%)!default;
|
||||
|
||||
/* Variables icons outline */
|
||||
|
||||
$icons-outline-color: #d1d646!default;
|
||||
$icons-outline-bg: transparent!default;
|
||||
$icons-outline-border: $icons-outline-color!default;
|
||||
$icons-outline-hover-color: #fff!default;
|
||||
$icons-outline-hover-bg: $icons-outline-color!default;
|
||||
$icons-outline-hover-border: darken($icons-outline-hover-bg, 5%)!default;
|
||||
|
||||
/* Variables icons inverse */
|
||||
|
||||
$icons-inverse-color: #fff!default;
|
||||
$icons-inverse-bg: #d1d646!default;
|
||||
$icons-inverse-border: darken($icons-inverse-bg, 5%)!default;
|
||||
$icons-inverse-hover-color: #d1d646!default;
|
||||
$icons-inverse-hover-bg: transparent!default;
|
||||
$icons-inverse-hover-border: $icons-inverse-bg!default;
|
||||
|
||||
|
||||
/* --- SCSS For Table --- */
|
||||
|
||||
/* --- SCSS For Tabs --- */
|
||||
/* variables for tab style1 using as base of tab */
|
||||
$opalestate-tabs-a-color:#FFFFFF !default;
|
||||
$opalestate-tabs-a-color-active:#000000 !default;
|
||||
|
||||
$opalestate-tabs-padding: 10px 20px !default;
|
||||
$opalestate-tabs-background: $brand-primary !default;
|
||||
$opalestate-tabs-background-hover: #f6f6f6 !default;
|
||||
$opalestate-tabs-content-background:#f6f6f6 !default;
|
||||
|
||||
$opalestate-tabs-border-color : #eee !default;
|
||||
$opalestate-tabs-content-border: 1px solid $opalestate-tabs-border-color !default;
|
||||
$opalestate-tabs-content-padding: 15px 20px!default;
|
||||
|
||||
|
||||
/* tab style version 5 */
|
||||
$opalestate-tabs-primary-background-hover:#000000!default;
|
||||
$opalestate-tabs-primary-background:#FFFFFF !default;
|
||||
|
||||
/* tab style version 6 */
|
||||
$opalestate-tabs-v6-heading-background: #FFFFFF !default;
|
||||
|
||||
$opalestate-tabs-v6-a-color : #000000 !default;
|
||||
$opalestate-tabs-v6-a-color-active:red !default;
|
||||
$opalestate-tabs-v6-heading-padding: 10px 20px;
|
||||
$opalestate-tabs-v6-heading-border-top-color:#000000 !default;
|
||||
|
||||
$opalestate-tabs-v6-heading-border-color:#eee !default;
|
||||
$opalestate-tabs-v6-content-border-color:1px solid $opalestate-tabs-border-color !default;
|
||||
|
||||
/* --- SCSS For Testimonials --- *//* testimonials default */
|
||||
$opalestate-testimonials-color: #696969;
|
||||
$opalestate-testimonials-a-color: #696969;
|
||||
$opalestate-testimonials-heading-color: #696969;
|
||||
|
||||
|
||||
/* testimonials-v1 */
|
||||
$opalestate-testimonials-v1-color: #696969;
|
||||
$opalestate-testimonials-v1-a-color: #696969;
|
||||
$opalestate-testimonials-v1-background: #f3f3f3;
|
||||
$opalestate-testimonials-v1-light-background: #fff;
|
||||
$opalestate-testimonials-v1-light-color: $gray-dark;
|
||||
|
||||
/* testimonials light */
|
||||
$opalestate-testimonials-light-color: #fff;
|
||||
$opalestate-testimonials-light-a-color: #fff;
|
||||
$opalestate-testimonials-light-heading-color: #fff;
|
||||
|
||||
|
||||
|
||||
/* --- SCSS For Typography --- */
|
||||
$opalestate-blockquote-icon-background : $brand-primary !default;
|
||||
$opalestate-blockquote-icon-color : #FFFFFF !default;
|
||||
$opalestate-blockquote-icon-font-size : 17px !default;
|
||||
$opalestate-blockquote-icon-line-height : 22px !default;
|
||||
|
||||
$opalestate-blockquote-color : #000000 !default;
|
||||
114
assets/scss/components/vars/_form.scss
Executable file
114
assets/scss/components/vars/_form.scss
Executable file
@@ -0,0 +1,114 @@
|
||||
// Select
|
||||
// -------------------------
|
||||
$select-size : 32px !default;
|
||||
$select-border-color : $border-color !default;
|
||||
$select-padding : 4px 6px !default;
|
||||
|
||||
// Input
|
||||
// -------------------------
|
||||
$input-padding : 5px 6px !default;
|
||||
$input-font-size : $font-size-base - 1;
|
||||
|
||||
$input-group-form-bg : transparent !default;
|
||||
$input-group-form-margin : 0 0 5px 0!default;
|
||||
$input-group-padding : 6px 11px !default;
|
||||
$input-group-font-size : 12px !default;
|
||||
$input-group-addon-color : #fff !default;
|
||||
$input-group-height : 42px !default;
|
||||
|
||||
$input-form-bg : $gray-darker !default;
|
||||
|
||||
// Button
|
||||
// -------------------------
|
||||
$btn-transform : uppercase !default;
|
||||
$btn-padding-vertical : 5px !default;
|
||||
$btn-padding-horizontal : 20px !default;
|
||||
$btn-font-size : 12px !default;
|
||||
$btn-line-height : 30px !default;
|
||||
$btn-border-radius : 4px !default;
|
||||
|
||||
$btn-lg-padding-vertical : 15px !default;
|
||||
$btn-lg-padding-horizontal : 30px !default;
|
||||
$btn-lg-font-size : 18px !default;
|
||||
$btn-lg-line-height : $line-height-large !default;
|
||||
$btn-lg-border-radius : 5px !default;
|
||||
|
||||
$btn-sm-padding-vertical : 7px !default;
|
||||
$btn-sm-padding-horizontal : 12px !default;
|
||||
$btn-sm-font-size : 10px !default;
|
||||
$btn-sm-line-height : $line-height-small !default;
|
||||
$btn-sm-border-radius : $border-radius-small !default;
|
||||
|
||||
$btn-xs-padding-vertical : 4px !default;
|
||||
$btn-xs-padding-horizontal : 10px !default;
|
||||
$btn-xs-font-size : 10px !default;
|
||||
$btn-xs-line-height : $line-height-small !default;
|
||||
$btn-xs-border-radius : $border-radius-small !default;
|
||||
|
||||
$btn-outline-color : $white !default;
|
||||
$btn-outline-hover-color : $white !default;
|
||||
$btn-outline-height : 36px !default;
|
||||
$btn-outline-padding : 3px 15px !default;
|
||||
$btn-outline-bg : $theme-color !default;
|
||||
$btn-outline-hover-bg :$theme-color-second !default;
|
||||
$btn-outline-border : 0 !default;
|
||||
$btn-outline-border-hover : 0 !default;
|
||||
$btn-outline-font-size : 12px !default;
|
||||
$btn-outline-line-height : 28px !default;
|
||||
$btn-outline-border-radius : 0 !default;
|
||||
|
||||
$btn-outline-sm-padding-vertical : 8px !default;
|
||||
$btn-outline-sm-padding-horizontal : 18px !default;
|
||||
$btn-outline-sm-font-size : 11px !default;
|
||||
$btn-outline-sm-line-height : 1.3 !default;
|
||||
$btn-outline-sm-border-radius : 3px !default;
|
||||
|
||||
$btn-outline-xs-padding-vertical : 5px !default;
|
||||
$btn-outline-xs-padding-horizontal : 15px !default;
|
||||
$btn-outline-xs-font-size : 11px !default;
|
||||
$btn-outline-xs-line-height : 1.2 !default;
|
||||
$btn-outline-xs-border-radius : 3px !default;
|
||||
|
||||
$btn-outline-lg-padding-vertical : 21px !default;
|
||||
$btn-outline-lg-padding-horizontal : 48px !default;
|
||||
$btn-outline-lg-font-size : 14px !default;
|
||||
$btn-outline-lg-line-height : 3 !default;
|
||||
$btn-outline-lg-border-radius : 4px !default;
|
||||
|
||||
$btn-inverse-color : $black !default;
|
||||
$btn-inverse-hover-color : $white !default;
|
||||
$btn-inverse-bg : $white !default;
|
||||
$btn-inverse-hover-bg : $black !default;
|
||||
$btn-inverse-border-color : $border-color !default;
|
||||
$btn-inverse-border-hover-color : $border-color !default;
|
||||
$btn-inverse-font-size : 12px !default;
|
||||
$btn-inverse-padding : 10px 15px !default;
|
||||
|
||||
$btn-outline-inverse-color : $theme-color-second !default;
|
||||
$btn-outline-inverse-bg : $black !default;
|
||||
$btn-outline-inverse-border-color : 1px solid $btn-outline-inverse-bg !default;
|
||||
$btn-outline-inverse-hover-bg : $theme-color !default;
|
||||
$btn-outline-inverse-hover-color : $white !default;
|
||||
$btn-outline-inverse-border-hover-color : 1px solid $theme-color-second !default;
|
||||
|
||||
// Search
|
||||
// -------------------------
|
||||
$search-bg : $white !default;
|
||||
$search-font-size : 12px !default;
|
||||
$search-padding : 15px !default;
|
||||
$search-width : auto !default;
|
||||
$search-button-bg : transparent !default;
|
||||
$search-main-button-bg : $white !default;
|
||||
$search-main-button-border : $border-color !default;
|
||||
$search-main-button-color : $gray-darker !default;
|
||||
$search-button-border : 0px !default;
|
||||
$search-button-hover-bg : $white !default;
|
||||
$search-button-color : $white !default;
|
||||
$search-button-size : 36px !default;
|
||||
$search-button-hover-color : $gray-darker !default;
|
||||
$search-radius : 3px !default;
|
||||
$search-height : 50px !default;
|
||||
$search-border : transparent !default;
|
||||
$search-hover-border : $border-color !default;
|
||||
$search-border-radius : 4px !default;
|
||||
$search-categories-border-radius : 4px !important;
|
||||
91
assets/scss/components/vars/_layout.scss
Executable file
91
assets/scss/components/vars/_layout.scss
Executable file
@@ -0,0 +1,91 @@
|
||||
|
||||
// Topbar
|
||||
// -------------------------
|
||||
$topbar-bg : #1c2b49 !default;
|
||||
$topbar-link-color : $light-gray !default;
|
||||
$topbar-link-hover-color : $theme-color !default;
|
||||
$topbar-color : $light-gray !default;
|
||||
$topbar-border : 0 !default;
|
||||
$topbar-font-size : 14px !default;
|
||||
$topbar-icon-color : $theme-color !default;
|
||||
$topbar-icon-font-size : 14px !default;
|
||||
$topbar-text-transform : none !default;
|
||||
$topbar-padding : 0 !default;
|
||||
|
||||
//// Header
|
||||
|
||||
$header-main-padding : 30px 0 !default;
|
||||
$header-main-margin : 0 !default;
|
||||
$header-bg-color: #233354 !default;
|
||||
|
||||
|
||||
$massbottom-head-bg : $theme-color !default;
|
||||
$massbottom-head-padding : 6px 9px !default;
|
||||
$massbottom-head-color : $theme-color !default;
|
||||
$massbottom-head-border-color: darken($massbottom-head-bg,4%)!default;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
$mainmenu-bg: #222222 !default;
|
||||
|
||||
|
||||
|
||||
|
||||
// Footer
|
||||
// -------------------------
|
||||
$footer-bg : none !default;
|
||||
$footer-color : #ccc !default;
|
||||
$footer-transform : none !default;
|
||||
$footer-font-size : 14px !default;
|
||||
$footer-border : none !default;
|
||||
$footer-padding-top : 60px !default;
|
||||
$footer-padding-bottom : 0 !default;
|
||||
$footer-text-hightlight : $white !default;
|
||||
$footer-link-font-size : 14px !default;
|
||||
$footer-column-margin : 0 0 25px 0 !default;
|
||||
$footer-link-color : #FFF !default;
|
||||
$footer-link-hover-color : $theme-color !default;
|
||||
$footer-icon-color : darken($white, 20%) !default;
|
||||
$footer-icon-font-size : 13px !default;
|
||||
$footer-heading-font-size : 16px !default;
|
||||
$footer-heading-color : $white !default;
|
||||
$footer-heading-margin : 0 0 25px !default;
|
||||
$footer-heading-padding : 0 0 15px !default;
|
||||
$footer-heading-display : none !default;
|
||||
$footer-heading-transform : uppercase !default;
|
||||
$footer-list-transform : none !default;
|
||||
$footer-list-font-size : 14px !default;
|
||||
$footer-list-margin : 0 0 10px !default;
|
||||
$footer-list-light-height : 2.5 !default;
|
||||
$footer-heading-fweight : 400 !default;
|
||||
$footer-heading-ffamily : $font-family-second !default;
|
||||
|
||||
$footer-newsletter-padding : 25px !default;
|
||||
$footer-newsletter-bg : $theme-color !default;
|
||||
$footer-newsletter-color : #484848 !default;
|
||||
$footer-newsletter-heading-font-size : 18px !default;
|
||||
|
||||
$footer-top-bg : $white !default;
|
||||
$footer-top-color : $black !default;
|
||||
$footer-top-padding-top : 12px !default;
|
||||
$footer-top-padding-bottom : 12px !default;
|
||||
$footer-top-font-size : 12px !default;
|
||||
$footer-top-letter-spacing : 2px !default;
|
||||
$footer-top-border-color : rgba(0, 0, 0, 0.1);
|
||||
// Copyright
|
||||
// -------------------------
|
||||
|
||||
// Copyright
|
||||
// -------------------------
|
||||
$copyright-bg : none !default;
|
||||
$copyright-color : $light-gray !default;
|
||||
$copyright-link-color : $light-gray !default;
|
||||
$copyright-padding-top : 30px !default;
|
||||
$copyright-padding-bottom : 30px !default;
|
||||
$copyright-font-size : 14px !default;
|
||||
$copyright-font-weight : 400 !default;
|
||||
|
||||
$del-font-size : 12px !default;
|
||||
$del-color : #999999;
|
||||
95
assets/scss/components/vars/_nav.scss
Executable file
95
assets/scss/components/vars/_nav.scss
Executable file
@@ -0,0 +1,95 @@
|
||||
// Main Menu
|
||||
// -------------------------
|
||||
$megamenu-bg : $white !default;
|
||||
$navbar-mega-border : transparent !default;
|
||||
$navbar-mega-line-height : 75px !default;
|
||||
|
||||
$navbar-mega-skin2-bg : transparent !default;
|
||||
$navbar-mega-skin2-border : $border-color !default;
|
||||
$navbar-mega-skin2-line-height : 30px !default;
|
||||
|
||||
$navbar-text-transform : none !default;
|
||||
|
||||
$navbar-font-size : 14px !default;
|
||||
$navbar-font-weight : 400 !default;
|
||||
|
||||
$navbar-link-margin : 0 !default;
|
||||
$navbar-link-padding : 6px 20px !default;
|
||||
$navbar-link-color : $white !default;
|
||||
$navbar-link-hover-color : $theme-color !default;
|
||||
$navbar-link-hover-bg : $nocolor !default;
|
||||
$navbar-link-active-color : $theme-color !default;
|
||||
$navbar-link-active-bg : $nocolor !default;
|
||||
$navbar-link-font-family : $headings-font-family !default;
|
||||
|
||||
$navbar-widget-title-color : $black !default;
|
||||
$navbar-widget-title-margin : 0 0 10px 0 !default;
|
||||
$navbar-widget-title-font-size : 14px !default;
|
||||
$navbar-widget-title-font-weight : 900 !default;
|
||||
|
||||
$navbar-dropdown-padding : 8px 18px !default;
|
||||
$navbar-dropdown-bg : #fff !default;
|
||||
$navbar-dropdown-size : 200px !default;
|
||||
$navbar-dropdown-link-color : #000 !default;
|
||||
$navbar-dropdown-link-hover-color : $theme-color !default;
|
||||
$navbar-dropdown-link-hover-bg : $nocolor !default;
|
||||
$navbar-dropdown-link-transform : none !default;
|
||||
$navbar-dropdown-link-font-size : 14px !default;
|
||||
$navbar-dropdown-link-font-weight : 400 !default;
|
||||
$navbar-dropdown-link-border-color : $nocolor !default;
|
||||
|
||||
$navbar-link-small-padding : 18px 0 !default;
|
||||
$navbar-link-large-padding : 46px 0 46px !default;
|
||||
|
||||
// Vertical Menu
|
||||
// -------------------------
|
||||
|
||||
// Top Menu
|
||||
// -------------------------
|
||||
$navbar-menutop-font-weight : 800 !default;
|
||||
$navbar-menutop-font-size : 12px !default;
|
||||
$navbar-menutop-padding-top : 22px !default;
|
||||
$navbar-menutop-padding-bottom : 18px !default;
|
||||
$navbar-menutop-color : #828282 !default;
|
||||
$navbar-menutop-margin : 0 10px !default;
|
||||
|
||||
// Off-Canvas Menu
|
||||
// -------------------------
|
||||
$navbar-offcanvas-width : 69% !default;
|
||||
$navbar-offcanvas-bg-close : $nocolor !default;
|
||||
$navbar-offcanvas-color : $black !default;
|
||||
$navbar-offcanvas-bg : #f5f5f5 !default;
|
||||
$navbar-offcanvas-border : rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
// Inverted navbar links
|
||||
// -------------------------
|
||||
$navbar-offcanvas-link-color : $text-color !default;
|
||||
$navbar-offcanvas-link-hover-color : #0281AB !default;
|
||||
$navbar-offcanvas-link-hover-bg : transparent !default;
|
||||
$navbar-offcanvas-link-active-color : $navbar-offcanvas-link-hover-color !default;
|
||||
$navbar-offcanvas-link-active-bg : darken($navbar-offcanvas-bg, 10%) !default;
|
||||
$navbar-offcanvas-link-disabled-color : #444 !default;
|
||||
$navbar-offcanvas-link-disabled-bg : transparent !default;
|
||||
$navbar-offcanvas-link-font-size : 14px !default;
|
||||
|
||||
// Inverted navbar brand label
|
||||
// -------------------------
|
||||
$navbar-offcanvas-brand-color : $navbar-offcanvas-link-color !default;
|
||||
$navbar-offcanvas-brand-hover-color : $white !default;
|
||||
$navbar-offcanvas-brand-hover-bg : transparent !default;
|
||||
|
||||
// Inverted navbar search
|
||||
// -------------------------
|
||||
$navbar-offcanvas-search-bg : lighten($navbar-offcanvas-bg, 25%) !default;
|
||||
$navbar-offcanvas-search-bg-focus : $white !default;
|
||||
$navbar-offcanvas-search-border : $navbar-offcanvas-bg !default;
|
||||
$navbar-offcanvas-search-placeholder-color : $light-gray !default;
|
||||
$navbar-offcanvas-search-input-bg : transparentize($black, .10) !default;
|
||||
|
||||
// Inverted navbar toggle
|
||||
// -------------------------
|
||||
$navbar-offcanvas-toggle-hover-bg : $gray-dark !default;
|
||||
$navbar-offcanvas-toggle-icon-bar-bg : $white !default;
|
||||
$navbar-offcanvas-toggle-border-color : $gray-dark !default;
|
||||
|
||||
$navbar-offcanvas-button-position : -172px !default;
|
||||
88
assets/scss/components/vars/_widget.scss
Executable file
88
assets/scss/components/vars/_widget.scss
Executable file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Blocks Layout Selectors
|
||||
*/
|
||||
$block-prefix : 'widget' !default;
|
||||
$block-selector : 'widget ' !default;
|
||||
$block-heading-selector : 'widget-title, .widgettitle' !default;
|
||||
$block-content-selector : 'widget-content' !default;
|
||||
$block-heading-reversed-selector : 'widget-title-reversed' !default;
|
||||
$container-prefix : 'wpb-container' !default;
|
||||
|
||||
|
||||
|
||||
// Box Modules
|
||||
// -------------------------
|
||||
$block-module-margin-bottom : 30px !default;
|
||||
$block-module-padding : 0px !default;
|
||||
$block-module-border-color : none !default;
|
||||
|
||||
$block-module-heading-color : #000000 !default;
|
||||
$block-module-heading-border : 0px !default;
|
||||
$block-module-heading-transform : uppercase !default;
|
||||
$block-module-heading-line-height : normal !default;
|
||||
$block-module-heading-bg : transparent !default;
|
||||
$block-module-heading-padding : 0 0 15px !default;
|
||||
$block-module-heading-margin : 0 0 25px !default;
|
||||
$block-module-heading-font-size : 16px !default;
|
||||
$block-module-heading-font-weight : 700 !default;
|
||||
$block-module-heading-show-separator : none !default;
|
||||
$block-module-heading-image-position : 0 0 !default;
|
||||
|
||||
$block-module-content-bg : transparent !default;
|
||||
$block-module-content-color : #bbb !default;
|
||||
$block-module-content-border : 1px solid $border-color !default;
|
||||
$block-module-content-padding : 20px !default;
|
||||
$block-module-content-margin : 1px !default;
|
||||
$block-module-content-radius : 0px !default;
|
||||
|
||||
$block-module-highlighted-bg : $theme-color !default;
|
||||
$block-module-highlighted-border : solid 2px $theme-color !default;
|
||||
|
||||
$block-module-footer-heading-color : $white !default;
|
||||
|
||||
$block-product-padding : 0 !default;
|
||||
$block-heading-letter-spacing : 0 !default;
|
||||
|
||||
// Sidebar
|
||||
// -------------------------
|
||||
$block-sidebar-module-border : none !default;
|
||||
$block-sidebar-box-padding : 0 !default;
|
||||
$block-sidebar-box-margin : 0 0 30px !default;
|
||||
|
||||
$block-sidebar-list-padding-vertical : 13px 0px 13px 13px !default;
|
||||
$block-sidebar-list-border-color : $border-color !default;
|
||||
|
||||
$block-sidebar-hightlight-margin : 0 0 20px !default;
|
||||
$block-sidebar-heading-margin : 0 !default;
|
||||
$block-sidebar-heading-hightlight-bg : $nocolor !default;
|
||||
$block-sidebar-heading-hightlight-padding : 0 !default;
|
||||
$block-sidebar-heading-hightlight-margin : 0 !default;
|
||||
$block-sidebar-heading-hightlight-color : $black !default;
|
||||
$block-sidebar-heading-hightlight-margin-bottom : 0px !default;
|
||||
$block-sidebar-heading-hightlight-font-size : 14px !default;
|
||||
$block-sidebar-heading-hightlight-font-weight : 900 !default;
|
||||
$block-sidebar-hightlight-content-bg : $nocolor !default;
|
||||
$block-sidebar-hightlight-content-color : #666666 !default;
|
||||
$block-sidebar-hightlight-content-padding : 0 !default;
|
||||
$block-sidebar-hightlight-border : 1px solid rgba(0, 0, 0, 0.1) !default;
|
||||
$block-sidebar-hightlight-font-size : 12px !default;
|
||||
$block-sidebar-hightlight-transform : uppercase !default;
|
||||
$block-sidebar-hightlight-font-weight : 300 !default;
|
||||
$block-sidebar-link-hightlight-color : $white !default;
|
||||
$block-sidebar-link-hightlight-hover-color : $theme-color !default;
|
||||
$block-sidebar-list-hightlight-border-color : #393939 !default;
|
||||
$block-sidebar-list-hightlight-font-size : 10px !default;
|
||||
$block-sidebar-list-hightlight-padding : 17px 15px !default;
|
||||
$block-sidebar-list-hightlight-image : url('#{$image-theme-path}dot.jpg') 0 22px no-repeat !default;
|
||||
$block-sidebar-list-image : url('#{$image-theme-path}dot.jpg') 0 22px no-repeat !default;
|
||||
|
||||
$block-sidebar-heading-padding : 0 0 30px !default;
|
||||
$block-sidebar-heading-margin : 0 !default;
|
||||
$block-sidebar-heading-font-size : 14px !default;
|
||||
$block-sidebar-heading-color : $black !default;
|
||||
$block-sidebar-heading-line-height : 20px !default;
|
||||
$block-sidebar-heading-font-weight : 900 !default;
|
||||
|
||||
$block-sidebar-widget-border : 1px solid lighten($border-color, 3%) !default;
|
||||
|
||||
/********* LAYOUT **************/
|
||||
41
assets/scss/opalestate.scss
Executable file
41
assets/scss/opalestate.scss
Executable file
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
Theme Name: FullHouse
|
||||
Theme URI: http://demovenustheme.com/wordpress/opalestate/
|
||||
Author: Opal Team
|
||||
Author URI: https://wordpress.org/
|
||||
Description: In 2019, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
|
||||
Version: 1.0
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
|
||||
Text Domain: opalestate
|
||||
|
||||
This theme, like WordPress, is licensed under the GPL.
|
||||
Use it to make something cool, have fun, and share what you've learned with others.
|
||||
*/
|
||||
// Core variables and mixins
|
||||
|
||||
@import "bootstrap/variables";
|
||||
@import "bootstrap/mixins";
|
||||
|
||||
@import "bootstrap/grid";
|
||||
@import "opalestate/vars";
|
||||
|
||||
|
||||
@import "components/variables";
|
||||
@import "components/mixins";
|
||||
|
||||
@import "opalestate/layout";
|
||||
@import "opalestate/page";
|
||||
@import "opalestate/shortcodes";
|
||||
|
||||
// @import "opalestate/styles";
|
||||
@import "opalestate/3rd";
|
||||
@import "opalestate/form";
|
||||
@import "opalestate/properties-loop";
|
||||
@import "opalestate/agency-loop";
|
||||
@import "opalestate/elements";
|
||||
@import "opalestate/styles";
|
||||
@import "opalestate/modules";
|
||||
|
||||
@import "opalestate/dashboard";
|
||||
497
assets/scss/opalestate/_3rd.scss
Executable file
497
assets/scss/opalestate/_3rd.scss
Executable file
@@ -0,0 +1,497 @@
|
||||
//header login
|
||||
.site-header-account{
|
||||
.account-label{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.opalestate-popup{
|
||||
.popup-body{
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-bottom: $padding-base;
|
||||
}
|
||||
.opalestate-social-login__buttons{
|
||||
a{
|
||||
padding: 0 10px;
|
||||
}
|
||||
i{
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Google Login
|
||||
.mfp-with-zoom .mfp-container,
|
||||
.mfp-with-zoom.mfp-bg {
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* ideally, transition speed should match zoom duration */
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.mfp-with-zoom .white-popup{
|
||||
top: 20px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.mfp-with-zoom.mfp-ready .white-popup{
|
||||
top: 0;
|
||||
}
|
||||
.mfp-with-zoom.mfp-ready .mfp-container {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
.mfp-with-zoom.mfp-ready.mfp-bg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mfp-with-zoom.mfp-removing .mfp-container,
|
||||
.mfp-with-zoom.mfp-removing.mfp-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
.white-popup {
|
||||
position: relative;
|
||||
background: $white;
|
||||
padding: $grid-gutter-width;
|
||||
width:auto;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
.mfp-close{
|
||||
top: 15px;
|
||||
}
|
||||
.submit{
|
||||
a{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.opalestate-button{
|
||||
padding: 17px 35px 14px 35px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.opalestate-social-login__buttons{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
a{
|
||||
display: block;
|
||||
padding: 0 $padding-base;
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
li{
|
||||
&:not(:last-child){
|
||||
margin-bottom: $padding-base;
|
||||
}
|
||||
}
|
||||
i{
|
||||
margin-right: $padding-base;
|
||||
padding: 16px $padding-base 14px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 35px;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
border-left: 1px solid rgba(0, 0, 0, .1);
|
||||
border-right: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-social-login-facebook-btn{
|
||||
background-color: #3C5A99;
|
||||
}
|
||||
.opalestate-social-login-google-btn{
|
||||
background-color: #d34836;
|
||||
}
|
||||
// Loading map
|
||||
.sk-folding-cube {
|
||||
margin: 20px auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.sk-folding-cube .sk-cube:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $theme-color;
|
||||
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
-ms-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
.sk-folding-cube .sk-cube2 {
|
||||
-webkit-transform: scale(1.1) rotateZ(90deg);
|
||||
transform: scale(1.1) rotateZ(90deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube3 {
|
||||
-webkit-transform: scale(1.1) rotateZ(180deg);
|
||||
transform: scale(1.1) rotateZ(180deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube4 {
|
||||
-webkit-transform: scale(1.1) rotateZ(270deg);
|
||||
transform: scale(1.1) rotateZ(270deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube2:before {
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.sk-folding-cube .sk-cube3:before {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.sk-folding-cube .sk-cube4:before {
|
||||
-webkit-animation-delay: 0.9s;
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
@-webkit-keyframes sk-foldCubeAngle {
|
||||
0%, 10% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
} 25%, 75% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
} 90%, 100% {
|
||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-foldCubeAngle {
|
||||
0%, 10% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
} 25%, 75% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
} 90%, 100% {
|
||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
////
|
||||
.cmb2-element{
|
||||
.ui-datepicker{
|
||||
width: 350px !important;
|
||||
.ui-datepicker-month,.ui-datepicker-year{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-target, .noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
direction: ltr
|
||||
}
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: relative;
|
||||
z-index: 1
|
||||
}
|
||||
.noUi-stacking .noUi-handle {
|
||||
z-index: 10
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: left .3s, top .3s;
|
||||
transition: left .3s, top .3s
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit!important
|
||||
}
|
||||
.noUi-base {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0)
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
.noUi-base {
|
||||
.noUi-origin {
|
||||
.noUi-handle {
|
||||
@include rtl-margin-left(-18px);
|
||||
}
|
||||
&:first-child {
|
||||
.noUi-handle {
|
||||
@include rtl-margin-left(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-horizontal[data-mode="1"]{
|
||||
.noUi-base{
|
||||
background: $primary;
|
||||
.noUi-origin{
|
||||
background: #e9e9f6;
|
||||
&:first-child {
|
||||
.noUi-handle {
|
||||
@include rtl-margin-left(-9px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-horizontal[data-mode="2"]{
|
||||
.noUi-base{
|
||||
background:#e9e9f6;
|
||||
.noUi-origin{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
height:18px;
|
||||
width:18px;
|
||||
left: 0px;
|
||||
top: -6px;
|
||||
&.noUi-handle-upper {
|
||||
@include rtl-margin-left(-18px);
|
||||
}
|
||||
}
|
||||
.noUi-vertical {
|
||||
width: 18px
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px
|
||||
}
|
||||
.noUi-background {
|
||||
background: #dadada;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: $primary;
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.noUi-origin {
|
||||
}
|
||||
.noUi-target {
|
||||
}
|
||||
.noUi-target.noUi-connect {
|
||||
}
|
||||
.noUi-dragable {
|
||||
cursor: w-resize
|
||||
}
|
||||
.noUi-vertical .noUi-dragable {
|
||||
cursor: n-resize
|
||||
}
|
||||
.noUi-handle {
|
||||
border-radius: 50%;
|
||||
background: #FFF;
|
||||
cursor: default;
|
||||
border: 1px solid transparentize($black, .9);
|
||||
}
|
||||
.noUi-active {
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB
|
||||
}
|
||||
.noUi-handle:after, .noUi-handle:before {
|
||||
}
|
||||
.noUi-handle:after {
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
}
|
||||
[disabled] .noUi-connect, [disabled].noUi-connect {
|
||||
background: #B8B8B8
|
||||
}
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
|
||||
//Tooltip
|
||||
.opalestate-rating-detail-container { display: none; }
|
||||
.opalestate-tooltip{
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.opalestate-rating-detail{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
li{
|
||||
padding: 5px 0;
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
li:not(:last-child){
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
}
|
||||
}
|
||||
body {
|
||||
.tooltipster-sidetip .tooltipster-box {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-left .tooltipster-box {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-box {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-top .tooltipster-box {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-content {
|
||||
color: $body-color;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-arrow {
|
||||
height: 6px;
|
||||
margin-left: -6px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow,
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
|
||||
height: 12px;
|
||||
margin-left: 0;
|
||||
margin-top: -6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-arrow-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-arrow-border {
|
||||
border: 6px solid transparent;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
|
||||
border-bottom-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
|
||||
border-right-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
|
||||
border-top-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
|
||||
left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
/***/
|
||||
|
||||
/**
|
||||
* jQuery toast plugin created by Kamran Ahmed copyright MIT license 2014
|
||||
*/
|
||||
.jq-toast-wrap { display: block; position: fixed; width: 350px; pointer-events: none !important; margin: 0; padding: 0; letter-spacing: normal; z-index: 9000 !important; }
|
||||
.jq-toast-wrap * { margin: 0; padding: 0; }
|
||||
|
||||
.jq-toast-wrap.bottom-left { bottom: 20px; left: 20px; }
|
||||
.jq-toast-wrap.bottom-right { bottom: 20px; right: 40px; }
|
||||
.jq-toast-wrap.top-left { top: 20px; left: 20px; }
|
||||
.jq-toast-wrap.top-right { top: 20px; right: 40px; }
|
||||
|
||||
.jq-toast-single { display: block; width: 100%; padding: 10px; margin: 0px 0px 5px; border-radius: 4px; font-size: 12px;line-height: 17px; position: relative; pointer-events: all !important; background-color: #444444; color: white; }
|
||||
|
||||
.jq-toast-single h2 {font-size: 14px; margin: 0px 0px 7px; background: none; color: inherit; line-height: inherit; letter-spacing: normal; }
|
||||
.jq-toast-single a { color: #eee; text-decoration: none; font-weight: bold; border-bottom: 1px solid white; padding-bottom: 3px; font-size: 12px; }
|
||||
|
||||
.jq-toast-single ul { margin: 0px 0px 0px 15px; background: none; padding:0px; }
|
||||
.jq-toast-single ul li { list-style-type: disc !important; line-height: 17px; background: none; margin: 0; padding: 0; letter-spacing: normal; }
|
||||
|
||||
.close-jq-toast-single { position: absolute; top: 3px; right: 7px; font-size: 14px; cursor: pointer; }
|
||||
|
||||
.jq-toast-loader { display: block; position: absolute; top: -2px; height: 5px; width: 0%; left: 0; border-radius: 5px; background: red; }
|
||||
.jq-toast-loaded { width: 100%; }
|
||||
.jq-has-icon { padding: 10px 10px 10px 50px; background-repeat: no-repeat; background-position: 10px; }
|
||||
.jq-icon-info { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII='); background-color: #31708f; color: #d9edf7; border-color: #bce8f1; }
|
||||
.jq-icon-warning { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII='); background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; }
|
||||
.jq-icon-error { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII='); background-color: #a94442; color: #f2dede; border-color: #ebccd1; }
|
||||
.jq-icon-success { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg=='); color: #dff0d8; background-color: #3c763d; border-color: #d6e9c6; }
|
||||
150
assets/scss/opalestate/_agency-loop.scss
Executable file
150
assets/scss/opalestate/_agency-loop.scss
Executable file
@@ -0,0 +1,150 @@
|
||||
.opalestate_agency{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
.trusted-label{
|
||||
font-size: 23px;
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.team-header {
|
||||
.trusted-label{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
border: 1px solid $border-color;
|
||||
width: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.agency-box-title{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.agency-address{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.agency-box-meta{
|
||||
[class*="agency-box-"]{
|
||||
&:not(:last-of-type){
|
||||
}
|
||||
i{
|
||||
width: $font-size-base;
|
||||
margin-right: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: inherit;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//Grid Layout
|
||||
.agency-grid-style{
|
||||
|
||||
.agency-body-content{
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.agency-logo{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
.agency-info{
|
||||
padding: $grid-gutter-width;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
.agency-content{
|
||||
flex: 1;
|
||||
}
|
||||
.agency-box-meta{
|
||||
padding: $grid-gutter-width;
|
||||
[class*="agency-box-"]{
|
||||
line-height: 1;
|
||||
&:not(:last-of-type){
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agency-box-title{
|
||||
margin-bottom: 9px;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
.agency-address{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
//List Layout
|
||||
.agency-list-style{
|
||||
.agency-inner{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $grid-gutter-width 0;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.agent-box-image{
|
||||
height: 100%;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.agency-header{
|
||||
|
||||
margin: 0 $grid-gutter-width;
|
||||
}
|
||||
.agency-body-content{
|
||||
flex: 1;
|
||||
padding: $grid-gutter-width 0 0;
|
||||
}
|
||||
.agency-logo{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $border-color;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: $grid-gutter-width;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.agency-info{
|
||||
position: relative;
|
||||
padding: 0 $grid-gutter-width 18px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: 17px;
|
||||
|
||||
}
|
||||
.agency-box-meta{
|
||||
@media screen and (max-width:767px){
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
.agency-box-title{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@media screen and (min-width:768px) {
|
||||
.agency-body-content{
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.agency-header{
|
||||
max-width: 240px;
|
||||
}
|
||||
.agency-info{
|
||||
padding: 0 0 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
assets/scss/opalestate/_archive.scss
Executable file
88
assets/scss/opalestate/_archive.scss
Executable file
@@ -0,0 +1,88 @@
|
||||
//
|
||||
.archive{
|
||||
.opalestate-head{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
.opalestate-head {
|
||||
position: relative;
|
||||
background-color:$secondary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 640px;
|
||||
.opalestate-heading {
|
||||
color:$white;
|
||||
text-align:center;
|
||||
p{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
a{
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-head-title{
|
||||
color: $white;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.search-agent-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.opalestate-head-form{
|
||||
padding: 0 $grid-gutter-width;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
}
|
||||
.opalestate-single-agent{
|
||||
min-height: 500px;
|
||||
align-items: flex-end;
|
||||
.opalestate-heading{
|
||||
text-align: left;
|
||||
& > span{
|
||||
margin-bottom: 13px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-head-title{
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
.opalesate-archive-top{
|
||||
margin-bottom: $grid-gutter-width*2;
|
||||
padding: 12px 0;
|
||||
border-style: solid;
|
||||
border-width: 1px 0 1px;
|
||||
border-color: $border-color;
|
||||
position: relative;
|
||||
.opalestate-results{
|
||||
line-height: 45px;
|
||||
}
|
||||
.opalestate-sortable{
|
||||
display: inline-block;
|
||||
.form-control,.select2-selection--single{
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalesate-archive-bottom {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.display-mode{
|
||||
display: inline-block;
|
||||
.btn:not(:disabled):not(.disabled){
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: $body-color;
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
&.active,&:hover{
|
||||
background-color: transparent;
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
253
assets/scss/opalestate/_dashboard.scss
Executable file
253
assets/scss/opalestate/_dashboard.scss
Executable file
@@ -0,0 +1,253 @@
|
||||
.opalestate-admin-box{
|
||||
margin-bottom:$padding-base*2;
|
||||
h3 {
|
||||
border-bottom:1px $border-color solid;
|
||||
padding-bottom:15px;
|
||||
padding-top:30px;
|
||||
font-size:150%;
|
||||
}
|
||||
}
|
||||
|
||||
/** CMD BOX 2 */
|
||||
.select2-search-member {
|
||||
display:flex;
|
||||
.member-meta {
|
||||
margin-left:12px;
|
||||
font-weight:500
|
||||
}
|
||||
}
|
||||
.cmb2-wrap .field-row-2 .cmb-row {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cmb2-wrap .field-row-2 .cmb-row:nth-child(even) > div {
|
||||
@media screen and (min-width:768px){
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
.cmb2-wrap .cmb-td {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
|
||||
.bg-info {
|
||||
background-color:#0288d1 !important;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color:#ffca28!important;
|
||||
}
|
||||
.alert.alert-success{
|
||||
background: #0F93FA;
|
||||
}
|
||||
|
||||
.alert.alert-danger{
|
||||
background: #f55753;
|
||||
}
|
||||
.alert.alert-warning{
|
||||
background: #ffca28;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* Dashboard Page
|
||||
*/
|
||||
|
||||
@media( max-width: $screen-xs-max ) {
|
||||
|
||||
.user-dasboard-sidebar {
|
||||
display:none;
|
||||
}
|
||||
body.active {
|
||||
.user-dasboard-sidebar{
|
||||
display:block;
|
||||
}
|
||||
margin-left:251px!important;
|
||||
}
|
||||
.page-template-user-management {
|
||||
margin-left:0!important;
|
||||
}
|
||||
|
||||
#show-user-sidebar-btn {
|
||||
display:block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
display:flex;
|
||||
}
|
||||
.opalestate-user-greeting {
|
||||
.popup-head {
|
||||
float:right;
|
||||
}
|
||||
.popup-head a {
|
||||
color:$white;
|
||||
text-align:right;
|
||||
img {
|
||||
width:40px;
|
||||
border-radius:50%;
|
||||
}
|
||||
position:relative;
|
||||
i {
|
||||
padding:12px;
|
||||
border-radius:50%;
|
||||
background:rgba(0, 0, 0, .06 );
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding:0;
|
||||
margin :0 ;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-navbar {
|
||||
|
||||
background-color: $white;
|
||||
padding:9px $grid-gutter-width;
|
||||
|
||||
border-bottom:1px solid $border-color;
|
||||
ul{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
background-color:$white;
|
||||
border:solid 1px $border-color;
|
||||
padding:$padding-base;
|
||||
i {
|
||||
background:rgba(0, 0, 0, .18);
|
||||
padding:15px;
|
||||
border-radius:50%;
|
||||
}
|
||||
h5 {
|
||||
font-size:200%;
|
||||
text-align:center;
|
||||
}
|
||||
span {
|
||||
font-weight:700
|
||||
}
|
||||
}
|
||||
|
||||
.page-template-user-management {
|
||||
.opalestate-box{
|
||||
@media screen and (min-width:768px){
|
||||
margin-right: $padding-base;
|
||||
}
|
||||
}
|
||||
&.logged-in { margin-left:251px; }
|
||||
#content {
|
||||
padding-left:$padding-base*2;
|
||||
padding-right:$padding-base*2;
|
||||
}
|
||||
|
||||
#show-user-sidebar-btn {
|
||||
display:none;
|
||||
margin-right:$padding-base;
|
||||
}
|
||||
.opalestate-panel-myaccount {
|
||||
padding-top: $padding-base*3;
|
||||
padding-bottom: $padding-base*3;
|
||||
}
|
||||
}
|
||||
.admin-bar{
|
||||
.opalestate-user-management{
|
||||
.user-dasboard-sidebar{
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalmembership-dashboard{
|
||||
.btn-link{
|
||||
background-color: $secondary;
|
||||
color: $white;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-user-management {
|
||||
min-height: 600px;
|
||||
.property-submission-form{
|
||||
.opalestate-box{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.user-dasboard-sidebar {
|
||||
background-color:$headings-color;
|
||||
min-height:900px;
|
||||
position:fixed;
|
||||
left:0;
|
||||
width:250px;
|
||||
height:100%;
|
||||
z-index:100;
|
||||
top:0px;
|
||||
.user-dasboard-sidebar-inner{
|
||||
padding-top:20px;
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
padding:32px $padding-base;
|
||||
}
|
||||
|
||||
|
||||
.account-links {
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin : 0;
|
||||
a {
|
||||
padding:8px 20px;
|
||||
width:100%;
|
||||
display:block;
|
||||
font-weight:500 ;
|
||||
i {
|
||||
margin-right:6px;
|
||||
color:$body-color;
|
||||
}
|
||||
color:$body-color;
|
||||
&:hover {
|
||||
background-color:$primary;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-main {
|
||||
padding-top:$padding-base;
|
||||
$padding-bottom:$padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
//my reviews
|
||||
.opalestate-my-reviews{
|
||||
.commentlist{
|
||||
margin: 0;
|
||||
}
|
||||
.meta{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.opalestate-review__ratings{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.opalestate-my-reviews-item_property-name{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.opalestate-my-reviews-item_property-view{
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//my property
|
||||
.my-property-list{
|
||||
.entry-content{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard {
|
||||
|
||||
}
|
||||
975
assets/scss/opalestate/_elements.scss
Executable file
975
assets/scss/opalestate/_elements.scss
Executable file
@@ -0,0 +1,975 @@
|
||||
.floating-keep-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width:100%;
|
||||
background:#FFF;
|
||||
z-index:999;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
.admin-bar{
|
||||
.floating-keep-top{
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.highlight-text{
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
//Property status
|
||||
ul.property-status{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
li{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
&:not(:last-child){
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//single stick bars
|
||||
.keep-top-bars{
|
||||
top: -70px;
|
||||
transition: all 1s ease-in-out;
|
||||
border-bottom: 1px solid $border-color;
|
||||
ul{
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
&:not(.opalestate-scroll-elements){
|
||||
padding: 10px 0;
|
||||
}
|
||||
li{
|
||||
&:not(:last-child){
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.floating-keep-top{
|
||||
border-bottom: none;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
|
||||
.single-property-buttons{
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
a{
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
text-transform: capitalize;
|
||||
i{
|
||||
margin-right: 18px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
width: 52px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-scroll-elements{
|
||||
a:not(.btn-primary){
|
||||
display: block;
|
||||
padding: 21px 0 17px;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: inherit;
|
||||
transition: all .5s ease-in-out;
|
||||
&:focus, &:hover{
|
||||
border-color: $primary;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Rating star
|
||||
.opalestate-rating__stars{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: $font-size-base;
|
||||
font-size: $font-size-base;
|
||||
width: calc(#{$font-size-base}*5 - 5px);
|
||||
line-height: 1;
|
||||
|
||||
&::before{
|
||||
font-family:'FontAwesome';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
content: "\f005\f005\f005\f005\f005";
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
span{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: transparent;
|
||||
padding-top: 20px;
|
||||
&::before{
|
||||
font-family:'FontAwesome';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
content: "\f005\f005\f005\f005\f005";
|
||||
color: #f6be15;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(#{$font-size-base}*5);
|
||||
}
|
||||
}
|
||||
}
|
||||
p.stars {
|
||||
a {
|
||||
position: relative;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
text-indent: -999em;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
font-family: "FontAwesome";
|
||||
content: "\f006";
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ a::before {
|
||||
|
||||
content: "\f006";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
&::before {
|
||||
|
||||
content: '\f005';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a.active {
|
||||
&::before {
|
||||
|
||||
content: '\f005';
|
||||
}
|
||||
|
||||
~ a::before {
|
||||
|
||||
content: '\f006';
|
||||
}
|
||||
}
|
||||
|
||||
a:not( .active ) {
|
||||
&::before {
|
||||
|
||||
content: '\f005';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//mortgage
|
||||
.opalestate-mortgage-chart-svg{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
&::after{
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.opalestate-loan-amount{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Form group
|
||||
.opal-form-group{
|
||||
margin-top: 16px;
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SOCIAL ICONS
|
||||
**/
|
||||
.opalestate-social-icons{
|
||||
margin:15px -30px 0 -30px;
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 0 $theme-padding;
|
||||
[class^="opalestate-social-"]{
|
||||
font-size: 13px;
|
||||
color: $body-color;
|
||||
display:inline-block;
|
||||
margin: 10px 5px 0 0;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
line-height: 32px;
|
||||
@include square(34px);
|
||||
background: $border-color;
|
||||
transition: all 0.2s ease-out 0s;
|
||||
border-radius: 50%;
|
||||
&:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover{
|
||||
border-color: $link-hover-color;
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
.opalestate-social-white{
|
||||
background: #FFFFFF;
|
||||
color: $body-color;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.opalestate-social-outline{
|
||||
background: transparent;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.opalestate-social-outline-light{
|
||||
background: transparent;
|
||||
color: #FFF;
|
||||
border: 1px solid #FFFFFF;
|
||||
&:hover{
|
||||
background: #FFF;
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
[class*="opalestate-social-"]{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
[class*="opalestate-social-"]{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.opalestate-sicolor{
|
||||
[class*="opalestate-social-"]{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Tabs
|
||||
*/
|
||||
.opalestate-tab-head{
|
||||
background-color:$primary;
|
||||
}
|
||||
.tab-item {
|
||||
color: $white;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all .5s ease-in-out;
|
||||
&.active,&:hover {
|
||||
border-color: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
padding: 14px 18px 15px;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
.opalestate-tab-content {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
clear:both;
|
||||
}
|
||||
|
||||
|
||||
.opalmembership-login-form-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-tabs {
|
||||
margin-bottom: $padding-base;
|
||||
background-color: $white;
|
||||
padding: 0;
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* end Tabs
|
||||
*/
|
||||
//Status Label
|
||||
.property-group-label,
|
||||
.agency-label {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $padding-base;
|
||||
left: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.property-group-status {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $padding-base;
|
||||
right: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.property-group-status + .property-meta-bottom {
|
||||
top: 45px;
|
||||
right: 20px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.agency-header{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// label
|
||||
.label {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
line-height: 14px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.property-label,
|
||||
.property-status-item {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style: none;
|
||||
line-height: 14px;
|
||||
&.property-status-for-rent,
|
||||
&.property-status-for-sale {
|
||||
background-color:$primary;
|
||||
}
|
||||
.property-label-item:not(last-child){
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
.property-label-rented {
|
||||
background-color: #2048f6;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.property-label-sold {
|
||||
background-color: #fee882;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-featured {
|
||||
background-color:$secondary;
|
||||
color:$white;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.single {
|
||||
.label-featured {
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
|
||||
////
|
||||
.property-meta-list {
|
||||
> li {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-box {
|
||||
display: inline-block;
|
||||
}
|
||||
.info-meta{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/// map infor view
|
||||
.map-info-preview{
|
||||
position: relative;
|
||||
padding: $grid-gutter-width;
|
||||
background-color:#FFFFFF;
|
||||
margin-bottom: 15px;
|
||||
max-width: 300px;
|
||||
box-shadow: $box-shadow-base;
|
||||
&:before {
|
||||
@include triangle( bottom,0px, $white, 20px );
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: -14px;
|
||||
margin-left: -34px;
|
||||
}
|
||||
a img{
|
||||
max-width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
.media-top{
|
||||
position: relative;
|
||||
}
|
||||
.property-status{
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
}
|
||||
.label-property{
|
||||
visibility: hidden;
|
||||
}
|
||||
.info-container{
|
||||
.prop-title {
|
||||
text-transform: uppercase;
|
||||
margin: 15px 0 8px;
|
||||
}
|
||||
p {
|
||||
line-height: 22px;
|
||||
}
|
||||
.prop-address {
|
||||
|
||||
}
|
||||
}
|
||||
.property-meta-list.list-inline {
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> li {
|
||||
flex-basis: 50%;
|
||||
padding: 0;
|
||||
margin: $padding-base 0 0;
|
||||
i{
|
||||
width: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow-down{
|
||||
border-style: solid;
|
||||
border-width: 10px 10px 0;
|
||||
bottom: -13px;
|
||||
height: 0;
|
||||
left: 112px;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-color:$primary;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-map-preview-wrap {
|
||||
.gm-style img {
|
||||
max-width: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
> img {
|
||||
position: absolute!important;
|
||||
z-index: 99;
|
||||
right: -5px;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-popup{
|
||||
position: relative;
|
||||
.popup-head {
|
||||
position:relative;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.notify {
|
||||
background-color:#00bcd4;
|
||||
padding:1px 6px;
|
||||
border-radius:50%;
|
||||
position:absolute;
|
||||
top:-10px;
|
||||
right:0px;
|
||||
font-size:8px;
|
||||
color:$white;
|
||||
&.active {
|
||||
top:auto;
|
||||
bottom:-10px;
|
||||
padding:5px;
|
||||
background-color:$primary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body{
|
||||
display: none;
|
||||
position:absolute;
|
||||
z-index: 999;
|
||||
min-width: 450px;
|
||||
top: 30px;
|
||||
margin:0 0 0 -194px;
|
||||
padding: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
box-shadow: $box-shadow-base;
|
||||
h6 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.account-dashboard-content{
|
||||
padding: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
box-shadow: $box-shadow-base;
|
||||
position: relative;
|
||||
&:before {
|
||||
@include triangle( top,0px, $white, 20px );
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.active .popup-body{
|
||||
display: block;
|
||||
}
|
||||
&.hover-align-right:hover .popup-body {
|
||||
display:block;
|
||||
right:0;
|
||||
padding-top:30px;
|
||||
min-width: 250px;
|
||||
.account-dashboard-content{
|
||||
&:before {
|
||||
right:-15px;
|
||||
left:auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popup-close{
|
||||
position:absolute;
|
||||
top: 10px;
|
||||
@include rtl-right(15px);
|
||||
color:$primary;
|
||||
cursor: hand;cursor:pointer;
|
||||
}
|
||||
}
|
||||
//Pagination
|
||||
.pagination {
|
||||
li{
|
||||
display: block;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
padding: 5px $padding-base;
|
||||
font-weight: 500;
|
||||
color: $body-color;
|
||||
&.current, &:hover{
|
||||
background-color: $primary;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-links{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
//// opalestate-dropdown
|
||||
|
||||
.opalestate-dropdown {
|
||||
position:relative;
|
||||
.dropdown-body {
|
||||
position:absolute;
|
||||
display:none;
|
||||
background:red;
|
||||
min-width:250px;
|
||||
right:0;
|
||||
top:50px;
|
||||
}
|
||||
&:hover {
|
||||
.dropdown-body {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Agent
|
||||
// display in single package
|
||||
.agent-box-list {
|
||||
.inner {
|
||||
display:flex;
|
||||
.agent-preview {
|
||||
width:80px;
|
||||
margin-right:$padding-base;
|
||||
img { border-radius:50%; }
|
||||
}
|
||||
border-bottom:solid 1px $border-color;
|
||||
padding-bottom:$padding-base*2;
|
||||
}
|
||||
.opalestate-social-icons {
|
||||
padding-top:$padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
.single-property-sidebar {
|
||||
.agent-box-list{
|
||||
.inner {
|
||||
border-bottom:0;
|
||||
}
|
||||
.opalestate-social-icons {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom:$padding-base;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.agent-box-image{
|
||||
overflow: hidden;
|
||||
}
|
||||
.property-agent-info{
|
||||
.team-header{
|
||||
text-align: center;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
.property-agent-contact{
|
||||
.agent-preview{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.team-header{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.team-header {
|
||||
position: relative;
|
||||
.agent-label {
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
padding: 0 10px;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.agent-featured{
|
||||
.agent-label{
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
.agent-levels{
|
||||
.agent-label{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agent-box-title{
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 20px;
|
||||
//margin-bottom: 28px;
|
||||
}
|
||||
.agent-preview{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
position: relative;
|
||||
.agent-avatar{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-box-job{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.agent-box-meta{
|
||||
color: $body-color-light;
|
||||
div[class*="agent-box-"]{
|
||||
line-height: 1;
|
||||
padding: 8px 1px;
|
||||
&:first-of-type{
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-of-type{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:not(:last-of-type){
|
||||
//border-bottom: 1px solid $border-color;
|
||||
}
|
||||
i{
|
||||
width: $font-size-base;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
h4 {
|
||||
padding-top:0;
|
||||
}
|
||||
}
|
||||
.gallery-summery-style {
|
||||
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
a {
|
||||
display:block;
|
||||
width:20%;
|
||||
height:120px;
|
||||
background-size:cover;
|
||||
background-repeat:no-repeat;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//Featured Properties
|
||||
.my-featured-section{
|
||||
.opalestate_property{
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Floor plans
|
||||
.property-floorplans-session, .tabl-simple-style{ //tabs outline
|
||||
.opalestate-tab-head{
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tab-item{
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: $headings-color;
|
||||
display: inline-block;
|
||||
padding-bottom: 19px;
|
||||
font-weight: $headings-font-weight;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
&:not(:last-of-type){
|
||||
margin-right: 28px;
|
||||
}
|
||||
&.active, &:hover{
|
||||
background-color: transparent;
|
||||
color: $headings-color;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plan-name,.plan-content{
|
||||
display: none;
|
||||
}
|
||||
.plan-image{
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
//Property categories
|
||||
.property-category{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.static-content{
|
||||
padding: $grid-gutter-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.property-category-count{
|
||||
color: $secondary;
|
||||
}
|
||||
.property-category-title{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.property-category-info{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.category-overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
&:hover{
|
||||
.property-category-bg{
|
||||
transform: scale(1.1);
|
||||
&::before{
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-category-bg{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
transform: scale(1);
|
||||
transition: opacity 0.5s ease, transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18);
|
||||
background-position: center center;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.property-city{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.static-content{
|
||||
padding: $grid-gutter-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.property-city-count{
|
||||
color: $secondary;
|
||||
}
|
||||
.property-city-title{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.property-city-info{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.city-overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
&:hover{
|
||||
.property-city-bg{
|
||||
transform: scale(1.1);
|
||||
&::before{
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-city-bg{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
transform: scale(1);
|
||||
transition: opacity 0.5s ease, transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18);
|
||||
background-position: center center;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#opalestate-map-preview .cluster img + div {
|
||||
line-height: 30px !important;
|
||||
}
|
||||
481
assets/scss/opalestate/_form.scss
Executable file
481
assets/scss/opalestate/_form.scss
Executable file
@@ -0,0 +1,481 @@
|
||||
|
||||
/*
|
||||
*
|
||||
*/
|
||||
.opalestate-search-form{
|
||||
&:not([class*="opalestate-search-form--vertical"]){
|
||||
background-color: $white;
|
||||
padding: $theme-padding/2 $theme-padding ;
|
||||
&.opalestate-search-agents-form {
|
||||
border:1px solid $border-color;
|
||||
margin-bottom: $theme-margin;
|
||||
}
|
||||
}
|
||||
.btn-search, .status-item, .opalestate-collapse-btn {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
&.hidden-labels{
|
||||
.opalestate-label{
|
||||
display: none;
|
||||
}
|
||||
.input-search-city {
|
||||
.opalestate-popup {
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
.select2-container,.btn-search,.form-control,.opal-collapse-button,.input-group-number {
|
||||
margin: $padding-base 0;
|
||||
}
|
||||
.opal-slide-ranger{
|
||||
.slide-ranger-label{
|
||||
display: block;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
.map-remove { top: 10px;}
|
||||
}
|
||||
.opalestate-label{
|
||||
font-weight: $headings-font-weight;
|
||||
display: block;
|
||||
color: $headings-color;
|
||||
line-height: 1;
|
||||
margin-top: $theme-margin/2;
|
||||
margin-bottom: $theme-margin/2;
|
||||
}
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
.searchbox-top {
|
||||
border-bottom:solid 1px $border-color;
|
||||
margin-bottom: $padding-base;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.select2-container,.btn-search,.form-control,.list-property-status,.opal-collapse-button,.input-group-number {
|
||||
margin-bottom: $padding-base;
|
||||
}
|
||||
|
||||
.opal-slide-ranger{
|
||||
padding: ceil($padding-base/2) 0;
|
||||
.slide-ranger-label{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.list-property-status{
|
||||
.status-item{
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
padding: 9px 0 6px;
|
||||
color: $white;
|
||||
background-color: $secondary;
|
||||
transition: all ease-in-out 0.5s;
|
||||
&:hover,&.active{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-search {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.opal-slide-ranger{
|
||||
@media screen and (max-width:$screen-sm){
|
||||
margin: $grid-gutter-width/2 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-archive-agency,
|
||||
.opalestate-archive-search-block,
|
||||
.post-type-archive-opalestate_agent{
|
||||
.opalestate-search-form {
|
||||
&:not([class*="opalestate-search-form--vertical"]) {
|
||||
margin: 0 -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-remove {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 40px;
|
||||
}
|
||||
.opalestate-search-opal-map {
|
||||
&.active {
|
||||
.map-remove {
|
||||
display: block;
|
||||
&:focus,
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input[value=""] + .map-remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="opalestate-search-form--vertical"]{
|
||||
.btn-search{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.opalestate-label {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.search-more-options{
|
||||
position: relative;
|
||||
margin: $padding-base 0 5px;
|
||||
line-height: 1;
|
||||
|
||||
}
|
||||
|
||||
a.opal-collapse-button{
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
&:before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: '\f0fe';
|
||||
padding-right:5px;
|
||||
color: $primary;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
&.show{
|
||||
color: $link-hover-color;
|
||||
&:before {
|
||||
content: '\f146';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.more-options-container{
|
||||
margin-top: $padding-base;
|
||||
}
|
||||
.more-options-items{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.opal-collapse-container{
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
button.opal-collapse-button{
|
||||
transition: all 0.5s;
|
||||
width: 100%;
|
||||
i::before{
|
||||
display: block;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
&:hover,&.show{
|
||||
outline: none;
|
||||
}
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
&.show{
|
||||
i::before{
|
||||
transform: rotate(180deg);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-options-item{
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin-bottom: $padding-base;
|
||||
@media(max-width: 767px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.input-search-city {
|
||||
position:relative;
|
||||
.opalestate-popup {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
//custom checkbox
|
||||
.form-item--types{
|
||||
.group-item{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
.custom-checkbox-label{
|
||||
z-index: -1;
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&:checked ~ .custom-checkbox-label{
|
||||
background-color: $primary;
|
||||
&::after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
input ~ .custom-checkbox-label{
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.opalestate-search-form--vertical {
|
||||
.more-options-item {
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.more-options-label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 23px;
|
||||
margin-bottom: 0px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
input[type="checkbox"]{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&:checked ~ .custom-checkbox-label{
|
||||
background-color: $secondary;
|
||||
&::after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
input ~ .custom-checkbox-label{
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.custom-checkbox-label{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: #eee;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
border: solid $white;
|
||||
border-width: 0 2px 2px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
}
|
||||
//status bar 2
|
||||
.search-status-bar--2{
|
||||
.list-property-status{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
.status-item {
|
||||
font-size: 100%;
|
||||
padding: 8px 35px 5px 35px;
|
||||
color: $headings-color;
|
||||
border-width: 1px 0 1px;
|
||||
margin-right: 0;
|
||||
margin-top: $padding-base;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
position: relative;
|
||||
font-weight: $headings-font-weight;
|
||||
flex: unset;
|
||||
background-color: transparent;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
@media screen and (max-width:767px){
|
||||
margin-right: $theme-margin;
|
||||
}
|
||||
&.active,&:hover {
|
||||
background-color: transparent;
|
||||
color: $link-hover-color;
|
||||
border-color: $link-hover-color;
|
||||
}
|
||||
&.active{
|
||||
&::after{
|
||||
content: "";
|
||||
border-top: 8px solid;
|
||||
border-right: 9px solid transparent;
|
||||
border-left: 9px solid transparent;
|
||||
border-bottom: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Form vertical
|
||||
.opalestate-search-form--vertical{
|
||||
.select2-container, .input-group-number{
|
||||
margin-top: 0;
|
||||
}
|
||||
.opalestate-label{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//Form vertical2
|
||||
.opalestate-search-form--vertical-2{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.opalestate-label{
|
||||
display: none;
|
||||
}
|
||||
.input-group-number{
|
||||
margin-top: 15px;
|
||||
}
|
||||
h6{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-search-city{
|
||||
.opalestate-popup{
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
.opal-form-content{
|
||||
.form-item:not(:last-of-type){
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: $padding-base;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.more-options-items {
|
||||
.more-options-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-group-number{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid $border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
height: $input-height;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
i[class*="icon-property-"]{
|
||||
margin-right: $input-padding-x;
|
||||
}
|
||||
.form-control{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
&:focus{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.btn-actions{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: $input-height;
|
||||
span{
|
||||
padding-left: $input-padding-x;
|
||||
padding-right: $input-padding-x;
|
||||
border-left: 1px solid $border-color;
|
||||
&:hover{
|
||||
color: $secondary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Form v6
|
||||
.opalestate-search-form--advanced-6{
|
||||
display: flex;
|
||||
.opalestate-search-form__item:not(:first-child){
|
||||
flex: 1;
|
||||
}
|
||||
.opalestate-search-form__item:first-child{
|
||||
flex-basis: 12%;
|
||||
.select2-selection--single{
|
||||
padding-left: 10px;
|
||||
border-right: 0;
|
||||
.select2-selection__rendered{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-search{
|
||||
width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
//Search Agent
|
||||
.search-agent-title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
//
|
||||
.select2-container{
|
||||
&.select2-container--default .select2-selection--single {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
background-clip: padding-box;
|
||||
border-radius: 0;
|
||||
.select2-selection__arrow {
|
||||
height: $input-height;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.select2-dropdown{
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
1
assets/scss/opalestate/_layout.scss
Executable file
1
assets/scss/opalestate/_layout.scss
Executable file
@@ -0,0 +1 @@
|
||||
/** list **/
|
||||
70
assets/scss/opalestate/_modules.scss
Executable file
70
assets/scss/opalestate/_modules.scss
Executable file
@@ -0,0 +1,70 @@
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
//favorite button
|
||||
.property-toggle-favorite {
|
||||
@include transition(.5s);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
/// split search ///
|
||||
header#masthead {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right!important;
|
||||
}
|
||||
.ajax-map-search-split{
|
||||
.split-maps-container{
|
||||
@media screen and (min-width:1200px){
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.opalestate-search-form{
|
||||
margin: 0;
|
||||
padding: $padding-base 0;
|
||||
}
|
||||
}
|
||||
.split-maps-container {
|
||||
@media screen and (min-width:1200px){
|
||||
position:fixed !important;
|
||||
}
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
|
||||
}
|
||||
.split-search-container{
|
||||
@media screen and (min-width:1200px){
|
||||
padding-right: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.opalestate-loading {
|
||||
position:absolute;
|
||||
@include opacity(0.9);
|
||||
background-color:#fff;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
&::before{
|
||||
content:"";
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
border: .25em solid #000;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinner-border .75s linear infinite;
|
||||
}
|
||||
|
||||
}
|
||||
100
assets/scss/opalestate/_page.scss
Executable file
100
assets/scss/opalestate/_page.scss
Executable file
@@ -0,0 +1,100 @@
|
||||
|
||||
@import "single";
|
||||
@import "archive";
|
||||
|
||||
// no header and footer for user management page
|
||||
.page-template-user-management {
|
||||
header, footer, #colophon {
|
||||
display:none;
|
||||
}
|
||||
article header {
|
||||
display:block !important;
|
||||
}
|
||||
}
|
||||
/// my-properties page
|
||||
.button-actions {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color:$white;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
a{
|
||||
background-color:$primary;
|
||||
color: $white;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background-color: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.my-properties{
|
||||
.property-status{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.property-meta-list{
|
||||
padding: 0;
|
||||
}
|
||||
.my-properties-bottom{
|
||||
display: none;
|
||||
}
|
||||
.abs-col-item{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// search agent page
|
||||
|
||||
.search-agents-wrap {
|
||||
.opalestate-search-agents-form {
|
||||
padding-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
//Grid style
|
||||
.agent-grid-style {
|
||||
margin-bottom: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
.agent-body{
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-color: $border-color;
|
||||
padding: $grid-gutter-width $grid-gutter-width $grid-gutter-width/2;
|
||||
}
|
||||
.agent-job{
|
||||
line-height: 1;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
.trusted-label{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
border: 1px solid $border-color;
|
||||
width: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
//List style
|
||||
.agent-list-style{
|
||||
padding: $grid-gutter-width;
|
||||
border: 1px solid $border-color;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
.team-info{
|
||||
margin: $padding-base 0 0;
|
||||
}
|
||||
.agent-box-title{
|
||||
|
||||
}
|
||||
}
|
||||
696
assets/scss/opalestate/_properties-loop.scss
Executable file
696
assets/scss/opalestate/_properties-loop.scss
Executable file
@@ -0,0 +1,696 @@
|
||||
|
||||
//property options
|
||||
.property-options{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
.opalestate-ajax-gallery{
|
||||
width: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
background-color: $secondary;
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
img{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
//property loop
|
||||
.opalestate_property{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
border:solid 1px $border-color;
|
||||
position:relative;
|
||||
&.opalestate-single-property,&[class*="property-featured"]{
|
||||
border:none;
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
header{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.property-box-image{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
a{
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:rgba(0, 0, 0, 0.3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: $headings-font-weight;
|
||||
color:$primary;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: $font-size-base;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** ----list---- **/
|
||||
.property-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
header{
|
||||
flex-basis: 35.065%;
|
||||
}
|
||||
.property-box-image{
|
||||
height: 100%;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title{
|
||||
margin: 7px 0 0px;
|
||||
}
|
||||
.property-address{
|
||||
margin: 6px 0 23px;
|
||||
}
|
||||
.abs-col-item{
|
||||
flex: 1;
|
||||
padding-left:$grid-gutter-width;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.property-meta-list{
|
||||
align-self: flex-end;
|
||||
flex-basis: 100%;
|
||||
padding: $padding-base 0 0;
|
||||
margin-top: $padding-base;
|
||||
border-top: 1px solid $border-color;
|
||||
li{
|
||||
margin-bottom: $padding-base;
|
||||
&:not(:last-child){
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.entry-summary{
|
||||
flex-basis: 25%;
|
||||
padding: 0 $grid-gutter-width;
|
||||
}
|
||||
.property-meta-bottom{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
.property-toggle-favorite{
|
||||
display: block;
|
||||
width: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
background-color:rgba(0,0,0,0.3);
|
||||
&:hover{
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
width: 22px;
|
||||
}
|
||||
.author-link{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.author-name{
|
||||
display: none;
|
||||
}
|
||||
.meta-item:not(:last-of-type){
|
||||
margin-right: 5px;
|
||||
}
|
||||
.property-group-label{
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
padding: $padding-base;
|
||||
header{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.abs-col-item{
|
||||
padding: $padding-base 0 0;
|
||||
}
|
||||
.entry-summary{
|
||||
flex-basis: 33.3333%;
|
||||
padding-top: $padding-base;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.entry-summary{
|
||||
flex-basis: 100%;
|
||||
padding: $padding-base 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// list style 1
|
||||
.property-list-style-v1 {
|
||||
header {
|
||||
padding-bottom:0;
|
||||
}
|
||||
.property-list{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.container-cols-3{
|
||||
.abs-col-item{
|
||||
@media screen and (min-width: 768px) {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
//list style 2
|
||||
.property-list-style-v2{
|
||||
.property-list{
|
||||
padding: 0;
|
||||
}
|
||||
.abs-col-item{
|
||||
padding: 0 $grid-gutter-width;
|
||||
border: none;
|
||||
}
|
||||
.entry-content{
|
||||
width: 100%;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 16px 0 0px;
|
||||
}
|
||||
.property-address{
|
||||
margin: 6px 0 0px;
|
||||
}
|
||||
.property-meta-list{
|
||||
padding: 0;
|
||||
margin-top: 9px;
|
||||
li{
|
||||
margin-top: 19px;
|
||||
margin-bottom: 8px;
|
||||
&:not(:last-child){
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.label-property{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
////
|
||||
ul.property-meta-list{
|
||||
padding: $grid-gutter-width 20px 0;
|
||||
margin: 0;
|
||||
li{
|
||||
line-height: 1;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
i{
|
||||
margin-right: 5px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
font-style: unset;
|
||||
}
|
||||
}
|
||||
i[class*="icon-property-"]{
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
.icon-property-areasize:before{
|
||||
content: "\f047";
|
||||
|
||||
}
|
||||
.icon-property-bedrooms:before{
|
||||
content: "\f236";
|
||||
|
||||
}
|
||||
.icon-property-bathrooms:before{
|
||||
content: "\f2cd";
|
||||
|
||||
}
|
||||
.icon-property-parking:before{
|
||||
content: "\f1b9";
|
||||
|
||||
}
|
||||
.icon-property-builtyear:before{
|
||||
content: "\f073";
|
||||
|
||||
}
|
||||
.icon-property-plotsize:before{
|
||||
content: "\f278";
|
||||
|
||||
}
|
||||
.icon-property-orientation:before{
|
||||
content: "\f14e";
|
||||
|
||||
}
|
||||
.icon-property-livingrooms:before{
|
||||
content: "\f26c";
|
||||
|
||||
}
|
||||
.icon-property-kitchens:before{
|
||||
content: "\f0f5";
|
||||
|
||||
}
|
||||
.icon-property-amountrooms:before{
|
||||
content: "\f1ad";
|
||||
|
||||
}
|
||||
|
||||
/** Grid **/
|
||||
.property-grid{
|
||||
.entry-content{
|
||||
padding: 0 20px $padding-base;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.property-address{
|
||||
margin: 0;
|
||||
span.property-view-map {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.property-meta-list.list-inline{
|
||||
li{
|
||||
flex-basis: 50%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
@media screen and (min-width:768px){
|
||||
font-size: 24px;
|
||||
}
|
||||
letter-spacing: -0.5px;
|
||||
color: $primary;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
.entry-content-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid $border-color;
|
||||
> *:not(:first-child){
|
||||
position: relative;
|
||||
padding: 11px 0;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
> *:first-child{
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.property-toggle-favorite{
|
||||
width: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width:767px){
|
||||
.entry-content{
|
||||
padding: $grid-gutter-width $padding-base $padding-base;
|
||||
}
|
||||
.property-meta-list{
|
||||
padding: 23px $padding-base 17px $padding-base;
|
||||
}
|
||||
.property-meta-bottom{
|
||||
margin-left: $padding-base;
|
||||
}
|
||||
.property-group-label{
|
||||
left: $padding-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Header Inner Author Link
|
||||
.property-grid, .property-featured{
|
||||
.author-link{
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
width: 35px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.author-name{
|
||||
font-size: 13px;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
}
|
||||
/** Grid Layout 1**/
|
||||
.property-grid-v1{
|
||||
.author-link{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 20px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
/** Grid Layout 2**/
|
||||
.property-grid-v2{
|
||||
.property-group-label{
|
||||
top: 10px;
|
||||
}
|
||||
.author-name{
|
||||
display: none;
|
||||
}
|
||||
.property-meta-list.list-inline{
|
||||
li{
|
||||
flex-basis: unset;
|
||||
&:not(:last-child){
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-content-bottom{
|
||||
.author-link{
|
||||
padding: 0;
|
||||
width: 52px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.author-avatar{
|
||||
margin: 0;
|
||||
width: 30px;
|
||||
padding: 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Grid Layout 3**/
|
||||
.property-grid-v3{
|
||||
.property-meta-bottom{
|
||||
position: absolute;
|
||||
bottom: $padding-base;
|
||||
padding-left: $padding-base;
|
||||
width: 100%;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 17px 0 6px;
|
||||
}
|
||||
header{
|
||||
padding: 5px 5px 0;
|
||||
}
|
||||
.entry-summary{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.property-price{
|
||||
color: $white;
|
||||
line-height: 1;
|
||||
.property-regular-price,.property-saleprice{
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
}
|
||||
.property-price-label{
|
||||
font-size: 13px;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
.entry-content{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.property-meta-list.list-inline{
|
||||
padding: 0;
|
||||
.info-meta{
|
||||
.label-property {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
li{
|
||||
flex-basis: unset;
|
||||
&:not(:last-child){
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-content-bottom{
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
background-color: #f4f4f4;
|
||||
& > *:not(:first-child){
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
background-color: rgba(126, 126, 126, 0.2);
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
&:hover{
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
& > *:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
//Mark Hover Item
|
||||
.property-mark-hover-item{
|
||||
.property-grid__header {
|
||||
min-height: 245px;
|
||||
}
|
||||
.list-inline{
|
||||
padding: 0;
|
||||
}
|
||||
header{
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.95)));
|
||||
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.95));
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.property-price-wrapper,.property-areasize{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.entry-content{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 0 15px 15px;
|
||||
color: $white;
|
||||
}
|
||||
.entry-title{
|
||||
color:inherit;
|
||||
a{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
font-size: 18px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Featured Property **/
|
||||
.property-featured{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.featured-info{
|
||||
background-color: $headings-color;
|
||||
color: $white;
|
||||
flex-basis: 50%;
|
||||
padding: 52px 75px 49px 100px;
|
||||
@media screen and (max-width:992px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
@media screen and (max-width:1024px) {
|
||||
padding: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.author-link{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 15px;
|
||||
color: $white;
|
||||
}
|
||||
.property-view-map{
|
||||
color: $white;
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
header{
|
||||
flex-basis: 100%;
|
||||
@media screen and (min-width:992px) {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
}
|
||||
ul.property-meta-list{
|
||||
padding: 0;
|
||||
> li {
|
||||
margin-right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
i{
|
||||
color: $secondary;
|
||||
width: auto;
|
||||
}
|
||||
.icon-box {
|
||||
font-size: 30px;
|
||||
width: auto;
|
||||
}
|
||||
.info-meta{
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title{
|
||||
margin-top: 14px;
|
||||
margin-bottom: 8px;
|
||||
a{
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.property-address{
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.property-description{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
font-size: 24px;
|
||||
color: $white;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.property-toggle-favorite{
|
||||
display: none;
|
||||
width: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
background-color: $headings-color;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
|
||||
&:hover{
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1200px) {
|
||||
.featured-info {
|
||||
margin-top: 50px;
|
||||
}
|
||||
header {
|
||||
flex-basis: calc(50% + 50px);
|
||||
margin-bottom: 50px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
header{
|
||||
&:hover{
|
||||
.property-bg-thumbnail{
|
||||
a{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-bg-thumbnail{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
a{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
transform: scale(1);
|
||||
transition: opacity 0.5s ease, transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18);
|
||||
background-position: center center;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-pagination {
|
||||
text-align: center;
|
||||
margin: $theme-margin 0;
|
||||
ul {
|
||||
margin: 0 auto;
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
.page-numbers {
|
||||
padding:5px 15px;
|
||||
display: block;
|
||||
&:hover,
|
||||
&.current {
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
164
assets/scss/opalestate/_shortcodes.scss
Executable file
164
assets/scss/opalestate/_shortcodes.scss
Executable file
@@ -0,0 +1,164 @@
|
||||
// split map search ////
|
||||
.maps-container-fixed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@media (min-width:1024px){
|
||||
position:fixed;
|
||||
z-index:0;
|
||||
width:50%;
|
||||
top:0;
|
||||
min-height:600px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Shortcodes **/
|
||||
.opalestate-search-properties{
|
||||
.search-properies-form{
|
||||
margin-top: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
// my account form ///
|
||||
|
||||
.opalestate-my-account-form {
|
||||
position: relative;
|
||||
background: $white;
|
||||
padding: $grid-gutter-width;
|
||||
width:auto;
|
||||
max-width: 550px;
|
||||
margin: 20px auto;
|
||||
.submit{
|
||||
a{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.opalestate-button{
|
||||
padding: 17px 35px 14px 35px;
|
||||
width: 100%;
|
||||
}
|
||||
h3 {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.opalesate-properties-results {
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
.membership-packages{
|
||||
padding-top: 40px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.pricing.pricing-v3{
|
||||
border: 1px solid $border-color;
|
||||
border-radius:5px;
|
||||
padding: 0;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
overflow: hidden;
|
||||
.pricing-header{
|
||||
text-align: center;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
position: relative;
|
||||
padding: $grid-gutter-width/2 0px 0px;
|
||||
}
|
||||
.plan-price{
|
||||
color: $white;
|
||||
line-height: 2.3rem;
|
||||
margin-top: $grid-gutter-width/2;
|
||||
p{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.pricing-body {
|
||||
padding: $grid-gutter-width/2 $grid-gutter-width;
|
||||
}
|
||||
.plan-figure{
|
||||
font-size: 36px;
|
||||
color: $white;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
.plain-info{
|
||||
& > div{
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-info{
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: $padding-base;
|
||||
margin-bottom: $padding-base;
|
||||
color: $headings-color;
|
||||
font-weight: $headings-font-weight;
|
||||
text-transform: uppercase;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
i{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.membership-form-wrapper{
|
||||
color: $white;
|
||||
}
|
||||
.membership-add-to-purchase{
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
background-color: #999;
|
||||
line-height: 42px;
|
||||
text-transform: capitalize;
|
||||
&:hover{
|
||||
background-color: gray;
|
||||
}
|
||||
}
|
||||
.pricing-footer{
|
||||
padding: 0 $grid-gutter-width $grid-gutter-width;
|
||||
text-align: center;
|
||||
}
|
||||
.plan-title{
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: $headings-font-weight;
|
||||
letter-spacing: -0.5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
.package-hightlighted{
|
||||
.plan-subtitle{
|
||||
background-color: $secondary;
|
||||
color:$black;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
display: block !important;
|
||||
margin: 0 auto;
|
||||
max-width: 150px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
.pricing.pricing-v3{
|
||||
@media screen and (min-width:992px) {
|
||||
//margin-top: -40px;
|
||||
}
|
||||
.membership-add-to-purchase{
|
||||
background-color: $secondary;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
.pricing-footer{
|
||||
//padding-bottom: $grid-gutter-width *2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
1065
assets/scss/opalestate/_single.scss
Executable file
1065
assets/scss/opalestate/_single.scss
Executable file
File diff suppressed because it is too large
Load Diff
14
assets/scss/opalestate/_styles.scss
Executable file
14
assets/scss/opalestate/_styles.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
.opalestate-note {
|
||||
font-size:90%;
|
||||
color:#888;
|
||||
}
|
||||
.list-inline {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
&:not(:last-child){
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
assets/scss/opalestate/_vars.scss
Executable file
23
assets/scss/opalestate/_vars.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
$headings-font-weight: 500;
|
||||
$input-height: 50px;
|
||||
$input-padding-y: .65rem;
|
||||
$input-padding-x: 1rem;
|
||||
$input-line-height: $input-height;
|
||||
|
||||
$primary: #2f73e9 !default;
|
||||
$secondary: #02ce76 !default;
|
||||
$white : #FFF !default;
|
||||
|
||||
$headings-color: #0a1938;
|
||||
$border-color: #ebebeb;
|
||||
$box-shadow-base: 0px 2px 8px 4px rgba(0, 0, 0, 0.12);
|
||||
|
||||
$padding-base: ($grid-gutter-width/2);
|
||||
$grid-gutter-width: 30px;
|
||||
|
||||
|
||||
$price-color:red;
|
||||
$link-hover-color: $primary;
|
||||
$input-border-color: #ebebeb;
|
||||
$body-color: #7e7e7e;
|
||||
$body-color-light: #bbb;
|
||||
302
assets/scss/submission.scss
Executable file
302
assets/scss/submission.scss
Executable file
@@ -0,0 +1,302 @@
|
||||
@import "bootstrap/variables";
|
||||
@import "bootstrap/mixins";
|
||||
|
||||
@import "bootstrap/grid";
|
||||
@import "opalestate/vars";
|
||||
|
||||
.cmb2-id-opalestate-ppt-enablemapview{
|
||||
p.cmb2-metabox-description{
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.opalestate-submission-form {
|
||||
label {
|
||||
.required {
|
||||
color:red ;
|
||||
}
|
||||
}
|
||||
input.required {
|
||||
border: 1px solid rgb(255, 0, 0);
|
||||
}
|
||||
.opal-map-desc {
|
||||
display: none;
|
||||
}
|
||||
.cmb2-wrap{
|
||||
input.cmb2-datepicker{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#property-thumbs-container {
|
||||
width:100%;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
#property-thumbs-container .gallery-thumbnail{
|
||||
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
width:180px;
|
||||
height:180px;
|
||||
}
|
||||
|
||||
#property-thumbs-container .icon-delete{
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: 5px;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
|
||||
#property-thumbs-container .icon-featured{
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
padding: 5px;
|
||||
background: #CCC;
|
||||
}
|
||||
#property-thumbs-container .icon-featured .fa-star{
|
||||
color:#fc8826;
|
||||
}
|
||||
|
||||
|
||||
.media-drag-drop {
|
||||
background-color: #efefef;
|
||||
border: 2px dashed #dfdfdf;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
}
|
||||
.media-drag-drop h4 {
|
||||
color: #8b9293;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
margin: 0 0 20px;
|
||||
font-weight: 400;
|
||||
text-transform: inherit;
|
||||
text-align: inherit;
|
||||
}
|
||||
.media-drag-drop .fa {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.property-submission-form{
|
||||
margin-bottom: 80px;
|
||||
max-width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.alert{
|
||||
padding: $padding-base;
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
a{
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
text-transform: unset;
|
||||
font-weight: $headings-font-weight;
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
//Submission tab
|
||||
.opalestate-submission-tab-head{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
justify-content: center;
|
||||
.tab-item{
|
||||
color: $headings-color;
|
||||
padding: 0;
|
||||
border: none;
|
||||
position: relative;
|
||||
padding-right: 30px;
|
||||
@media screen and (max-width:1024px){
|
||||
padding-right: 20px;
|
||||
}
|
||||
@media screen and (max-width:992px){
|
||||
flex-basis: 25%;
|
||||
margin-bottom: 10px;
|
||||
&:last-of-type{
|
||||
&::before{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px){
|
||||
flex-basis: 50%;
|
||||
}
|
||||
span{
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
&:last-of-type{
|
||||
padding-right: 0;
|
||||
&::after{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
&.active{
|
||||
span::before{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
&.passed:not(.active){
|
||||
&::before{
|
||||
background-color: $primary;
|
||||
}
|
||||
span::before{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.passed.active ~ .passed{
|
||||
&::before{
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-submission-tab{
|
||||
.cmb-type-opal-map{
|
||||
@media screen and (max-width:767px) {
|
||||
.form-group{
|
||||
padding: 0 15px;
|
||||
}
|
||||
.opalestate-map-wrap ~ div{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cmb-add-row{
|
||||
margin-top: 0;
|
||||
}
|
||||
.cmb-multicheck-toggle{
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
.cmb2-checkbox-list{
|
||||
li{
|
||||
@media screen and (min-width:768px) {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
flex-basis: 100%;
|
||||
margin-right: 0;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin-bottom: $padding-base;
|
||||
margin-top: $padding-base;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
img{
|
||||
width: $font-size-base;
|
||||
height: $font-size-base;
|
||||
vertical-align: top;
|
||||
}
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
padding-left: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&:checked ~ span.custom-checkbox-label{
|
||||
background-color: $primary;
|
||||
&::after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-checkbox-label{
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
button.btn.submission-next-btn{
|
||||
position: relative;
|
||||
padding: 19px 25px 17px 20px;
|
||||
&::before{
|
||||
content: "\f138";
|
||||
font-family: Fontawesome;
|
||||
margin-right: 18px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&::after{
|
||||
content: "";
|
||||
width: 52px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
.submission-back-btn{
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
padding-right: 20px;
|
||||
&::after{
|
||||
content: "\f137";
|
||||
font-family: Fontawesome;
|
||||
margin-left: 18px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
width: 52px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user