// general
@fontColor : #505050;
+@fontColorLight: #a9a9a9;
+@fontHighlight: orange;
@listBackColor: #f8f8f8;
@listActiveColor: #E7E7E7;
@appBackColor: #ffffff;
@unactiveTabFontColor: #a9a9a9;
@colorActive: rgb(64,196,255);
+@popupHeaderColor: #ffffff;
// yangman
@leftPanelBackColor: #f3f3f3;
@dataStoreListBorderColor: rgba(0,0,0,0.12);
@dashedBorderColor: rgba(0,0,0,0.54);
@inputColor: rgba(0,0,0,0.87);
+@reqMethodGet: #63d33b;
+@reqMethodPut: #6fbad3;
+@reqMethodPost: #ea9c30;
+@reqMethodDelete: #eabb2f;
+@reqError: #ff0000;
+@darkBlueColor: rgb(33,150,243);
// helpers
.pointer{
margin-bottom: 30px;
}
+.mr8{
+ margin-right: 8px;
+}
+
.nrp{
padding-right: 0!important;
}
+.flex-center {
+ align-items: center;
+ justify-content: center;
+}
+
// general
.md-open-menu-container{
span{
color: @fontColor;
}
+ h5{
+ margin: 0 16px;
+ color: @unactiveTabFontColor;
+
+ md-icon{
+ color: @unactiveTabFontColor;
+ font-size: 18px;
+ }
+ }
+
md-menu-content{
.info-box{
position: absolute;
}
}
+.md-select-menu-container{
+ z-index: 1000;
+}
+
.svg-icon{
width: 24px;
height: 24px;
background: @colorActive;
}
+button{
+ label{
+ font-weight: normal;
+ }
+}
+
+.ui-resizable-e{
+ cursor: e-resize;
+ height: 100%;
+ width: 7px;
+ top: 0;
+ position: absolute;
+ right: 0;
+}
+
+md-dialog{
+ md-autocomplete{
+ height: 50px !important;
+ }
+}
+
+.info-box-container{
+ position: relative;
+
+ &__hover-wrapper{
+ display: inline-block;
+ width: 100%;
+ }
+
+ .info-box{
+ position: absolute;
+ left: 90%;
+ top: 0;
+ margin-left: 10px;
+ margin-bottom: 10px;
+ min-width: 300px;
+ padding: 0;
+ z-index: 10;
+ background: #fff;
+ -webkit-transition: all 150ms linear;
+ -moz-transition: all 150ms linear;
+ -ms-transition: all 150ms linear;
+ -o-transition: all 150ms linear;
+ transition: all 150ms linear;
+ opacity: 1;
+ max-height: 300px;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ &__padding{
+ padding: 16px;
+ }
+
+ &.ng-hide{
+ opacity: 0;
+ }
+
+ span{
+ color: @fontColor;
+ }
+ }
+
+ md-menu-divider{
+ margin-top: 4px;
+ margin-bottom: 4px;
+ height: 1px;
+ min-height: 1px;
+ max-height: 1px;
+ width: 100%;
+ background-color: @dataStoreListBorderColor;
+ display: block;
+ }
+}
+
+md-input-container{
+ position: relative;
+
+ input.md-has-error{
+ border-color: @reqError!important;
+ }
+
+ .md-custom-error{
+ color: @reqError;
+ margin-top: 4px;
+ margin-left: 3px;
+ font-size: 11px;
+ line-height: 14px;
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3;
+ }
+}
+
+.md-dialog-container{
+ z-index: 99;
+}
+
// yangman
.yangmanModule{
background-color: @appBackColor;
color: @fontColor;
height: 100%;
- /*.md-input{
- color: @inputColor;
- background: transparent;
- }*/
+ .ui-resizable-s{
+ height: 13px;
+ }
+
+ .box-container{
+ padding: 16px;
+ margin: 8px 0;
+ }
+
+ .historyTab{
+ height: calc(~'100% - 62px');
+ }
+
+ .collectionsTab{
+ height: calc(~'100% - 62px');
+ }
+
p{
margin: 0;
//width: 100%;
}
+ .highlight{
+ color: @darkBlueColor;
+ }
md-tabs-content-wrapper{
top: 0!important;
}
}
}
+ md-dialog{
+ h2{
+ color: @popupHeaderColor;
+ }
+
+ &-actions{
+ button{
+ span{
+ color: @fontColor;
+ }
+ }
+ }
+
+
+ }
// left panel
&__left-panel{
overflow-x: hidden;
background: @leftPanelBackColor;
- //background: @listBackColor;
+ position: relative;
+
+ &__search{
+ padding: 10px 13px;
+ background: @listBackColor;
+ min-height: 62px;
+
+ .md-errors-spacer{
+ display: none;
+ }
+
+ md-icon{
+ color: @dashedBorderColor;
+ }
+
+ .collection-button-container {
+ margin-top: 6px;
+ }
+
+ button {
+ margin: 0;
+ min-width: 35px;
+ }
+
+ md-menu button {
+ margin-top: 6px;
+ }
+
+
+
+
+
+ .md-has-icon.modules-list-search{
+ padding: 2px 25px;
+ margin: 0;
+
+ .md-input{
+ width: auto;
+ order: 0;
+ }
+
+ button{
+ margin: 0;
+ padding: 0;
+ min-width: 0;
+ min-height: 0;
+ line-height: normal;
+
+ &:hover, &:focus, &:active, &:visited{
+ background: transparent;
+ }
+
+ .md-ripple-container{
+ display: none;
+ }
+ }
+ }
+ }
md-tabs,
md-tab-content > div,
- md-content{
+ md-content,
+ .h100{
height: 100%;
}
}
}
- /*md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon){
- margin-right: 16px;
- }*/
-
- /*md-list-item > md-icon:first-child:not(.md-avatar-icon){
- margin: 0 16px;
- }*/
-
&__detail-list-tabs-container{
> md-tabs-wrapper{
display: none;
}
}
+ .searchBox{
+ height: auto;
+ padding: 10px 13px;
+ font-size: 14px;
+
+ #importCollection{
+ display: none;
+ }
+
+ label{
+ margin-bottom: 0;
+ }
+
+ md-icon.clickable{
+ cursor: pointer;
+ }
+
+ #importParameters{
+ display: none;
+ }
+
+ > button{
+ margin: 6px 0 0 0;
+ height: 30px;
+ min-width: 35px;
+ padding: 0;
+ }
+
+ md-menu{
+ margin: 0;
+ height: 30px;
+ min-width: 35px;
+ padding: 0;
+
+ > button{
+ min-width: 35px;
+ }
+ }
+
+
+ }
+
//loading panel
&__loading-container {
display: block;
// right panel
&__right-panel{
+ height: 100%;
+
+ .bottom-content{
+ height: calc(~'100% - 195px');
+ overflow-y: auto;
+ margin-top: 25px;
+
+ .codemirror-container{
+ height: 100%;
+ }
+ }
+
&__header{
margin-bottom: 30px;
}
}
+ md-progress-linear{
+ margin-top: -5px;
+ }
+
md-input-container{
margin: 0;
}
}
.input-identifier{
- max-width: 60px;
+ max-width: 80px;
border-color: @colorActive;
padding-left: 0;
}
}
.status-bar{
- min-height: 40px;
+ min-height: 60px;
.status-text{
span span{
}
}
+ &__req-data{
+
+ &__header{
+
+ h5{
+ padding-top: 10px;
+ }
+
+ button{
+ margin: 0;
+ margin-bottom: 2px;
+ min-width: 0!important;
+ width: 46px;
+
+ .material-icons{
+ margin-bottom: 6px;
+ vertical-align: bottom;
+ }
+
+ .bigger{
+ font-size: 25px;
+ }
+
+ .smaller{
+ font-size: 18px;
+ }
+
+ .additional{
+ margin-left: -15px;
+ vertical-align: top;
+ }
+ }
+
+ }
+
+ > div{
+ height: 100%;
+ padding-right: 2px;
+ padding-bottom: 10px;
+ position: relative;
+
+
+ > div:not(.ui-resizable-handle) {
+ height: calc(~'100% - 28px');
+ overflow-y: auto;
+ }
+
+ h5{
+ margin-top: 0;
+ }
+
+ &.half-size{
+ height: 50%;
+ }
+ }
+
+ .paramsBox{
+ position: absolute;
+ top: 50px;
+ right: 26px;
+ background-color: rgba(235, 235, 228, 0.62);
+ padding: 15px;
+ }
+
+ .CodeMirror { height: 100%; }
+
+ md-toast{
+ margin-top: 24px;
+ }
+ }
+
&__form{
+
+ .box-container.union{
+ padding: 0;
+ }
+
.union-tabs{
+ margin: 8px 0;
+
md-content{
min-width: 250px;
}
}
.md-menu.menu-container{
+ position: relative;
padding: 0;
+
+
.md-button{
- height: 22px;
- min-height: 22px;
+ margin: auto 0;
+ text-transform: none;
+ text-align: start;
+ height: 100%;
+ padding-left: 16px;
+ padding-right: 16px;
+ display: inline-block;
+ width: 100%;
&.md-icon-button{
padding: 0 8px;
}
+
}
+
+ .yang-menu-content{
+ box-shadow: 1px 1px 10px #888;
+ position: absolute;
+ left: 0;
+ z-index: 100;
+ background: #fff;
+ padding: 8px 0;
+
+ md-divider{
+ padding: 4px 0 4px 0;
+ }
+
+ .title{
+ color: #a9a9a9;
+ margin: 0 16px;
+
+ md-icon{
+ font-size: 18px;
+ }
+ }
+
+ .yang-menu-item{
+ min-height: 48px;
+ height: 48px;
+
+ md-icon{
+ margin: auto 16px auto 0;
+ }
+ }
+
+ }
+
+ .info-box{
+ position: absolute;
+ left: 100%;
+ top: 0;
+ margin-left: 10px;
+ min-width: 300px;
+ padding: 0;
+ z-index: 10;
+ background: #fff;
+ transition: all 150ms linear;
+ opacity: 1;
+ max-height: 300px;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ &__padding{
+ padding: 16px;
+ }
+
+ &.ng-hide{
+ opacity: 0;
+ }
+ }
+
}
.menu-placeholder{
}
p.top-element{
- margin: 0 10px 0 0;
- min-width: 80px;
+ margin: 5px 10px 0 0;
+ word-wrap: break-word;
+ width: 100px;
&.list-label{
color: @colorActive;
&__modules-list{
padding: 0;
background: @listBackColor;
+ height: calc(~"100% - 62px")!important;
+
+ h4{
+ margin: 0;
+ padding: 10px 20px;
+ }
&__item{
padding: 0!important;
background: @listActiveColor;
}
+ &.selected{
+ .title{
+ background-color: @colorActive!important;
+ color: #fff!important;
+ }
+ }
+
+ p.top-element{
+ padding: 6px 0;
+ }
+
md-icon{
margin: 12px 16px;
+
+ &.top-element{
+ margin: 0;
+ padding: 12px 16px;
+ width: 56px;
+ height: 48px;
+ }
}
&:hover{
}
}
}
-
- /*md-list-item{
-
- }*/
}
// datastore list
> div{
height: 100%;
+
+ > md-content{
+ overflow-y: hidden;
+ }
}
}
+
+ &__requests-list{
+ background: @listBackColor;
+ padding: 0;
+
+ .md-subheader{
+ background: none;
+
+ }
+
+ md-list{
+ padding-top: 0;
+ }
+
+ &__item-container{
+ position: relative;
+ }
+
+ &__group{
+
+ padding: 0!important;
+
+ &__item{
+
+ &.selected{
+ background-color: @colorActive;
+
+ .yangmanModule__requests-list__group__item__path{
+ color: #fff;
+ }
+
+ .yangmanModule__requests-list__group__item__method{
+ .GET, .PUT, .POST, .DELETE, .error{
+ color: #fff;
+ }
+ }
+ }
+
+ &__path{
+ white-space: -webkit-pre-wrap; /*Chrome & Safari */
+ word-break: break-all;
+ white-space: normal;
+ line-height: 18px;
+ color: @fontColor;
+ padding: 5px 0;
+
+ p{
+ padding: 0 9px;
+ }
+ }
+
+ &__method{
+
+ padding-left: 17px;
+ min-width: 70px;
+
+ .GET{
+ color: @reqMethodGet;
+ }
+ .PUT{
+ color: @reqMethodPut;
+ }
+ .POST{
+ color: @reqMethodPost;
+ }
+ .DELETE{
+ color: @reqMethodDelete;
+ }
+ .error{
+ color: @reqError;
+ }
+ }
+ }
+
+ &__itemMenu{
+ position: absolute;
+ top: 50%;
+ margin: -20px 0 0 0;
+ right: 5px;
+ padding: 0;
+
+ &.selected{
+ > button{
+ i.material-icons{
+ color: #fff;
+ }
+ }
+ }
+
+ > button{
+ min-width: 0;
+ margin: 2px 5px;
+
+ i.material-icons{
+ vertical-align: middle;
+ color: @fontColorLight;
+
+ }
+ }
+
+ }
+
+ &__collectionMenu{
+ position: relative;
+ margin-left: -52px;
+ margin-right: 6px;
+
+ > button{
+ min-width: 0;
+ margin: 2px 5px;
+
+ i.material-icons{
+ vertical-align: middle;
+ color: @fontColorLight;
+ }
+ }
+
+ }
+ }
+
+ &__collections-list{
+ padding: 0;
+ background: @listBackColor;
+ height: 100%;
+ }
+
+ &__collection{
+ padding: 0;
+ background: @listBackColor;
+
+ &__requests{
+ padding: 0;
+ border-top: 1px solid @dataStoreListBorderColor;
+ background: @listBackColor;
+ -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
+ box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
+ }
+
+ .md-subheader{
+ background: none;
+ }
+
+ .md-subheader-inner{
+ padding: 0;
+ }
+
+ .material-icons{
+ margin: 15px 25px;
+ }
+
+ &.expanded{
+ background: @listActiveColor;
+ }
+
+ p{
+ line-height: 18px;
+ padding: 12px 0;
+
+ .desc{
+ color: @fontColorLight;
+ }
+ }
+
+ }
+
+ }
+}
+.reqMenu{
+ button{
+ span{
+ color: @fontColor
+
+ }
+ i.material-icons{
+ vertical-align: middle;
+ margin-right: 5px;
+ margin-bottom: 5px;
+ }
+ }
+}
+
+
+.md-autocomplete-suggestions{
+ span{
+ color: @fontColor;
+ }
+}
+
+md-dialog{
+
+ .md-toolbar-tools{
+ button{
+ min-width: auto;
+ }
+ }
+
+ md-dialog-content, md-dialog-actions{
+ h2, span{
+ color: @fontColor;
+ }
+
+ }
+
}
// directives
}
}
}
-}
\ No newline at end of file
+}
+
+.paramsAdminDialog{
+
+ .md-dialog-content{
+
+ height: 400px;
+
+ button{
+ height: 30px;
+ min-width: 30px;
+ margin-top: 15px;
+ i{
+ vertical-align: middle;
+ }
+ }
+
+
+ }
+ &__searchBox{
+
+ height: 80px;
+
+ > button{
+ margin-top: 13px!important;
+ margin-right: 0px!important;
+ }
+
+ #importParameters{
+ display: none;
+ }
+
+ label{
+ md-icon{
+ color: @fontColor;
+ }
+ }
+
+ md-menu{
+ button{
+ margin-top: 5px!important;
+ }
+ }
+
+ input{
+ border: none;
+ height: auto;
+ outline: none;
+ }
+ }
+ &__paramsList{
+ width: 450px;
+ padding-top: 35px;
+
+ > div{
+ min-height: 60px;
+ margin-top: 10px;
+ }
+
+
+ }
+}
Code Review / dlux.git / blobdiff