-
-
Save judetucker/aa78895c6be7eb145f25 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 2c2 | |
| < [13. Form Elements] | |
| --- | |
| > [15. Form Elements] | |
| 150a151,158 | |
| > input[type="radio"]:focus{ | |
| > & + label{ | |
| > color:@color-master-dark; | |
| > &:before{ | |
| > background-color: @color-master-light; | |
| > } | |
| > } | |
| > } | |
| 152c160,162 | |
| < display: none; | |
| --- | |
| > opacity: 0; | |
| > width: 0; | |
| > height: 0; | |
| 194c204 | |
| < top: 2px; | |
| --- | |
| > top: 1.4px; | |
| 203c213 | |
| < left: 1.2px; | |
| --- | |
| > left: 3.2px; | |
| 213c223,225 | |
| < display: none; | |
| --- | |
| > opacity: 0; | |
| > width: 0; | |
| > height: 0; | |
| 229c241 | |
| < border-width: 8px; | |
| --- | |
| > border-width: 8.5px; | |
| 237a250,257 | |
| > input[type="checkbox"]:focus{ | |
| > & + label{ | |
| > color:@color-master-dark; | |
| > &:before{ | |
| > background-color: @color-master-light; | |
| > } | |
| > } | |
| > } | |
| 258,260d277 | |
| < // &::after { | |
| < // content:"" | |
| < // } | |
| 340a358,364 | |
| > @media (min-width: 768px) and (max-width: 991px){ | |
| > form .row [class*="col-md-"]:not(:first-child), | |
| > form .row [class*="col-md-"]:not(:last-child){ | |
| > padding-right: 0; | |
| > padding-left: 0; | |
| > } | |
| > } | |
| 408,411d431 | |
| < & > .form-group-default{ | |
| < display: table; | |
| < width: 100%; | |
| < } | |
| 435,436d454 | |
| < display: table; | |
| < width: 100%; | |
| 438,441d455 | |
| < display: table-cell; | |
| < height: 100%; | |
| < float: none; | |
| < vertical-align: top; | |
| 549,561d562 | |
| < &.input-group-attached{ | |
| < position: relative; | |
| < .input-group-btn{ | |
| < right:-1%; | |
| < & > .btn{ | |
| < position: absolute; | |
| < right: -100%; | |
| < top: 0; | |
| < height: 100%; | |
| < z-index: 2; | |
| < } | |
| < } | |
| < } | |
| 611c612,620 | |
| < | |
| --- | |
| > &.form-group-default-select{ | |
| > overflow: visible; | |
| > .ui-select-container.ui-select-bootstrap.dropdown { | |
| > .ui-select-match{ | |
| > padding-top: 6px; | |
| > height: 23px; | |
| > } | |
| > } | |
| > } | |
| 810a820,1468 | |
| > | |
| > | |
| > | |
| > /* Plugins | |
| > -------------------------------------------------- | |
| > Datepicker | |
| > https://github.com/eternicode/bootstrap-datepicker | |
| > */ | |
| > .datepicker { | |
| > padding: 16px 25px; | |
| > border-radius: 2px; | |
| > font-size: 12px; | |
| > &:after{ | |
| > border-bottom-color: @color-master-lightest; | |
| > } | |
| > thead { | |
| > tr { | |
| > .datepicker-switch { | |
| > color: #6f7b8a; | |
| > font-size: 13px; | |
| > } | |
| > .next, | |
| > .prev{ | |
| > color: @color-primary; | |
| > content:''; | |
| > font-size: 0px; | |
| > &:before { | |
| > color: @color-primary; | |
| > font-family:'FontAwesome'; | |
| > font-size: 10px; | |
| > } | |
| > } | |
| > .prev:before { | |
| > content:"\f053"; | |
| > } | |
| > .next:before { | |
| > content:"\f054"; | |
| > } | |
| > .dow { | |
| > font-family: 'Montserrat'; | |
| > color: @color-primary; | |
| > text-transform: uppercase; | |
| > font-size: 11px; | |
| > } | |
| > th{ | |
| > width: 31px; | |
| > height: 29px; | |
| > } | |
| > } | |
| > } | |
| > tbody { | |
| > tr { | |
| > .odd { | |
| > color: #d0d3d8; | |
| > } | |
| > } | |
| > } | |
| > table { | |
| > tr { | |
| > td { | |
| > width: 31px; | |
| > height: 29px; | |
| > &.old, | |
| > &.new{ | |
| > color: @color-master-light; | |
| > } | |
| > &.day { | |
| > &:hover { | |
| > background: @color-master-lighter; | |
| > } | |
| > } | |
| > &.active{ | |
| > background-color:@color-primary !important; | |
| > &, | |
| > &:hover, | |
| > &.disabled, | |
| > &.disabled:hover { | |
| > background-image: none; | |
| > text-shadow: none; | |
| > font-weight: 600; | |
| > } | |
| > } | |
| > &.today{ | |
| > &, | |
| > &:hover, | |
| > &.disabled, | |
| > &.disabled:hover { | |
| > background-color: @color-master-lighter; | |
| > background-image: none; | |
| > color: @color-white; | |
| > } | |
| > } | |
| > span { | |
| > border-radius: 4px; | |
| > width: 42px; | |
| > height: 42px; | |
| > line-height: 42px; | |
| > &.active{ | |
| > background-color: @color-primary !important; | |
| > } | |
| > &.active, | |
| > &.active:hover, | |
| > &.active.disabled, | |
| > &.active.disabled:hover { | |
| > background-image: none; | |
| > border: none; | |
| > text-shadow: none; | |
| > } | |
| > } | |
| > } | |
| > } | |
| > } | |
| > &.dropdown-menu{ | |
| > border-color: @color-master-light; | |
| > color:@color-master; | |
| > } | |
| > &.datepicker-dropdown.datepicker-orient-bottom:before{ | |
| > border-color: @color-master-light; | |
| > } | |
| > } | |
| > | |
| > .datepicker-inline { | |
| > width: auto; | |
| > } | |
| > .input-daterange .input-group-addon{ | |
| > text-shadow: none; | |
| > border:0; | |
| > } | |
| > | |
| > /* Timepicker | |
| > https://github.com/m3wolf/bootstrap3-timepicker | |
| > */ | |
| > | |
| > .bootstrap-timepicker-widget{ | |
| > table td a i{ | |
| > font-size: 12px; | |
| > } | |
| > a.btn, .bootstrap-timepicker-widget input{ | |
| > .border-radius(2px); | |
| > } | |
| > &.dropdown-menu{ | |
| > background: #fff; | |
| > } | |
| > } | |
| > | |
| > | |
| > /* Daterangepicker | |
| > http://www.dangrossman.info/ | |
| > */ | |
| > | |
| > .daterangepicker{ | |
| > background: #fff; | |
| > .calendar{ | |
| > .calendar-date{ | |
| > border: 1px solid @form-control-border-color; | |
| > } | |
| > .prev, .next, th{ | |
| > color: @color-primary; | |
| > text-transform: uppercase; | |
| > font-size: 11px; | |
| > } | |
| > .month{ | |
| > color: #6f7b8a; | |
| > font-size: 13px; | |
| > } | |
| > } | |
| > td.active, td.active:hover{ | |
| > background-color: @color-primary; | |
| > border-color: @color-primary; | |
| > } | |
| > td.in-range{ | |
| > //å background:@color-primary-lighter; | |
| > } | |
| > } | |
| > /* Select2 | |
| > http://ivaynberg.github.io/select2/ | |
| > */ | |
| > | |
| > .form-group-default .select2-container .select2-choice, | |
| > .select2-container-multi .select2-choices{ | |
| > border-color:transparent; | |
| > } | |
| > .select2-container { | |
| > .select2-choice { | |
| > background-image: none; | |
| > border-radius: 2px; | |
| > border: 1px solid @form-control-border-color; | |
| > padding: 3px 9px; | |
| > transition: border 0.2s linear 0s; | |
| > height: 35px; | |
| > .select2-arrow { | |
| > background: transparent; | |
| > border-left: 0px; | |
| > .transition(all 0.3s ease); | |
| > b { | |
| > &:before { | |
| > font-family:'FontAwesome'; | |
| > content:"\f0d7"; | |
| > position: relative; | |
| > top: 2px; | |
| > right: 5px; | |
| > font-size: 12px; | |
| > } | |
| > } | |
| > } | |
| > } | |
| > &.select2-drop-above { | |
| > .select2-choice { | |
| > border-bottom-right-radius: 2px; | |
| > border-bottom-left-radius: 2px; | |
| > } | |
| > } | |
| > } | |
| > .select2-search input, | |
| > .select2-search-choice-close, | |
| > .select2-container .select2-choice abbr, | |
| > .select2-container .select2-choice .select2-arrow b{ | |
| > background-image: none !important; | |
| > } | |
| > .select2-dropdown-open.select2-drop-above .select2-choice, | |
| > .select2-dropdown-open.select2-drop-above .select2-choices { | |
| > background-image: none !important; | |
| > border: 1px solid @form-control-border-color; | |
| > background: @color-master-lighter; | |
| > } | |
| > .select2-dropdown-open { | |
| > .select2-choice { | |
| > .select2-arrow { | |
| > .scale(scale(1, -1)); | |
| > | |
| > } | |
| > } | |
| > } | |
| > .select2-drop { | |
| > &.select2-drop-above { | |
| > border-top-left-radius: 2px; | |
| > border-top-right-radius: 2px; | |
| > box-shadow: none; | |
| > &.select2-drop-active { | |
| > border: 1px solid @form-control-border-color; | |
| > border-bottom: none; | |
| > border-radius: 2px; | |
| > padding-top: 0px; | |
| > } | |
| > } | |
| > } | |
| > .select2-container-active .select2-choice, | |
| > .select2-container-active .select2-choices { | |
| > box-shadow: none; | |
| > border: 1px solid @form-control-border-color; | |
| > background: @color-master-lighter; | |
| > border-top-left-radius: 2px; | |
| > border-top-right-radius: 2px; | |
| > } | |
| > .select2-search { | |
| > padding-left: 8px; | |
| > padding-right: 8px; | |
| > padding-top: 4px; | |
| > input { | |
| > background: @color-white !important; | |
| > vertical-align: baseline; | |
| > line-height: 28px; | |
| > border-radius: 2px; | |
| > border: none; | |
| > font-size: 12px; | |
| > border: 1px solid @form-control-border-color; | |
| > } | |
| > } | |
| > .select2-results { | |
| > margin: 3px 10px 10px 3px; | |
| > li { | |
| > color: @color-master; | |
| > &.select2-result-with-children { | |
| > & > .select2-result-label { | |
| > color: @color-master-dark; | |
| > &:first-child{ | |
| > padding-top: 8px; | |
| > } | |
| > } | |
| > } | |
| > } | |
| > .select2-highlighted { | |
| > background: @color-master-lighter; | |
| > border-radius: 3px; | |
| > .select2-result-label { | |
| > color: @color-master; | |
| > } | |
| > } | |
| > .select2-no-results, | |
| > .select2-searching, | |
| > .select2-selection-limit { | |
| > background: none; | |
| > color: @color-master; | |
| > font-size: 12px; | |
| > padding-left: 8px; | |
| > padding-top: 0px; | |
| > position: relative; | |
| > top: -5px; | |
| > } | |
| > } | |
| > | |
| > .select2-drop-active { | |
| > border: 1px solid @form-control-border-color; | |
| > border-bottom: none; | |
| > border-top: none; | |
| > border-bottom-right-radius: 2px; | |
| > border-bottom-left-radius: 2px; | |
| > padding-top: 5px; | |
| > z-index: @zIndex-navbar - 10; | |
| > } | |
| > .select2-container-multi { | |
| > .select2-choices { | |
| > background-image: none; | |
| > border: 1px solid @form-control-border-color; | |
| > border-radius: 2px; | |
| > .select2-search-choice { | |
| > background-color: @color-master-light; | |
| > background-image: none; | |
| > border: none; | |
| > box-shadow: none; | |
| > color: inherit; | |
| > border-radius: 8px; | |
| > margin: 8px -5px 7px 10px; | |
| > padding: 4px 8px 4px 21px; | |
| > } | |
| > } | |
| > &.select2-container-active { | |
| > .select2-choices { | |
| > border: 1px solid @form-control-border-color; | |
| > box-shadow: none; | |
| > } | |
| > .select2-search-choice { | |
| > background-color: @color-white !important; | |
| > } | |
| > } | |
| > .select2-search-choice-close { | |
| > left: 6px; | |
| > } | |
| > } | |
| > .select2-search-choice-close { | |
| > background: none; | |
| > top: 4px; | |
| > right: 0; | |
| > &:hover { | |
| > text-decoration: none; | |
| > } | |
| > &:before { | |
| > font-family:'FontAwesome'; | |
| > content:"\f00d"; | |
| > font-size: 12px; | |
| > color: @color-master; | |
| > } | |
| > } | |
| > .select2-drop-multi .select2-results { | |
| > .select2-no-results, | |
| > .select2-searching, | |
| > .select2-selection-limit { | |
| > top: 0px; | |
| > } | |
| > } | |
| > .select2 { | |
| > &.form-control { | |
| > padding: 0; | |
| > box-shadow: none; | |
| > border: 0; | |
| > } | |
| > } | |
| > | |
| > .select2-drop-mask{ | |
| > z-index: 700; | |
| > } | |
| > | |
| > .ui-select-bootstrap .ui-select-choices-row.active > a{ | |
| > background: @color-master-lighter; | |
| > border-radius: 3px; | |
| > color: @color-master; | |
| > } | |
| > .ui-select-bootstrap > .ui-select-choices{ | |
| > background-color: #fff; | |
| > // box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); | |
| > } | |
| > .ui-select-choices-group-label{ | |
| > color: @color-master-dark; | |
| > font-weight: bold; | |
| > } | |
| > .modal-open{ | |
| > .select2-drop-active{ | |
| > z-index: 1051; | |
| > } | |
| > .select2-drop-mask{ | |
| > z-index: 1050; | |
| > } | |
| > .cs-skin-slide.cs-active{ | |
| > z-index: 1050; | |
| > } | |
| > } | |
| > | |
| > .dropdown-placeholder{ | |
| > display: inline-block; | |
| > vertical-align: middle; | |
| > } | |
| > .dropdown-mask{ | |
| > bottom: 0; | |
| > display: none; | |
| > left: 0; | |
| > outline: 0 none; | |
| > overflow: hidden; | |
| > position: fixed; | |
| > right: 0; | |
| > top: 0; | |
| > z-index: @zIndex-dropdownMask; | |
| > } | |
| > | |
| > /* Bootstrap Tags input | |
| > https://github.com/timschlechter/bootstrap-tagsinput | |
| > */ | |
| > | |
| > .form-group-default .bootstrap-tagsinput{ | |
| > border:0px; | |
| > padding-left: 0; | |
| > } | |
| > .bootstrap-tagsinput { | |
| > background-color: transparent; | |
| > border: 1px solid @form-control-border-color; | |
| > border-radius: 4px; | |
| > padding-bottom: 5px; | |
| > .box-shadow(none); | |
| > width: 100%; | |
| > .transition(background 0.2s linear 0s); | |
| > &.active-element { | |
| > background-color: @color-master-light; | |
| > } | |
| > input { | |
| > border: none; | |
| > margin-bottom: 0px; | |
| > min-height: 25px; | |
| > min-width: 10em !important; | |
| > } | |
| > .tag { | |
| > vertical-align: middle; | |
| > padding: 6px 9px; | |
| > padding-right: 6px; | |
| > border-radius: 3px; | |
| > line-height: 30px; | |
| > } | |
| > .tag[data-role="remove"]{ | |
| > margin-left: 4px; | |
| > } | |
| > .tag[data-role="remove"]:hover:active, | |
| > .tag [data-role="remove"]:hover { | |
| > box-shadow: none; | |
| > } | |
| > .tag [data-role="remove"]:after{ | |
| > font-family: 'pages-icon'; | |
| > content: "\e60a"; | |
| > padding: 0; | |
| > } | |
| > } | |
| > | |
| > /* Bootstrap3 wysihtml5 | |
| > https://github.com/Waxolunist/bootstrap3-wysihtml5-bower | |
| > */ | |
| > .wysiwyg5-wrapper { | |
| > position: relative; | |
| > .wysihtml5-toolbar { | |
| > position: absolute; | |
| > bottom: 0; | |
| > left: 0; | |
| > right: 0; | |
| > /*height: 50px;*/ | |
| > background: @color-master-lighter; | |
| > border-top:1px solid @color-master-light; | |
| > .btn { | |
| > background: none repeat scroll 0 0 rgba(0, 0, 0, 0); | |
| > border-color:transparent; | |
| > border-right-color: @color-master-light; | |
| > color: #A5A5A5; | |
| > font-size: 16px; | |
| > font-weight: 600; | |
| > height: 50px; | |
| > line-height: 50px; | |
| > padding: 0 5px; | |
| > border-width: 1px; | |
| > border-radius: 0 !important; | |
| > box-shadow: none !important; | |
| > &:hover .editor-icon { | |
| > opacity: .8; | |
| > } | |
| > &.active .editor-icon { | |
| > opacity: 1; | |
| > } | |
| > &.dropdown-toggle { | |
| > padding-left: 10px; | |
| > padding-right: 20px; | |
| > .current-font { | |
| > opacity: .5; | |
| > font-size: 14px; | |
| > } | |
| > } | |
| > } | |
| > & > li { | |
| > margin:0; | |
| > padding: 0; | |
| > } | |
| > } | |
| > .wysiwyg { | |
| > width: 100%; | |
| > min-height: 200px; | |
| > font-size: 14px; | |
| > line-height: 18px; | |
| > padding-bottom:50px !important; | |
| > border: 0; | |
| > &:focus{ | |
| > background-color:@color-master-lightest; | |
| > outline: 0 !important; | |
| > .box-shadow(none); | |
| > } | |
| > } | |
| > .expand-wysiwyg { | |
| > bottom: 0; | |
| > color: #A5A5A5; | |
| > font-size: 20px; | |
| > font-weight: 600; | |
| > height: 50px; | |
| > line-height: 50px; | |
| > padding: 0 15px; | |
| > position: absolute; | |
| > right: 0; | |
| > } | |
| > .wysihtml5-sandbox{ | |
| > border: none !important; | |
| > padding: 16px 16px 50px !important; | |
| > width: 100% !important; | |
| > &.expanded{ | |
| > height: 100% !important; | |
| > } | |
| > } | |
| > } | |
| > .toggle-wysiwyg { | |
| > position: absolute; | |
| > right: 15px; | |
| > top: 0; | |
| > li { | |
| > display: inline-block; | |
| > font-weight: 600; | |
| > } | |
| > } | |
| > .editor-icon { | |
| > background-image: url("../img/editor_tray.png"); | |
| > display: inline-block; | |
| > height: 40px; | |
| > margin-top: 5px; | |
| > opacity: 0.4; | |
| > vertical-align: top; | |
| > width: 40px; | |
| > &-headline { | |
| > background-position: 0 0; | |
| > width:31px; | |
| > } | |
| > &-bold { | |
| > background-position: -40px 0; | |
| > } | |
| > &-italic { | |
| > background-position: -80px 0; | |
| > } | |
| > &-underline { | |
| > background-position: -120px 0; | |
| > } | |
| > &-link { | |
| > background-position: -160px 0; | |
| > } | |
| > &-quote { | |
| > background-position: -200px 0; | |
| > } | |
| > &-ul { | |
| > background-position: -240px 0; | |
| > } | |
| > &-ol { | |
| > background-position: -280px 0; | |
| > } | |
| > &-outdent { | |
| > background-position: -320px 0; | |
| > } | |
| > &-indent { | |
| > background-position: -360px 0; | |
| > } | |
| > &-image { | |
| > background-position: -400px 0; | |
| > } | |
| > &-html { | |
| > background-position: -440px 0; | |
| > } | |
| > } | |
| > | |
| > /* Summernote | |
| > https://github.com/HackerWins/summernote | |
| > */ | |
| > .summernote-wrapper{ | |
| > .note-editor{ | |
| > border-color:@color-master-light; | |
| > .note-toolbar{ | |
| > padding: 0; | |
| > background-color: @color-master-lighter; | |
| > border-bottom: none; | |
| > .btn-group{ | |
| > margin: 0 -1px 0 0; | |
| > .btn{ | |
| > font-size: 12px; | |
| > font-weight: 600; | |
| > height: 50px; | |
| > min-width: 47px; | |
| > line-height: 50px; | |
| > padding: 0 5px; | |
| > border-radius: 0; | |
| > background-color: @color-master-lighter; | |
| > border-color: transparent; | |
| > border-right-color: @color-master-light; | |
| > border-bottom-color: @color-master-light; | |
| > color: @color-master; | |
| > &.active, &:active{ | |
| > background-color: @color-master-light; | |
| > } | |
| > &.dropdown-toggle{ | |
| > min-width: 61px; | |
| > } | |
| > &:not(:last-child), &:not(:only-child){ | |
| > margin-right: 1px; | |
| > } | |
| > } | |
| > } | |
| > } | |
| > .note-statusbar { | |
| > background-color: transparent; | |
| > .note-resizebar{ | |
| > border-top-color: transparent; | |
| > .note-icon-bar{ | |
| > border-top: 1px solid @color-master-light; | |
| > } | |
| > } | |
| > } | |
| > } | |
| > .note-popover .popover .popover-content .dropdown-menu li a i, .note-toolbar .dropdown-menu li a i{ | |
| > color: @color-primary; | |
| > } | |
| > } | |
| > | |
| > | |
| > | |
| > | |
| 878a1537,1914 | |
| > | |
| > | |
| > /* Pages SelectFx */ | |
| > | |
| > /* Default custom select styles */ | |
| > div.cs-select { | |
| > display: inline-block; | |
| > vertical-align: middle; | |
| > position: relative; | |
| > text-align: left; | |
| > background: #fff; | |
| > width: 100%; | |
| > max-width: 500px; | |
| > -webkit-touch-callout: none; | |
| > -webkit-user-select: none; | |
| > -khtml-user-select: none; | |
| > -moz-user-select: none; | |
| > -ms-user-select: none; | |
| > user-select: none; | |
| > } | |
| > | |
| > div.cs-select:focus { | |
| > outline: none; /* For better accessibility add a style for this in your skin */ | |
| > } | |
| > | |
| > .cs-select select { | |
| > display: none; | |
| > } | |
| > | |
| > .cs-select span { | |
| > display: block; | |
| > position: relative; | |
| > cursor: pointer; | |
| > padding: 1em; | |
| > white-space: nowrap; | |
| > overflow: hidden; | |
| > text-overflow: ellipsis; | |
| > } | |
| > | |
| > /* Placeholder and selected option */ | |
| > .cs-select > span { | |
| > padding-right: 3em; | |
| > } | |
| > | |
| > .cs-select > span::after, | |
| > .cs-select .cs-selected span::after { | |
| > speak: none; | |
| > position: absolute; | |
| > top: 50%; | |
| > -webkit-transform: translateY(-50%); | |
| > transform: translateY(-50%); | |
| > -webkit-font-smoothing: antialiased; | |
| > -moz-osx-font-smoothing: grayscale; | |
| > } | |
| > | |
| > .cs-select > span::after { | |
| > content: '\25BE'; | |
| > right: 1em; | |
| > } | |
| > | |
| > .cs-select .cs-selected span::after { | |
| > content: '\2713'; | |
| > margin-left: 1em; | |
| > } | |
| > | |
| > .cs-select.cs-active > span::after { | |
| > -webkit-transform: translateY(-50%) rotate(180deg); | |
| > transform: translateY(-50%) rotate(180deg); | |
| > } | |
| > | |
| > /* Options */ | |
| > .cs-select .cs-options { | |
| > position: absolute; | |
| > overflow: hidden; | |
| > width: 100%; | |
| > background: #fff; | |
| > visibility: hidden; | |
| > } | |
| > | |
| > .cs-select.cs-active .cs-options { | |
| > visibility: visible; | |
| > } | |
| > | |
| > .cs-select ul { | |
| > list-style: none; | |
| > margin: 0; | |
| > padding: 0; | |
| > width: 100%; | |
| > } | |
| > | |
| > .cs-select ul span { | |
| > padding: 1em; | |
| > } | |
| > | |
| > .cs-select ul li.cs-focus span { | |
| > background-color: #ddd; | |
| > } | |
| > | |
| > /* Optgroup and optgroup label */ | |
| > .cs-select li.cs-optgroup ul { | |
| > padding-left: 1em; | |
| > } | |
| > | |
| > .cs-select li.cs-optgroup > span { | |
| > cursor: default; | |
| > } | |
| > | |
| > | |
| > | |
| > | |
| > div.cs-skin-slide { | |
| > color: #fff; | |
| > /*font-size: 1.5em;*/ | |
| > width: 300px; | |
| > } | |
| > | |
| > @media screen and (max-width: 30em) { | |
| > div.cs-skin-slide { font-size: 1em; width: 250px; } | |
| > } | |
| > | |
| > div.cs-skin-slide::before { | |
| > content: ''; | |
| > background: #282b30; | |
| > position: absolute; | |
| > width: 100%; | |
| > height: 100%; | |
| > top: 0; | |
| > left: 0; | |
| > -webkit-backface-visibility: hidden; | |
| > backface-visibility: hidden; | |
| > -webkit-transition: -webkit-transform 0.3s; | |
| > transition: transform 0.3s; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active::before { | |
| > -webkit-transform: scale3d(1.1,3.5,1); | |
| > transform: scale3d(1.1,3.5,1); | |
| > } | |
| > | |
| > .cs-skin-slide > span { | |
| > height: 80px; | |
| > line-height: 32px; | |
| > -webkit-transition: text-indent 0.3s, opacity 0.3s; | |
| > transition: text-indent 0.3s, opacity 0.3s; | |
| > } | |
| > | |
| > @media screen and (max-width: 30em) { | |
| > .cs-skin-slide > span { height: 60px; line-height: 28px; } | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active > span { | |
| > text-indent: -290px; | |
| > opacity: 0; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active > span::after { | |
| > -webkit-transform: translate3d(0,-50%,0); | |
| > transform: translate3d(0,-50%,0); | |
| > } | |
| > | |
| > .cs-skin-slide .cs-options { | |
| > background: transparent; | |
| > width: 70%; | |
| > height: 400%; | |
| > padding: 1.9em 0; | |
| > top: 50%; | |
| > left: 50%; | |
| > -webkit-transform: translate3d(-50%,-50%,0); | |
| > transform: translate3d(-50%,-50%,0); | |
| > } | |
| > | |
| > @media screen and (max-width: 30em) { | |
| > .cs-skin-slide .cs-options { padding-top: 3em; } | |
| > } | |
| > | |
| > .cs-skin-slide .cs-options li { | |
| > opacity: 0; | |
| > -webkit-transform: translate3d(30%,0,0); | |
| > transform: translate3d(30%,0,0); | |
| > -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; | |
| > transition: transform 0.3s, opacity 0.3s; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active .cs-options li { | |
| > -webkit-transform: translate3d(0,0,0); | |
| > transform: translate3d(0,0,0); | |
| > opacity: 1; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active .cs-options li:first-child { | |
| > -webkit-transition-delay: 0.05s; | |
| > transition-delay: 0.05s; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(2) { | |
| > -webkit-transition-delay: 0.1s; | |
| > transition-delay: 0.1s; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(3) { | |
| > -webkit-transition-delay: 0.15s; | |
| > transition-delay: 0.15s; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(4) { | |
| > -webkit-transition-delay: 0.2s; | |
| > transition-delay: 0.2s; | |
| > } | |
| > | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(5) { | |
| > -webkit-transition-delay: 0.25s; | |
| > transition-delay: 0.25s; | |
| > } /* more options need more delay declaration */ | |
| > | |
| > .cs-skin-slide .cs-options li span { | |
| > text-transform: uppercase; | |
| > font-weight: 500; | |
| > letter-spacing: 2px; | |
| > font-size: 65%; | |
| > padding: 0.8em 1em 0.8em 2.5em; | |
| > } | |
| > | |
| > .cs-skin-slide .cs-options li span:hover, | |
| > .cs-skin-slide .cs-options li.cs-focus span, | |
| > .cs-skin-slide .cs-options li.cs-selected span { | |
| > color: #eb7e7f; | |
| > background: transparent; | |
| > } | |
| > | |
| > .cs-skin-slide .cs-selected span::after { | |
| > content: ''; | |
| > } | |
| > | |
| > | |
| > /* Pages Select overriding */ | |
| > | |
| > .form-group-default .cs-skin-slide > span{ | |
| > padding: 0 30px 0 0; | |
| > height: 22px; | |
| > line-height: 21px; | |
| > } | |
| > .form-group-default .cs-wrapper{ | |
| > width: 100%; | |
| > } | |
| > .cs-wrapper{ | |
| > display: inline-block; | |
| > // width: 100%; | |
| > } | |
| > .form-control.cs-select:not(.cs-active){ | |
| > width: 100% !important; | |
| > } | |
| > .cs-select:not(.cs-active):not(.form-control){ | |
| > // width: 100% !important; | |
| > } | |
| > .cs-select{ | |
| > background-color: transparent; | |
| > span{ | |
| > text-overflow:initial; | |
| > } | |
| > .cs-placeholder{ | |
| > width: 100%; | |
| > } | |
| > } | |
| > div.cs-skin-slide{ | |
| > width: auto; | |
| > font-family: Arial,sans-serif; | |
| > //font-size: 14px; | |
| > color: #5e5e5e; | |
| > &:before{ | |
| > background-color: transparent; | |
| > } | |
| > &.cs-transparent{ | |
| > background: none; | |
| > .cs-backdrop{ | |
| > border-color: transparent; | |
| > background: none; | |
| > } | |
| > &.cs-active .cs-backdrop{ | |
| > background: @color-master-lightest; | |
| > } | |
| > } | |
| > & > span{ | |
| > height: 35px; | |
| > padding: 6px 33px 6px 17px; | |
| > line-height: 23px; | |
| > z-index: 1; | |
| > } | |
| > &.cs-active{ | |
| > z-index: @zIndex-navbar - 10; | |
| > &:before{ | |
| > -webkit-transform: scale3d(1,1,1); | |
| > transform: scale3d(1,1,1); | |
| > } | |
| > .cs-backdrop{ | |
| > border: transparent; | |
| > background: @color-master-lightest; | |
| > box-shadow: -1px 0 1px #ccc, 1px 0 1px #ccc; | |
| > } | |
| > } | |
| > & > span:after, | |
| > &.cs-active > span:after{ | |
| > content:"\f0d7"; | |
| > font-family: FontAwesome; | |
| > color: #5e5e5e; | |
| > } | |
| > .cs-options{ | |
| > height: auto; | |
| > padding: 9px 0; | |
| > width: auto; | |
| > padding: 10px; | |
| > max-height: 350px; | |
| > transform: translate3d(1,1,1); | |
| > overflow: hidden; | |
| > z-index: 1; | |
| > ul{ | |
| > width: 100%; | |
| > display: table; | |
| > li{ | |
| > display: table-row; | |
| > span{ | |
| > display: table-cell; | |
| > font-size: 14px; | |
| > font-weight: normal; | |
| > letter-spacing: normal; | |
| > padding: 5px 0; | |
| > text-transform: none; | |
| > max-height: 350px; | |
| > overflow-y: auto; | |
| > } | |
| > span:hover, | |
| > &.cs-focus span, | |
| > &.cs-selected span{ | |
| > color: @color-master-dark; | |
| > } | |
| > } | |
| > } | |
| > } | |
| > } | |
| > .cs-backdrop{ | |
| > background: none repeat scroll 0 0 #fff; | |
| > border: 1px solid @form-control-border-color; | |
| > bottom: 0; | |
| > left: 0; | |
| > position: absolute; | |
| > right: 0; | |
| > top: 0; | |
| > .transition(all .3s ease); | |
| > | |
| > } | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(6) { | |
| > transition-delay: 0.3s; | |
| > } | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(7) { | |
| > transition-delay: 0.35s; | |
| > } | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(8) { | |
| > transition-delay: 0.4s; | |
| > } | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(9) { | |
| > transition-delay: 0.45s; | |
| > } | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(10) { | |
| > transition-delay: 0.5s; | |
| > } | |
| > .cs-skin-slide.cs-active .cs-options li:nth-child(11) { | |
| > transition-delay: 0.55s; | |
| > } | |
| > | |
| > /* Dropzone for Angular */ | |
| > .dropzone[dropzone="dropzone"] input[type="file"]{ | |
| > visibility: hidden; | |
| > } | |
| > /* end overrides */ | |
| > | |
| > /* Demo specifc classes */ | |
| > .demo-form-wysiwyg{ | |
| > height: 250px; | |
| > } | |
| \ No newline at end of file |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment