diff -r 000000000000 -r bca7a7e058a3 src/pyams_skin/resources/less/widgets.less --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/pyams_skin/resources/less/widgets.less Thu Feb 13 11:43:31 2020 +0100 @@ -0,0 +1,3314 @@ +/* + * Widgets styles + */ + +@import "colors.less"; + +.widget-header { + >:first-child { + margin: 13px 0; + } +} + +.widget-toolbar { + display: inline-block; + position: relative; + float: right; + width: auto; + height: 29px; + line-height: 29px; + border-left: 1px solid rgba(0, 0, 0, .09); + cursor: pointer; + padding: 0 8px; + text-align: center; + + &:empty { + padding: 0; + } + &.no-border { + border-left: 0; + } + >:first-child { + text-align: left; + } + .ams-form { + label.checkbox, + label.radio { + line-height: 29px; + } + .icon-append, + .icon-prepend { + top: 3px!important; + } + } + &.ams-form { + .icon-append, + .icon-prepend { + top: 3px!important; + } + } + >.ams-form { + margin-top: 2px; + + .toggle:last-child { + font-size: 12px; + line-height: 29px; + } + .checkbox input+i, + .radio input+i, + .toggle input+i { + border-width: 1px; + border-color: #C7C7C7!important; + margin-top: -1px; + -webkit-box-shadow: 0 1px 1px #FFF, 0 1px 1px #858585 inset; + box-shadow: 0 1px 1px #FFF, 0 1px 1px #858585 inset; + } + } + .btn-group { + margin-top: -3px; + } + >.btn { + margin-top: -3px; + font-size: 12px!important; + padding: 1px 8px!important; + } + >.label { + display: inline-block; + vertical-align: middle; + margin-top: -3px; + text-align: center; + font-size: 12px; + padding: 4px 7px; + } + >.badge { + padding: 5px; + font-size: 14px; + border-radius: 50%; + font-weight: 400; + min-width: 24px; + text-align: center!important; + } + .progress { + width: 130px; + margin: 7px 0 0; + height: 18px!important; + font-size: 12px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px #d1d1d1 inset; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px #d1d1d1 inset; + } + .progress-bar { + font-size: 12px; + } + .pagination { + margin: 4px 0; + + >li >a { + padding: 2px 7px; + } + } + .widget-text-input { + max-width: 220px; + } + input[type=text] { + height: 28px!important; + margin-top: 2px; + } +} + +.widget-body { + &.no-padding { + padding: 0; + margin: 0; + + .alert { + margin: 5px 5px 0; + padding: 10px; + box-shadow: none!important; + -webkit-box-shadow: none!important; + border-radius: 0!important; + } + } + >table { + margin-bottom: 0; + } +} + +.widget-body-ajax-loading { + &::before { + display: block; + position: absolute; + content: url(../img/ajax-loader.gif); + padding-top: 18%; + text-align: center; + font-weight: 700; + font-size: 16px; + color: #fff; + background: rgba(255, 255, 255, .4); + height: 100%; + z-index: 1; + width: 100%; + } + &:hover { + cursor: wait!important; + } +} + +.widget-body-toolbar { + &, + .ams-form& { + display: block; + padding: 8px 10px; + margin: -13px -13px 13px; + min-height: 42px; + border-bottom: 1px solid #ccc; + background: #fafafa; + + .no-padding &, + .no-padding& { + display: block; + margin: 0; + } + } + .ams-form & .inline-group, + &.ams-form .inline-group { + float: left; + margin-top: 4px; + } + .btn { + vertical-align: middle; + } + .btn-xs { + margin-top: 5px; + } + .no-widget-toolbar & { + display: none; + } +} + +.widget-content-padding { + padding: 20px; + + .well { + margin-bottom: 0; + } +} + +.widget-footer { + display: block; + position: relative; + min-height: 32px; + vertical-align: middle; + margin: 0 -13px -13px; + padding: 5px; + border-top: 1px solid #E4E4E4; + text-align: right; + background-color: #F8F7F7; + + .no-padding & { + margin: 0; + } + &.ams-form { + >label { + margin-top: 4px; + display: block; + } + } +} + +.ams-widget { + position: relative; + margin: 0 0 15px; + padding: 0; + -khtml-border-radius: 0; + border-radius: 0; + + header { + .nav-tabs { + border-bottom-color: transparent; + + >li { + >a { + border-radius: 0; + border: 0; + padding: 5px 15px 4px; + } + &.active { + >a, + >a:focus, + >a:hover { + color: #555; + background-color: #FFF; + border: 1px solid #C2C2C2; + border-bottom-color: transparent; + border-top: 0; + cursor: default; + } + } + } + } + &:first-child .nav-tabs { + float: left; + + li { + padding-left: 0; + + a { + color: @textColor; + } + } + &.pull-right li:last-child a { + margin-right: 0 !important; + border-right: 0 !important; + } + } + .nav-pills { + margin: 3px; + + & >li >a { + padding: 3px 5px 4px; + } + } + >.btn-group { + margin-top: -13px; + margin-left: 5px; + } + } + >header { + height: 30px; + padding: 0; + line-height: 40px; + color: @textColor; + border: 1px solid #C2C2C2; + background: #fafafa; + + &.active { + background-color: rgba(56, 134, 201, 0.4); + } + h2 { + display: inline-block; + position: relative; + width: auto; + height: 100%; + margin: 0; + font-size: 14px; + line-height: 31px; + font-weight: 400; + letter-spacing: 0; + + @media only screen and (min-width:320px) and (max-width:479px) { + width: 135px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + .rtl & { + float: right; + text-align: right; + } + } + >h2 { + margin-left: 10px; + float: left; + + & + .btn, + & + .btn-group { + margin-left: 20px; + } + } + .rtl & { + padding: 0 7px 0 0; + } + .widget-icon { + display: block; + float: left; + width: 16px; + height: 16px; + margin: 10px 10px 0 0; + zoom: 1; + z-index: 400; + + .rtl & { + float: right; + margin: 10px 0 0 7px; + } + } + >.widget-icon { + display: block; + position: relative; + float: left; + margin: 0 -10px 0 2px; + width: 28px; + height: 28px; + font-size: 111%; + line-height: 29px; + text-align: center; + } + >:first-child { + &.widget-icon { + margin-left: 0; + } + } + } + >div { + position: relative; + float: left; + width: 100%; + font-size: 13px; + -khtml-border-radius: 0; + border-radius: 0; + margin: 0; + padding: 13px 13px 0; + background-color: #fff!important; + border-width: 1px; + border-style: solid; + border-color: #ccc!important; + } + >header+div { + border-top: 0; + } + .widget-body { + position: relative; + min-height: 100px; + padding-bottom: 13px; + + &.widget-hide-overflow { + overflow: hidden; + } + } + &.well { + margin: 0 0 30px; + + header { + display: none; + } + >div { + border: 0!important; + box-shadow: none!important; + -webkit-box-shadow: none!important; + } + &.transparent { + .widget-body { + &.no-padding { + margin: 0!important; + } + } + } + } +} + +.ams-widget-ctrls { + width: auto; + float: right; + padding: 0; + margin: 0; + + a { + display: inline-block; + padding: 0; + margin: 0; + text-decoration: none; + font-size: 14px; + text-align: center; + line-height: 29px; + color: #333; + } + .button-icon { + position: relative; + float: left; + min-width: 28px; + height: 28px; + font-family: Ubuntu, Arial, Helvetica, sans-serif; + border-left: 1px solid rgba(0, 0, 0, .09); + + :hover { + background-color: rgba(0, 0, 0, .05); + } + .rtl & { + margin: 0 0 5px 5px; + } + } + .rtl & { + float: left; + padding: 10px 0 0 3px; + margin: 0; + } +} + +.ams-widget-loader { + display: none; + float: right; + width: 28px; + height: 28px; + margin: 0; + text-align: center; + line-height: 28px; + background-repeat: no-repeat; + background-position: center center; + + .rtl & { + float: left; + } +} + +.ams-widget-editbox { + display: none; + padding: 10px; + border-bottom: 1px solid #B1B1B1; + background-color: #fff; + margin: -13px -13px 13px; + + .no-padding & { + margin: 0 0 10px; + } +} + +.ams-widget, +.ams-widget-editbox, +.ams-widget >div { + zoom: 1; + + &:after { + clear: both; + } + &:before, + &:after { + display: block; + visibility: hidden; + overflow: hidden; + content: "\0020"; + height: 0; + font-size: 0; + line-height: 0; + } +} + +.ams-widget-sortable { + .ui-sortable & { + >header { + cursor: move; + line-height: normal; + -khtml-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05); + box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05); + } + &.ams-widget-collapsed { + >header { + -khtml-border-radius: 0; + border-radius: 0; + } + } + } +} + +.ams-widget-timestamp { + margin: 10px 0 0; + color: #868686; + font-size: 12px; + font-style: italic; +} + +.ams-widget-placeholder { + margin-bottom: 28px; + padding: 0; + background-color: #FFC; + border: 1px dashed #A7A7A7; + -khtml-border-radius: 0; + border-radius: 0; + -webkit-box-sizing: border-box; + -khtml-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.ams-widget-remove-colors { + color: #333 !important; + padding: 0 !important; + background: none !important; +} + +.ams-widget-color(@bgcolor; @border: @bgcolor; @color: #fff; @hover: #333) { + >header { + color: @color; + background: @bgcolor; + border-color: @border !important; + } + .nav-tabs li:not(.active) a, + >header >.ams-widget-ctrls a { + color: @color !important; + } + .nav-tabs li a:hover { + color: @hover !important; + } +} + +.ams-widget-color-magenta { + .ams-widget-color(@magenta); +} + +.ams-widget-color-pink { + .ams-widget-color(@pink); +} + +.ams-widget-color-pinkDark { + .ams-widget-color(@pinkDark); +} + +.ams-widget-color-yellow { + .ams-widget-color(@yellow); +} + +.ams-widget-color-orange { + .ams-widget-color(@orange); +} + +.ams-widget-color-orangeDark { + .ams-widget-color(@orangeDark); +} + +.ams-widget-color-darken { + .ams-widget-color(@darken); +} + +.ams-widget-color-purple { + .ams-widget-color(@purple); +} + +.ams-widget-color-teal { + .ams-widget-color(@teal); +} + +.ams-widget-color-blueDark { + .ams-widget-color(@blueDark); +} + +.ams-widget-color-blue { + .ams-widget-color(@blue); +} + +.ams-widget-color-blueLight { + .ams-widget-color(@blueLight); +} + +.ams-widget-color-red { + .ams-widget-color(@red); +} + +.ams-widget-color-redLight { + .ams-widget-color(@redLight); +} + +.ams-widget-color-white { + .ams-widget-color(@white, #C8C8C8, #C8C8C8, #838383); +} + +.ams-widget-color-greenDark { + .ams-widget-color(@greenDark); +} + +.ams-widget-color-green { + .ams-widget-color(@green); +} + +.ams-widget-color-greenLight { + .ams-widget-color(@greenLight); +} + +#ams-widget-fullscreen-mode { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 99999; + + .ams-widget { + margin: 0; + -khtml-border-radius: 0; + border-radius: 0; + } + >div { + overflow-y: scroll; + -khtml-border-radius: 0; + border-radius: 0; + + >header { + cursor: default; + } + } +} + + +/* + * On/off switch + */ + +.onoffswitch { + position: relative; + width: 50px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + margin-top: 3px; + margin-bottom: 3px; + margin-left: 5px; + display: inline-block; + vertical-align: middle; + + &-container { + margin-top: 4px; + margin-left: 7px; + display: inline-block; + } + &-checkbox { + display: none; + } + &-label { + display: block; + overflow: hidden; + cursor: pointer; + border: 1px solid #626262; + border-radius: 50px; + border-color: #adadad #b3b3b3 #9e9e9e; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + } + &-inner { + width: 200%; + margin-left: -100%; + display: block; + } + &-inner:after, + &-inner:before { + float: left; + width: 50%; + height: 15px; + padding: 0; + line-height: 17px; + font-size: 10px; + font-family: Ubuntu, Trebuchet, Arial, sans-serif; + font-weight: 700; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + &-inner:before { + content: attr(data-swchon-text); + text-shadow: 0 -1px 0 #333; + padding-left: 7px; + background-color: #3276b1; + color: #fff; + -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .05); + box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .05); + text-align: left; + } + &-inner:after { + content: attr(data-swchoff-text); + padding-right: 7px; + text-shadow: 0 -1px 0 #fff; + background-color: #fff; + color: #555; + text-align: right; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); + } + &-switch { + width: 19px; + height: 19px; + margin: -2px; + background: #fff; + border: 1px solid #9a9a9a; + border-radius: 50px; + position: absolute; + top: 0; + bottom: 0; + right: 32px; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + background-color: #f4f4f4; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#eee)); + background-image: -webkit-linear-gradient(top, #fff, #eee); + background-image: -webkit-gradient(linear, top left, bottom left, from(#fff), to(#eee)); + background-image: -webkit-linear-gradient(top, #fff, #eee); + background-image: linear-gradient(to bottom, #fff, #eee); + background-repeat: repeat-x; + -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3); + box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3); + } + &-checkbox + &-label &-switch:before, + &-checkbox:checked + &-label &-switch:before { + content: "\f00d"; + color: #a90329; + display: block; + text-align: center; + line-height: 19px; + font-size: 10px; + text-shadow: 0 -1px 0 #fff; + font-weight: 700; + font-family: FontAwesome; + } + &-checkbox:checked + &-label &-switch:before { + content: "\f00c"; + color: #57889c; + } + &-checkbox:checked + &-label &-inner { + margin-left: 0; + display: block; + } + &-checkbox:checked + &-label &-switch { + right: 0; + } + &-switch:hover { + background-color: #eee; + } + &-switch:active { + background-color: #eee; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); + } + &-checkbox:checked:disabled + &-label &-inner:before, + &-checkbox:disabled + &-label &-inner:after { + text-shadow: 0 1px 0 #fff; + background: #bfbfbf; + color: #333; + } + &-checkbox:checked:disabled + &-label &-switch, + &-checkbox:disabled + &-label &-switch { + background-color: #f4f4f4; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), to(#f4f4f4)); + background-image: -webkit-linear-gradient(top, #bfbfbf, #f4f4f4); + background-image: -webkit-gradient(linear, top left, bottom left, from(#bfbfbf), to(#f4f4f4)); + background-image: -webkit-linear-gradient(top, #bfbfbf, #f4f4f4); + background-image: linear-gradient(to bottom, #bfbfbf, #f4f4f4); + -webkit-box-shadow: none!important; + box-shadow: none!important; + } + &-checkbox:checked:disabled + &-label &-label, + &-checkbox:disabled + &-label { + border-color: #ababab #999 #878787!important; + } + &-checkbox:checked + &-label { + border-color: #3276b1 #2a6395 #255681; + } + +span, + &-title { + display: inline-block; + vertical-align: middle; + margin-top: -5px; + } +} + + +/* + * Select2 widget + */ + +.select2 { + label.with-icon &-parent { + margin-right: 27px; + } + label.with-icons &-parent { + margin-right: 54px; + } + &-container { + margin: 0; + position: relative; + display: inline-block; + zoom: 1; + *display: inline; + vertical-align: middle; + min-width: 60px; + + .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + border: 1px solid #ccc; + white-space: nowrap; + line-height: 26px; + font-size: 13px; + color: #444; + text-decoration: none; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #fff; + + label.bordered & { + border-color: transparent; + } + &:hover { + border: 1px solid rgba(82, 168, 236, 0.7); + } + >.select2-chosen { + margin-right: 26px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + abbr { + display: none; + width: 12px; + height: 12px; + position: absolute; + right: 24px; + top: 8px; + font-size: 1px; + text-decoration: none; + border: 0; + cursor: pointer; + outline: 0; + + &:hover { + cursor: pointer; + } + } + } + } + &.select2-drop-above .select2-choice { + border-bottom-color: #ccc; + } + &.select2-allowclear .select2-choice { + .select2-chosen { + margin-right: 42px; + } + abbr { + display: inline-block; + } + } + .select2-arrow { + display: inline-block; + width: 20px; + height: 20px; + position: absolute; + right: 3px; + top: 3px; + padding: 0 0 0 2px; + border-left: 1px solid #ccc; + line-height: 22px; + -webkit-background-clip: padding-box; + + b { + width: 100%; + height: 100%; + display: inline-block; + font-family: FontAwesome; + font-style: normal; + font-weight: 400; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: relative; + font-size: 14px; + + &:before { + content: "\f107"; + width: 100%; + height: 100%; + text-align: center; + display: block; + } + } + } + } + &-container, + &-drop, + &-search, + &-search input { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + &-container-active { + .select2-choice, + .select2-choices { + border: 1px solid rgba(82, 168, 236, 0.7) !important; + outline: 0; + } + } + &-drop-mask { + border: 0; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 9998; + background: #fff; + filter: alpha(opacity=0); + } + &-drop { + margin-top: -1px; + width: 100%; + position: absolute; + z-index: 9999; + top: 100%; + background: #fff; + color: #000; + border: 1px solid #ccc; + border-top: 0; + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + + &.select2-drop-above { + margin-bottom: 0; + border-top: 1px solid rgba(82, 168, 236, 0.7); + border-top-width: 3px; + border-bottom: 0; + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + + &.select2-drop-active { + border-top-width: 3px; + } + .select2-search { + input { + margin-top: 4px; + } + &:before { + top: 34%; + } + } + } + } + &-drop-auto-width { + border-top: 1px solid #ccc; + width: auto; + + .select2-search { + padding-top: 4px; + } + } + &-drop-active { + border: 1px solid rgba(82, 168, 236, 0.7); + border-top: 0; + border-bottom-width: 3px; + } + &-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + position: relative; + z-index: 10000; + white-space: nowrap; + + &:before { + display: inline-block; + font-family: FontAwesome; + font-style: normal; + font-weight: 400; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + content: "\f002"; + top: 25%; + right: 10px; + color: #686868!important; + } + input { + width: 100%; + height: auto!important; + min-height: 26px; + padding: 4px 20px 3px 5px; + margin: 0; + outline: 0; + font-size: 1em; + border: 1px solid #aaa; + -webkit-box-shadow: none; + box-shadow: none; + background: #fff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(.85, #fff), color-stop(.99, #eee)); + background: -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: -webkit-gradient(linear, top left, bottom left, from(#fff), to(#eee)); + background: -webkit-linear-gradient(top, #fff 85%, #eee 99%); + background: linear-gradient(top, #fff 85%, #eee 99%); + + &.select2-active { + background-origin: padding-box; + background: #fff url(../img/select2-spinner.gif) no-repeat right 24px top 50%; + background: url(../img/select2-spinner.gif) no-repeat right 24px top 50%, -webkit-gradient(linear, left bottom, left top, color-stop(.85, #fff), color-stop(.99, #eee)); + background: url(../img/select2-spinner.gif) no-repeat right 24px top 50%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url(../img/select2-spinner.gif) no-repeat right 24px top 50%, -webkit-gradient(linear, top left, bottom left, from(#fff), to(#eee)); + background: url(../img/select2-spinner.gif) no-repeat right 24px top 50%, -webkit-linear-gradient(top, #fff 85%, #eee 99%); + background: url(../img/select2-spinner.gif) no-repeat right 24px top 50%, linear-gradient(top, #fff 85%, #eee 99%); + } + } + } + &-dropdown-open { + .select2-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: #fff; + } + &.select2-drop-above .select2-choice, + &.select2-drop-above .select2-choices { + border: 1px solid #5D98CC; + border-top-color: transparent; + } + .select2-choice .select2-arrow { + background: 0 0; + border-left: 0; + -webkit-filter: none; + filter: none; + + b { + background-position: -18px 1px; + } + } + } + &-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + font-size: 13px; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + + .select2-selected { + opacity: 0.5; + } + ul.select2-result-sub { + margin: 0; + padding-left: 0; + + >li .select2-result-label { + padding-left: 20px; + } + ul.select2-result-sub { + >li .select2-result-label { + padding-left: 40px; + } + ul.select2-result-sub { + >li .select2-result-label { + padding-left: 60px; + } + ul.select2-result-sub { + >li .select2-result-label { + padding-left: 80px; + } + ul.select2-result-sub { + >li .select2-result-label { + padding-left: 100px; + } + ul.select2-result-sub { + >li .select2-result-label { + padding-left: 110px; + } + ul.select2-result-sub { + >li .select2-result-label { + padding-left: 120px; + } + } + } + } + } + } + } + } + li { + list-style: none; + display: list-item; + background-image: none; + + &.select2-result-with-children >.select2-result-label { + font-weight: 700; + } + } + .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + min-height: 1em; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .select2-highlighted { + background: #3276b1; + color: #fff; + } + li em { + background: #feffde; + font-style: normal; + } + .select2-highlighted em { + background: 0 0; + } + .select2-highlighted ul { + background: #fff; + color: #000; + } + .select2-no-results, + .select2-searching, + .select2-selection-limit { + background: #f4f4f4; + display: list-item; + padding: 3px 5px; + opacity: 0.5; + } + &-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; + + &.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; + } + } + &-results .select2-selected { + display: none; + } + } + &-no-results { + padding-left: 20px; + + &:before { + display: inline-block; + font-family: FontAwesome; + font-style: normal; + font-weight: 400; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f05a"; + margin-right: 5px; + } + } + &-more-results { + background: #f4f4f4; + display: list-item; + + &.select2-active { + background: #f4f4f4 url(../img/select2-spinner.gif) no-repeat 100%; + } + } + &-default { + color: #999!important; + } + &-container { + &.select2-container-disabled { + .select2-choice { + background-image: none; + border: 1px solid transparent; + border-bottom: 1px solid #ccc; + cursor: default; + + .select2-arrow { + display: none; + } + abbr { + display: none; + } + } + .select2-choices { + .select2-search-field { + display: none; + } + } + } + &-multi { + &.select2-container-active .select2-choices { + border: 1px solid rgba(82, 168, 236, 0.7); + outline: 0; + } + .select2-choices { + height: auto!important; + height: 1%; + min-height: 26px; + margin: 0; + padding: 0; + position: relative; + border: 1px solid #ccc; + cursor: text; + overflow: hidden; + background-color: #fff; + + label.bordered & { + border-color: transparent; + } + &:hover { + border: 1px solid rgba(82, 168, 236, 0.7) !important; + + label.bordered & { + border-color: transparent !important; + } + } + li { + float: left; + list-style: none; + } + .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; + width: 100%; + + input { + max-height: 24px; + padding: 3px 5px; + margin: 1px 0; + font-family: Ubuntu, sans-serif; + font-size: 13px; + color: #666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: transparent!important; + + &.select2-active { + background: #fff url(../img/select2-spinner.gif) no-repeat 99%!important; + } + } + } + .select2-search-choice { + padding: 1px 28px 1px 8px; + margin: 2px; + position: relative; + line-height: 18px; + color: #fff; + cursor: default; + border: 1px solid #2a6395; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #3276b1; + + & +.select2-search-field { + width: auto; + } + .select2-chosen { + cursor: default; + } + &-focus { + opacity: .8; + } + &.ui-sortable-handle { + cursor: move; + + .with-icons & { + margin-right: 1px; + } + } + } + } + &.ordered { + .select2-choices { + li { + float: none; + + &.select2-search-choice { + cursor: move; + padding-left: 20px; + background: #3276b1 url(../img/vert-drag-handle.png) scroll no-repeat left center; + } + + &.ui-state-highlight { + margin: 2px 0 2px 2px; + height: 20px; + background-color: #ddd; + border: 1px solid #ddd; + } + } + } + } + .select2-search-choice-close { + display: block; + top: 0; + right: -2px; + padding: 3px 0px 3px 6px; + + &:hover { + background: rgba(0, 0, 0, .3); + } + } + &.select2-container-disabled .select2-choices { + //background-color: #f4f4f4; + background-image: none; + border: 1px solid transparent; + border-bottom: 1px solid #ccc; + cursor: default; + + &:hover { + border-color: transparent!important; + border-bottom: 1px solid #ccc!important; + } + .select2-search-choice { + padding: 1px 5px; + border: 1px solid #4a90cc; + background-image: none; + background-color: #86b4dd; + cursor: not-allowed; + + .select2-search-choice-close { + display: none; + background: 0 0; + } + } + } + } + } + &-locked { + padding: 3px 5px!important; + } + &-search-choice-close { + display: block; + min-width: 20px; + min-height: 14px; + position: absolute; + right: 3px; + top: 3px; + margin: 0; + padding: 0; + font-size: 15px; + text-decoration: none!important; + font-family: FontAwesome; + font-style: normal; + font-weight: 400; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + &:before { + color: #fff; + content: "\f057"; + } + } + &-result-selectable .select2-match, + &-result-unselectable .select2-match { + text-decoration: underline; + } + &-offscreen, + &-offscreen:focus { + clip: rect(0 0 0 0)!important; + width: 1px!important; + height: 1px!important; + border: 0!important; + margin: 0!important; + padding: 0!important; + overflow: hidden!important; + position: absolute!important; + outline: 0!important; + left: 0!important; + top: 0!important; + } + &-display-none { + display: none; + } + &-measure-scrollbar { + position: absolute; + top: -10000px; + left: -10000px; + width: 100px; + height: 100px; + overflow: scroll; + } + &-hidden-accessible { + position: absolute; + border: 0; + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + } +} +label.with-icon { + >i.icon-append +.select2-parent { + >.select2-choices { + padding-right: 29px; + } + } +} + +.multiselect { + &-container { + position: absolute; + list-style-type: none; + margin: 0; + padding: 0; + + .input-group { + margin: 5px; + } + >li { + padding: 0; + + >a { + &.multiselect-all label { + font-weight: 700; + } + >label { + margin: 0; + height: 100%; + cursor: pointer; + font-weight: 400; + + &.checkbox, + &.radio { + margin: 0; + } + >input[type=checkbox] { + margin-bottom: 5px; + } + } + } + >label.multiselect-group { + margin: 0; + padding: 3px 20px; + height: 100%; + font-weight: 700; + } + } + } + .btn-group >.btn-group:nth-child(2) >&.btn { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } +} + + +/* + * Standard Bootstrap widgets + */ + +.color-select { + list-style: none; + margin: 0; + padding: 4px; + min-width: 166px; + max-width: 156px; + right: -3px; + + li { + display: block; + margin: 2px; + float: left; + + span { + display: block; + width: 22px; + height: 22px; + padding: 0; + background: #333; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + border: 1px solid rgba(0, 0, 0, .1); + cursor: pointer; + + &:hover { + border: 3px solid rgba(0, 0, 0, .2); + } + } + } + .widget-toolbar .dropdown-menu& { + right: -1px; + } +} + +.color-box { + display: block; + position: relative; + width: 22px; + height: 22px; + padding: 0; + background: #333; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid rgba(255, 255, 255, .3) !important; + cursor: pointer; + vertical-align: middle; + outline: 1px solid rgba(0, 0, 0, .1); + background: rgba(255, 255, 255, .3) !important; + + &:hover, + .open & { + outline: 1px solid rgba(0, 0, 0, .1) !important; + } + &:hover { + -webkit-transform: scale(1.07); + -moz-transform: scale(1.07); + } + &:active { + top: 1px; + left: 1px; + } + .widget-toolbar >& { + margin-top: 7px; + width: 18px; + height: 18px; + outline: 1px solid rgba(0, 0, 0, .2); + + &:active, + &:focus, + &:hover { + outline: 1px solid rgba(0, 0, 0, .25)!important; + } + } +} + +/* + * Full calendar + */ + +#calendar { + .ams-widget & { + margin-top: -18px; + } +} + +#calendar-buttons { + position: absolute; + right: 14px; + top: 5px; +} + +#calendar-container { + position: relative; +} + +#external-events { + >li { + margin: 6px 4px 6px 0; + display: inline-block; + + >:first-child { + padding: 5px 10px 10px; + cursor: move; + display: block; + } + >:first-child:after { + color: #fff; + color: rgba(255, 255, 255, .7); + content: attr(data-description); + font-size: 11px; + font-weight: 400; + display: block; + line-height: 0; + margin: 7px 0; + text-transform: lowercase; + } + } +} + +.fc { + direction: ltr; + text-align: left; + + .fc-header-space { + padding-left: 10px; + } + table, + html & { + font-size: 12px; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + th, + td { + padding: 0; + vertical-align: top; + } + .ui-resizable-handle { + display: block; + position: absolute; + z-index: 99999; + overflow: hidden; + font-size: 300%; + line-height: 50%; + } + .ui-draggable-dragging .fc-event-bg { + display: none; + } +} + +.fc-border-separate { + thead tr, + .table thead tr { + background-color: #eee; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#fafafa)); + background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 100%); + background-image: -linear-gradient(top, #f2f2f2 0, #fafafa 100%); + font-size: 12px; + } + thead tr th { + padding: 4px; + line-height: 1.428571429; + } +} + +.fc-first { + tr td&, + tr& th& { + border-left: 0; + } +} + +.fc-last { + tr& td { + border-bottom: 0; + } +} + +.fc-header { + .fc-button { + margin-bottom: 1em; + vertical-align: top; + margin-right: -1px; + } + .fc-corner-right { + margin-right: 1px; + } + .ui-corner-right { + margin-right: 0; + } + .fc-state-hover, + .ui-state-hover { + z-index: 2; + } + .fc-state-down { + z-index: 3; + } + .fc-state-active, + .ui-state-active { + z-index: 4; + } + td { + white-space: nowrap; + } +} + +.fc-header-left { + width: 25%; + text-align: left; +} + +.fc-header-center { + text-align: center; +} + +.fc-header-right { + width: 25%; + text-align: right; +} + +.fc-header-title { + display: inline-block; + vertical-align: top; + + h2 { + margin-top: 0; + white-space: nowrap; + } + .ams-widget & h2 { + text-shadow: 0 1px 0 #fff; + margin-top: -12px; + margin-left: 10px; + font-size: 14px; + font-weight: 700; + margin-bottom: 0; + } +} + +.fc-content { + clear: both; +} + +.fc-view { + width: 100%; + overflow: hidden; +} + +.fc-widget-content, +.fc-widget-header { + border: 1px solid #ccc; + border-right: 0; +} + +.fc-state-highlight { + background: #ffc; +} + +.fc-cell-overlay { + background: #9cf; + opacity: .2; + filter: alpha(opacity=20); +} + +.fc-button { + position: relative; + display: inline-block; + cursor: pointer; +} + +.fc-button-inner { + position: relative; + float: left; + overflow: hidden; +} + +.fc-state-default { + border-width: 1px 0; + + .fc-button-inner { + border-width: 0 1px; + } + &, + .fc-button-inner { + border-style: solid; + border-color: #ccc #bbb #aaa; + background: #F3F3F3; + color: #000; + } + .fc-button-effect { + position: absolute; + top: 50%; + left: 0; + + span { + position: absolute; + top: -100px; + left: 0; + width: 500px; + height: 100px; + border-width: 100px 0 0 1px; + border-style: solid; + border-color: #fff; + background: #444; + opacity: .09; + filter: alpha(opacity=9); + } + } +} + +.fc-state-hover { + .fc-button-inner { + border-color: #999; + } +} + +.fc-state-down { + .fc-button-inner { + border-color: #555; + background: #777; + } +} + +.fc-state-active { + .fc-button-inner { + border-color: #555; + background: #777; + color: #fff; + } +} + +.fc-state-disabled { + cursor: default; + + .fc-button-inner { + color: #999; + border-color: #ddd; + } + .fc-button-effect { + display: none; + } +} + +.fc-button-content { + position: relative; + float: left; + height: 1.9em; + line-height: 1.9em; + padding: 0 .6em; + white-space: nowrap; + + .fc-icon-wrap { + position: relative; + float: left; + top: 50%; + } + .ui-icon { + position: relative; + float: left; + margin-top: -50%; + *margin-top: 0; + *top: -50%; + } +} + +.fc-event { + border-style: solid; + border-width: 0; + font-size: .85em; + cursor: default; + + .fc-rtl & { + text-align: right; + } +} + +.fc-event-draggable, +a.fc-event { + cursor: pointer; +} + +a.fc-event { + text-decoration: none; +} + +.fc-event-skin { + color: #FFF; + border-right: 0!important; + cursor: move; + + .fa:before { + display: block; + font-size: 14px; + position: absolute; + right: 4px; + top: 3px; + } +} + +.fc-event-inner { + position: relative; + width: 100%; + height: 100%; + border-style: solid; + border-width: 0; + overflow: hidden; +} + +.fc-event-hori { + border-width: 1px 0; + margin-bottom: 1px; + + .ui-resizable-e { + top: 0!important; + right: -3px!important; + width: 7px!important; + height: 100%!important; + cursor: e-resize; + } + .ui-resizable-w { + top: 0!important; + left: -3px!important; + width: 7px!important; + height: 100%!important; + cursor: w-resize; + } + .ui-resizable-handle { + _padding-bottom: 14px; + } +} + +.fc-corner-left { + margin-left: 1px; + + .fc-button-inner, + .fc-event-inner { + margin-left: -1px; + } +} + +.fc-corner-right { + margin-right: 1px; + + .fc-button-inner, + .fc-event-inner { + margin-right: -1px; + } + .fc-event-inner { + border-left: 6px solid rgba(0, 0, 0, .15); + padding-left: 2px; + padding-right: 15px; + } +} + +.fc-corner-top { + margin-top: 1px; + + .fc-event-inner { + margin-top: -1px; + border-top-width: 1px; + } +} + +.fc-corner-bottom { + margin-bottom: 1px; + + .fc-event-inner { + margin-bottom: -1px; + border-bottom-width: 1px; + } +} + +.fc-table-separate { + table& { + border-collapse: separate; + } + td, + th { + border-width: 1px 0 0 1px; + + &.fc-last { + border-right-width: 1px; + } + } + tr.fc-last { + td, + th { + border-bottom-width: 1px; + } + } + tbody { + tr.fc-first td, + tr.fc-first th { + border-top-width: 0; + } + } +} + +.fc-grid { + th { + text-align: center; + } + .fc-day-number { + float: right; + padding: 0 2px; + } + .fc-other-month .fc-day-number { + opacity: .3; + filter: alpha(opacity=30); + } + .fc-day-content { + clear: both; + padding: 2px 2px 1px; + } + .fc-event-time { + font-weight: 700; + } + .fc-rtl & { + .fc-day-number { + float: left; + } + .fc-event-time { + float: right; + } + } +} + +.fc-agenda { + table { + border-collapse: separate; + } + .fc-agenda-axis { + width: 50px; + padding: 0 4px; + vertical-align: middle; + text-align: right; + white-space: nowrap; + font-weight: 400; + } + .fc-day-content { + padding: 2px 2px 1px; + } +} + +.fc-agenda-days { + th { + text-align: center; + + } + .fc-agenda-axis { + border-right-width: 1px; + } + .fc-col0 { + border-left-width: 0; + } +} +.fc-agenda-allday { + th { + border-width: 0 1px; + } + .fc-day-content { + min-height: 34px; + _height: 34px; + } +} + +.fc-agenda-divider-inner { + height: 2px; + overflow: hidden; + + .fc-widget-header & { + background: #eee; + } +} + +.fc-agenda-slots { + th { + border-width: 1px 1px 0; + } + td { + border-width: 1px 0 0; + background: 0 0; + + div { + height: 20px; + } + } + tr { + &.fc-slot0 td, + &.fc-slot0 th { + border-top-width: 0; + } + &.fc-minor td, + &.fc-minor th { + border-top-style: dotted; + } + &.fc-minor th.ui-widget-header { + *border-top-style: solid; + } + } +} + +.fc-event-time, +.fc-event-title { + padding: 3px 0 2px 3px; + display: inline-block; + line-height: 16px; + font-weight: 700; + font-size: 11px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.fc-event-vert { + border-width: 0 1px; + + .fc-event-content, + .fc-event-head { + position: relative; + z-index: 2; + width: 100%; + overflow: hidden; + } + .fc-event-time { + white-space: nowrap; + font-size: 10px; + } + .fc-event-bg { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #fff; + opacity: .3; + filter: alpha(opacity=30); + } + .ui-resizable-s { + bottom: 0!important; + width: 100%!important; + height: 8px!important; + overflow: hidden!important; + line-height: 8px!important; + font-size: 11px!important; + font-family: monospace; + text-align: center; + cursor: s-resize; + } +} + +.fc-select-helper .fc-event-bg { + display: none; +} + +.fc-agenda .ui-resizable-resizing { + _overflow: hidden; +} + + +/* + * Colorpicker + */ + +.colorpicker { + padding-left: 30px!important; +} + + +/* + * Timepicker + */ + +.bootstrap-timepicker { + position: relative; + + &.pull-right .bootstrap-timepicker-widget { + &.dropdown-menu { + left: auto; + right: 0; + + &:before { + left: auto; + right: 12px; + } + &:after { + left: auto; + right: 13px; + } + } + } + .add-on { + cursor: pointer; + + i { + display: inline-block; + width: 16px; + height: 16px; + } + } + @media (max-width:767px) { + &, + & .dropdown-menu { + width: 100%; + } + } +} + +.bootstrap-timepicker-widget { + &.dropdown-menu { + padding: 4px; + + &.open { + display: inline-block; + } + &:before { + border-bottom: 7px solid rgba(0, 0, 0, .2); + border-left: 7px solid transparent; + border-right: 7px solid transparent; + content: ""; + display: inline-block; + position: absolute; + } + &:after { + border-bottom: 6px solid #FFF; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + content: ""; + display: inline-block; + position: absolute; + } + } + &.timepicker-orient-left:before { + left: 6px; + } + &.timepicker-orient-left:after { + left: 7px; + } + &.timepicker-orient-right:before { + right: 6px; + } + &.timepicker-orient-right:after { + right: 7px; + } + &.timepicker-orient-top:before { + top: -7px; + } + &.timepicker-orient-top:after { + top: -6px; + } + &.timepicker-orient-bottom:before { + bottom: -7px; + border-bottom: 0; + border-top: 7px solid #999; + } + &.timepicker-orient-bottom:after { + bottom: -6px; + border-bottom: 0; + border-top: 6px solid #fff; + } + a.btn, + input { + border-radius: 4px; + } + table { + width: 100%; + margin: 0; + + table td { + text-align: center; + height: 30px; + margin: 0; + padding: 2px; + + &:not(.separator) { + min-width: 30px; + } + span { + width: 100%; + } + a { + border: 1px transparent solid; + width: 100%; + display: inline-block; + margin: 0; + padding: 8px 0; + outline: 0; + color: #333; + + &:hover { + text-decoration: none; + background-color: #eee; + border-radius: 4px; + border-color: #ddd; + } + i { + margin-top: 2px; + font-size: 18px; + } + } + input { + width: 25px; + margin: 0; + text-align: center; + } + } + } + &.modal { + @media (min-width:767px) { + width: 200px; + margin-left: -100px; + } + } + .modal-content { + padding: 4px; + } +} + + +/* + * Note editor + */ + +.note-editor { + border: 1px solid #a9a9a9; + + &.fullscreen { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + + &.fullscreen .note-editable { + background-color: #fff; + } + } + &.codeview .note-editable, + &.fullscreen .note-resizebar { + display: none; + } + &.codeview .note-codeable { + display: block; + } + .note-toolbar { + padding-bottom: 5px; + padding-left: 5px; + margin: 0; + background-color: #f5f5f5; + border-bottom: 1px solid #a9a9a9; + } + .note-toolbar>.btn-group { + margin-top: 5px; + margin-right: 5px; + margin-left: 0; + } + .note-toolbar { + .note-table { + .dropdown-menu { + min-width: 0; + padding: 5px; + } + .dropdown-menu .note-dimension-picker { + font-size: 18px; + } + .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher { + position: absolute!important; + z-index: 3; + width: 10em; + height: 10em; + cursor: pointer; + } + .note-table .dropdown-menu .note-dimension-picker { + .note-dimension-picker-unhighlighted { + position: relative!important; + z-index: 1; + width: 5em; + height: 5em; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC) repeat; + } + .note-dimension-picker-highlighted { + position: absolute!important; + z-index: 2; + width: 1em; + height: 1em; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC) repeat; + } + } + } + .note-style blockquote, .note-editor .note-toolbar .note-style h1, .note-editor .note-toolbar .note-style h2, .note-editor .note-toolbar .note-style h3, .note-editor .note-toolbar .note-style h4, .note-editor .note-toolbar .note-style h5, .note-editor .note-toolbar .note-style h6 { + margin: 0; + } + .note-color { + .dropdown-toggle { + width: 20px; + padding-left: 5px; + } + .dropdown-menu { + min-width: 290px; + + .btn-group { + margin: 0; + + &:first-child { + margin: 0 5px; + } + .note-palette-title { + margin: 2px 7px; + font-size: 12px; + text-align: center; + border-bottom: 1px solid #eee; + } + .note-color-reset { + padding: 0 3px; + margin: 5px; + font-size: 12px; + cursor: pointer; + border-radius: 5px; + + &:hover { + background: #eee; + } + } + } + } + } + .note-para { + .dropdown-menu { + min-width: 153px; + padding: 5px; + } + .note-para li:first-child { + margin-bottom: 5px; + } + } + } + .note-statusbar { + background-color: #f5f5f5; + + .note-resizebar { + width: 100%; + height: 8px; + cursor: s-resize; + + .note-icon-bar { + width: 20px; + margin: 1px auto; + border-top: 1px solid #a9a9a9; + } + } + } + .note-popover .popover { + max-width: none; + + .popover-content { + padding: 5px; + + a { + display: inline-block; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: middle; + } + .btn-group+.btn-group { + margin-left: 5px; + } + } + .arrow { + left: 20px; + } + } + .note-handle { + .note-control-selection { + position: absolute; + display: none; + border: 1px solid #000; + + >div { + position: absolute; + } + .note-control-selection-bg { + width: 100%; + height: 100%; + background-color: #000; + -webkit-opacity: .3; + -khtml-opacity: .3; + -moz-opacity: .3; + opacity: .3; + -ms-filter: alpha(opacity=30); + filter: alpha(opacity=30); + } + .note-control-handle, + .note-control-holder { + width: 7px; + height: 7px; + border: 1px solid #000; + } + .note-control-sizing { + width: 7px; + height: 7px; + background-color: #fff; + border: 1px solid #000; + } + .note-control-nw { + top: -5px; + left: -5px; + border-right: 0; + border-bottom: 0; + } + .note-control-ne { + top: -5px; + right: -5px; + border-bottom: 0; + border-left: 0; + } + .note-control-sw { + bottom: -5px; + left: -5px; + border-top: 0; + border-right: 0; + } + .note-control-se { + right: -5px; + bottom: -5px; + cursor: se-resize; + } + .note-control-selection-info { + right: 0; + bottom: 0; + padding: 5px; + margin: 5px; + font-size: 12px; + color: #fff; + background-color: #000; + border-radius: 5px; + -webkit-opacity: .7; + -khtml-opacity: .7; + -moz-opacity: .7; + opacity: .7; + -ms-filter: alpha(opacity=70); + filter: alpha(opacity=70); + } + } + } + .note-dialog { + >div { + display: none; + } + .note-image-dialog .note-dropzone { + min-height: 200px; + font-size: 30px; + line-height: 6; + color: #d3d3d3; + text-align: center; + border: 4px dashed #d3d3d3; + } + .note-help-dialog { + font-size: 12px; + color: #ccc; + background: 0 0; + background-color: #222!important; + border: 0; + -webkit-opacity: .9; + -khtml-opacity: .9; + -moz-opacity: .9; + opacity: .9; + -ms-filter: alpha(opacity=90); + filter: alpha(opacity=90); + + .modal-content { + background: 0 0; + border: 1px solid #fff; + border-radius: 5px; + -webkit-box-shadow: none; + box-shadow: none; + } + a { + font-size: 12px; + color: #fff; + } + .title { + padding-bottom: 5px; + font-size: 14px; + font-weight: 700; + color: #fff; + border-bottom: #fff 1px solid; + } + .modal-close { + font-size: 14px; + color: #dd0; + cursor: pointer; + } + .note-shortcut-layout { + width: 100%; + + td { + vertical-align: top; + } + } + .note-shortcut { + margin-top: 8px; + + th { + font-size: 13px; + color: #dd0; + text-align: left; + + &:first-child { + min-width: 110px; + padding-right: 10px; + font-family: "Courier New"; + color: #dd0; + text-align: right; + } + } + } + } + } + .note-editable { + padding: 10px; + overflow: scroll; + outline: 0; + } + .note-codeable { + display: none; + width: 100%; + padding: 10px; + margin-bottom: 0; + font-family: Menlo, Monaco, monospace, sans-serif; + font-size: 14px; + color: #ccc; + background-color: #222; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + resize: none; + } + .dropdown-menu { + min-width: 90px; + + &.right { + right: 0; + left: auto; + + &::before { + right: 9px; + left: auto!important; + } + &::after { + right: 10px; + left: auto!important; + } + } + .dropdown-menu li { + a i { + color: #00bfff; + visibility: hidden; + } + a.checked i { + visibility: visible; + } + } + } + .note-color-palette { + line-height: 1; + + div .note-color-btn { + width: 17px; + height: 17px; + padding: 0; + margin: 0; + border: 1px solid #fff; + + &:hover { + border: 1px solid #000; + } + } + } + .no-padding & { + border: 0; + } + .note-editable { + background-color: rgba(48, 126, 204, .05); + + &:focus { + background-color: #fff; + } + } + .note-statusbar { + .note-resizebar { + border-top: 1px solid #DBDBDB; + } + &:hover { + background: #EEE; + } + &:active { + background: #eaeaea; + } + } +} + +/* + * MD editor + */ + +.md-editor { + display: block; + border: 1px solid #ddd; + + &.active { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); + } + .md-footer, + >.md-header { + display: block; + padding: 6px 4px; + background: #f5f5f5; + } + >.md-preview { + background: #fff; + border-top: 1px dashed #ddd; + border-bottom: 1px dashed #ddd; + min-height: 10px; + padding: 10px; + } + >textarea { + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size: 13px; + outline: 0; + outline: thin dotted \9; + margin: 0; + display: block; + width: 100%; + border: 0; + padding: 10px; + border-top: 1px dashed #ddd; + border-bottom: 1px dashed #ddd; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: #eee; + } + >textarea:focus { + -webkit-box-shadow: none; + box-shadow: none; + background: #fff; + } +} + + +/* + * Twitter Typeahead + */ + +.twitter-typeahead { + .tt-hint, + .tt-query { + margin-bottom: 0; + } +} +.tt-dropdown-menu { + min-width: 160px; + margin-top: 2px; + padding: 5px 0; + background-color: #fff; + border: 1px solid #bfbfbf; + border: 1px solid rgba(0, 0, 0, .2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.tt-suggestion { + display: block; + padding: 3px 20px; + + &.tt-is-under-cursor { + color: #fff; + background-color: #0081c2; + } + &.tt-is-under-cursor a { + color: #fff; + } + p { + margin: 0; + } +} + + +/* + * DropZone + */ + +.dropzone, +.dropzone *, +.dropzone-previews, +.dropzone-previews * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.dropzone, +.dropzone-previews { + .dz-preview { + background: rgba(255, 255, 255, .8); + position: relative; + display: inline-block; + margin: 10px; + vertical-align: top; + border: 1px solid #acacac; + padding: 6px; + -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .16); + box-shadow: 1px 1px 4px rgba(0, 0, 0, .16); + font-size: 14px; + + &.dz-file-preview { + display: none; + } + .dz-details { + width: 100px; + height: 100px; + position: relative; + background: #ebebeb; + padding: 5px; + margin-bottom: 22px; + + .dz-filename { + overflow: hidden; + height: 100%; + } + img { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + } + .dz-size { + position: absolute; + bottom: -28px; + left: 3px; + height: 28px; + line-height: 28px; + } + } + &.dz-error .dz-error-mark, + &.dz-success .dz-success-mark { + display: block; + opacity: 1; + -ms-filter: none; + -webkit-filter: none; + filter: none; + } + &:hover .dz-details img { + display: none; + } + .dz-error-mark, + .dz-success-mark { + display: block; + position: absolute; + width: 40px; + height: 40px; + font-size: 30px; + text-align: center; + right: -10px; + top: -10px; + opacity: 0; + -ms-filter: "alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity .4s ease-in-out; + transition: opacity .4s ease-in-out; + background-image: url(../img/dropzone/spritemap.png); + background-repeat: no-repeat; + + span { + display: none; + } + } + .dz-success-mark { + color: #8cc657; + background-position: -268px -163px; + } + .dz-error-mark { + color: #ee162d; + background-position: -268px -123px; + } + &.dz-error .dz-progress .dz-upload { + background: #ee1e2d; + } + .dz-progress { + position: absolute; + top: 100px; + left: 6px; + right: 6px; + height: 6px; + background: #d7d7d7; + display: none; + + .dz-upload { + position: absolute; + bottom: 0; + background-color: #8cc657; + -webkit-animation: loading .4s linear infinite; + -ms-animation: loading .4s linear infinite; + animation: loading .4s linear infinite; + -webkit-transition: width .3s ease-in-out; + transition: width .3s ease-in-out; + border-radius: 2px; + top: 0; + left: 0; + width: 0; + height: 100%; + background-image: url(../img/dropzone/spritemap.png); + background-repeat: repeat-x; + background-position: 0 -400px; + } + } + &.dz-processing .dz-progress { + display: block; + } + .dz-error-message { + position: absolute; + top: -5px; + left: -20px; + background: rgba(245, 245, 245, .8); + padding: 8px 10px; + color: #800; + min-width: 140px; + max-width: 500px; + z-index: 500; + display: block; + opacity: 0; + -ms-filter: "alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity .3s ease-in-out; + transition: opacity .3s ease-in-out; + } + &:hover.dz-error .dz-error-message { + display: block; + opacity: 1; + -ms-filter: none; + -webkit-filter: none; + filter: none; + } + &.dz-image-preview:hover .dz-details img { + display: block; + opacity: .1; + -ms-filter: "alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + &.dz-success .dz-progress { + display: block; + opacity: 0; + -ms-filter: "alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity .4s ease-in-out; + transition: opacity .4s ease-in-out; + } + } + a.dz-remove { + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee)); + background-image: -webkit-linear-gradient(top, #fafafa 0, #eee 100%); + background-image: -webkit-gradient(linear, top left, bottom left, from(#fafafa), to(#eee)); + background-image: -webkit-linear-gradient(top, #fafafa 0, #eee 100%); + background-image: linear-gradient(top, #fafafa 0, #eee 100%); + border-radius: 2px; + border: 1px solid #eee; + text-decoration: none; + display: block; + padding: 4px 5px; + text-align: center; + color: #aaa; + margin-top: 26px; + + &:hover { + color: #666; + } + } +} + +.dropzone { + position: relative; + padding: 1em; + border: 1px solid rgba(0, 0, 0, .03); + min-height: 360px; + border-radius: 3px; + background: rgba(0, 0, 0, .03); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(0, 0, 0, .03)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(0, 0, 0, .03)), color-stop(.75, rgba(0, 0, 0, .03)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, .03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, .03) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, .03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, .03) 75%, transparent 75%, transparent); + background-image: linear-gradient(135deg, rgba(0, 0, 0, .03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, .03) 75%, transparent 75%, transparent); + background-color: #FAFCFD; + -webkit-background-size: 16px 16px; + background-size: 16px 16px; + + .dz-drag-hover { + background: rgba(0, 0, 0, .04); + } + &.dz-clickable, + &.dz-clickable .dz-message, + &.dz-clickable .dz-message span { + cursor: pointer; + } + &.dz-clickable * { + cursor: default; + } + .dz-message { + opacity: 1; + -ms-filter: none; + -webkit-filter: none; + filter: none; + } + .dz-drag-hover { + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(0, 0, 0, .03)), color-stop(.25, rgba(0, 0, 0, 0)), color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, rgba(0, 0, 0, .03)), color-stop(.75, rgba(0, 0, 0, .03)), color-stop(.75, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); + background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); + background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); + background-image: linear-gradient(135deg, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); + background-color: #fafafa; + -webkit-background-size: 22px 22px; + background-size: 22px 22px; + border: 5px dashed #ccc; + } + .dz-default.dz-message { + opacity: 1; + -ms-filter: none; + -webkit-filter: none; + filter: none; + -webkit-transition: opacity .3s ease-in-out; + transition: opacity .3s ease-in-out; + background-image: url(../img/dropzone/spritemap.png); + background-repeat: no-repeat; + background-position: 0 0; + position: absolute; + width: 428px; + height: 123px; + margin-left: -214px; + margin-top: -61.5px; + top: 50%; + left: 50%; + + span { + display: none; + } + } + &.dz-square .dz-default.dz-message { + background-position: 0 -123px; + width: 268px; + margin-left: -134px; + height: 174px; + margin-top: -87px; + } + &.dz-drag-hover .dz-message { + opacity: .15; + -ms-filter: "alpha(Opacity=15)"; + filter: alpha(opacity=15); + } + &.dz-started .dz-message { + display: block; + opacity: 0; + -ms-filter: "alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} + + +.irs { + position: relative; + display: block; + height: 40px; + + &-line { + position: relative; + display: block; + overflow: hidden; + height: 8px; + top: 25px; + background: #eee; + + &-left, + &-mid, + &-right { + position: absolute; + display: block; + top: 0; + height: 8px; + } + &-left { + left: 0; + width: 10%; + } + &-mid { + left: 10%; + width: 80%; + } + &-right { + right: 0; + width: 10%; + } + } + &-diapason { + position: absolute; + display: block; + left: 0; + width: 100%; + } + &-slider { + position: absolute; + display: block; + cursor: default; + z-index: 1; + width: 10px; + height: 22px; + top: 17px; + border: 1px solid #fff; + background: #858585; + + &:hover { + background: #6c6c6c; + } + &.single { + left: 10px; + + &:before { + position: absolute; + display: block; + content: ""; + top: -50%; + left: -150%; + width: 400%; + height: 200%; + background: rgba(0, 0, 0, 0); + } + } + &.from { + left: 100px; + + &:before { + position: absolute; + display: block; + content: ""; + top: -50%; + left: -300%; + width: 400%; + height: 200%; + background: rgba(0, 0, 0, 0); + } + } + &.to { + left: 300px; + + &:before { + position: absolute; + display: block; + content: ""; + top: -50%; + left: 0; + width: 400%; + height: 200%; + background: rgba(0, 0, 0, 0); + } + } + &.last { + z-index: 2; + } + } + &-max, + &-min { + color: #999; + font-size: 12px; + line-height: 1.333; + text-shadow: none; + top: 0; + padding: 1px 3px; + background: rgba(0, 0, 0, .1); + border-radius: 0; + + .lt-ie9 & { + background: #bfbfbf; + } + } + &-min { + position: absolute; + display: block; + left: 0; + cursor: default; + } + &-max { + position: absolute; + display: block; + right: 0; + cursor: default; + } + &-from, + &-single, + &-to { + position: absolute; + display: block; + top: 0; + left: 0; + cursor: default; + white-space: nowrap; + + .lt-ie9 & { + background: #999; + } + } + &-grid { + position: absolute; + display: none; + bottom: 0; + left: 0; + width: 100%; + height: 20px; + } + &-with-grid { + height: 60px; + } + &-with-grid + &-grid { + display: block; + } + &-grid-pol { + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 8px; + background: #99a4ac; + + &.small { + height: 4px; + } + } + &-grid-text { + position: absolute; + bottom: 0; + left: 0; + width: 100px; + white-space: nowrap; + text-align: center; + font-size: 9px; + line-height: 9px; + color: #99a4ac; + } + &-diapason { + background: #3276b1; + height: 8px; + top: 25px; + } + .irs-from, .irs-single, .irs-to { + color: #fff; + font-size: 10px; + line-height: 1.333; + text-shadow: none; + padding: 1px 5px; + background: rgba(0, 0, 0, .4); + border-radius: 0; + } +} + +#irs-active-slider { + background: #686868; + -webkit-box-shadow: rgba(0, 0, 0, .3) 1px 1px 1px 0; + box-shadow: rgba(0, 0, 0, .3) 1px 1px 1px 0; + width: 12px; + height: 24px; + top: 16px; +} + + +/* + * Google maps + */ + +.google_maps { + width: 100%; + height: 350px; + position: relative; + + * { + box-sizing: content-box; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + } + img { + max-width: none; + } +}