@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;
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;
+ }
- .historyTabReqsSelected{
- height: calc(~'100% - 90px');
+ .box-container{
+ padding: 16px;
+ margin: 8px 0;
}
.historyTab{
- height: calc(~'100% - 45px');
+ height: calc(~'100% - 62px');
}
.collectionsTab{
- height: calc(~'100% - 45px');
+ height: calc(~'100% - 62px');
}
}
.highlight{
- color: @fontHighlight;
+ color: @darkBlueColor;
}
md-tabs-content-wrapper{
top: 0!important;
}
}
}
+
+
}
// 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-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;
cursor: pointer;
}
- input{
- background: none;
- border: none;
- color: @fontColor;
- outline: none;
+ #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
.bottom-content{
height: calc(~'100% - 195px');
overflow-y: auto;
+ margin-top: 25px;
.codemirror-container{
height: 100%;
}
}
+ md-progress-linear{
+ margin-top: -5px;
+ }
+
md-input-container{
margin: 0;
}
&__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;
position: relative;
- > div {
- height: calc(~'100% - 25px');
+ > div:not(.ui-resizable-handle) {
+ height: calc(~'100% - 28px');
overflow-y: auto;
}
.paramsBox{
position: absolute;
- top: 30px;
+ 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;
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;
+ }
}
}
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-right: 9px;
+ padding: 0 9px;
}
}
&__method{
padding-left: 17px;
+ min-width: 70px;
.GET{
color: @reqMethodGet;
}
&__itemMenu{
- position: relative;
- margin-left: -52px;
- padding-top: 0;
+ position: absolute;
+ top: 50%;
+ margin: -20px 0 0 0;
+ right: 5px;
+ padding: 0;
+
+ &.selected{
+ > button{
+ i.material-icons{
+ color: #fff;
+ }
+ }
+ }
> button{
min-width: 0;
}
}
-
- .selected{
- button{
- background-color: rgba(158,158,158,0.2);
- }
- }
-
}
&__collections-list{
padding: 0;
background: @listBackColor;
height: 100%;
-
- .selected{
- button{
- background-color: rgba(158,158,158,0.2);
- }
- }
}
&__collection{
margin: 15px 25px;
}
+ &.expanded{
+ background: @listActiveColor;
+ }
+
p{
line-height: 18px;
padding: 12px 0;
margin-right: 0px!important;
}
+ #importParameters{
+ display: none;
+ }
+
+ label{
+ md-icon{
+ color: @fontColor;
+ }
+ }
+
md-menu{
button{
margin-top: 5px!important;
Code Review / dlux.git / blobdiff