+/*PLUGINS importing*/\r
+@import '../src/app/yangui/assets/js/codemirror/lib/codemirror.css';\r
+@import '../src/app/yangui/assets/js/codemirror/theme/eclipse.css';\r
+@import '../src/app/yangui/assets/js/codemirror/theme/eclipse-disabled.css';\r
+@import '../src/app/yangui/assets/js/codemirror/addon/hint/show-hint.css';\r
+/*PLUGINS importing END*/\r
+\r
+@iconsNewRootPath : '../src/app/yangui/assets/images/';\r
+\r
+/******** WINDOW SCROLLBARS *****/\r
+::-webkit-scrollbar {\r
+ width: 13px;\r
+ height: 13px;\r
+}\r
+\r
+::-webkit-scrollbar-corner {\r
+ background: #000;\r
+}\r
+\r
+::-webkit-scrollbar-corner:window-inactive {\r
+ background: #fff;\r
+}\r
+\r
+::-webkit-scrollbar-track-piece:disabled {\r
+ display: none !important;\r
+}\r
+\r
+::-webkit-scrollbar-button:disabled {\r
+ display: none !important;\r
+}\r
+\r
+::-webkit-scrollbar-track:disabled {\r
+ margin: 6px;\r
+}\r
+\r
+/* Horizontal Scrollbar Styles */\r
+\r
+::-webkit-scrollbar:horizontal {\r
+ background: #b3b2b3;\r
+}\r
+\r
+::-webkit-scrollbar-thumb:horizontal {\r
+ background: #807f80;\r
+ min-width: 20px;\r
+}\r
+\r
+/* Vertical Scrollbar Styles */\r
+\r
+::-webkit-scrollbar:vertical {\r
+ background: #b3b2b3;\r
+}\r
+\r
+\r
+::-webkit-scrollbar-thumb:vertical {\r
+ background: #807f80;\r
+ min-height: 20px;\r
+}\r
+/******** WINDOW SCROLLBARS END *****/\r
+\r
.simpleContainer {\r
border: 1px solid #7a7a7a;\r
margin: 5px;\r
- padding: 5px;\r
- z-index: 10;\r
+ padding: 10px;\r
+ z-index: 11;\r
width:auto;\r
position: relative;\r
\r
&.treeContainer{\r
height: 450px;\r
- margin-top: 0px;\r
position: relative;\r
- z-index: 11;\r
}\r
}\r
\r
-.overflow-visible{\r
- overflow: visible;\r
-}\r
-\r
/*.previewContainer {\r
border: 2px solid #7a7a7a;\r
margin: 5px;\r
\r
\r
/* --------------------------------------------------------------------------------- YANG UI */\r
-.yangUIwrapper {\r
+.yangUIwrapper{\r
+\r
+ ::-webkit-scrollbar {\r
+ width: 10px;\r
+ height: 10px;\r
+ }\r
\r
- .alert {\r
+ .alert{\r
+ .roundedCorners(0px);\r
\r
- .close {\r
- span {\r
+ .close{\r
+ span{\r
color: @text-color;\r
}\r
}\r
}\r
\r
-}\r
-\r
-.form-control {\r
- &.inline {\r
- width: 100px;\r
- display: inline;\r
+ .btn, .form-control{\r
+ .roundedCorners(3px);\r
}\r
-}\r
\r
-.btn-primary{\r
- border: none;\r
- font-weight: bold;\r
- background: #ebecec;\r
- .transition(100ms);\r
- color: buttontext;\r
+ input[type=text].form-control{\r
+ .roundedCorners(0px);\r
+ }\r
\r
- &:hover{\r
+ .btn-orange{\r
background: orange;\r
- color: buttontext;\r
+ color: #fff;\r
+ font-weight: bold;\r
}\r
\r
- &.btn-selected{\r
- background: #ffa500;\r
+ button.btn-like-tab{\r
+ //line-height: 1em;\r
+ outline: 0 none;\r
+ //height: 30px;\r
+ margin: 0;\r
+ border: none;\r
+ font-weight: bold;\r
+ background: transparent;\r
+ .transition(100ms);\r
+ color: #fff;\r
+ margin-bottom: 2px;\r
+ padding-top: 0;\r
+\r
+ &:hover, &.active, &.btn-selected{\r
+ border-bottom: 2px solid orange;\r
+ margin-bottom: 0px;\r
+ }\r
+\r
}\r
\r
- &.disabled, &[disabled] {\r
- background: #ebecec;\r
- cursor: not-allowed;\r
- pointer-events: none;\r
- opacity: 0.65;\r
- filter: alpha(opacity=65);\r
- -webkit-box-shadow: none;\r
- box-shadow: none;\r
+ li.btn-like-tab{\r
+ line-height: 1em;\r
+ outline: 0 none;\r
+ margin: 0;\r
+ border: none;\r
+ font-weight: bold;\r
+ .transition(100ms);\r
+ color: buttontext;\r
+ background: transparent;\r
+\r
+ &.btn-selected, &:hover{\r
+ border-bottom: 2px solid orange;\r
+ }\r
+ }\r
+\r
+ .form-control {\r
+ &.inline {\r
+ width: 100px;\r
+ display: inline;\r
+ }\r
}\r
\r
- &:focus { \r
+ .btn-primary{\r
+ font-weight: bold;\r
+ background: #fff;\r
+ .roundedCorners(0px);\r
+ .transition(100ms);\r
+ color: buttontext;\r
+ border-bottom: 3px solid orange;\r
+ border-width: 0 0 3px 0;\r
+\r
+ &:hover{\r
+ background: orange;\r
+ color: #fff;\r
+ }\r
+\r
+ &.btn-selected{\r
+ background: #ffa500;\r
+ }\r
+\r
+ &.disabled, &[disabled] {\r
+ background: #ebecec;\r
+ cursor: not-allowed;\r
+ pointer-events: none;\r
+ opacity: 0.65;\r
+ filter: alpha(opacity=65);\r
+ -webkit-box-shadow: none;\r
+ box-shadow: none;\r
+ }\r
+\r
+ &:focus {\r
background: #ebecec;\r
color: buttontext;\r
+ }\r
}\r
}\r
\r
+\r
+\r
.leaflist{\r
.leafListValue{\r
margin-top: 5px;\r
}\r
\r
.mainTabsWrapper{\r
+\r
+ .simpleContainer{\r
+ margin: 5px 0;\r
+\r
+ &.treeContainer{\r
+ margin-top: 0;\r
+ }\r
+ }\r
+\r
.nav-tabs{\r
border-bottom: 0;\r
margin: 0 5px;\r
\r
.treeWrapper{\r
height: calc(~"100% - 20px");\r
+ margin: 10px 0;\r
+\r
.treeList{\r
margin: 10px 0;\r
height: calc(~"100% - 40px");\r
- overflow-y: scroll;\r
- position: relative;\r
+ overflow-y: auto;\r
}\r
}\r
\r
.actionBtnApiPathWrapper{\r
- &.is-sticky{\r
- width: 100%;\r
- .boxSizing;\r
- padding: 0 20px 0 270px;\r
- right: 0;\r
- z-index: 100;\r
- margin: 0;\r
- border: 0;\r
- div.in{\r
- border: 1px solid #7a7a7a;\r
- -webkit-border-radius: 0 0 5px 5px;\r
- border-radius: 0 0 5px 5px;\r
- background: #414042;\r
- padding-left: 15px;\r
- }\r
- }\r
-\r
- div.in{\r
- padding: 10px;\r
- }\r
\r
- .actionButtons{\r
- white-space: nowrap;\r
- overflow-x: scroll;\r
- max-width: 100%;\r
- padding-bottom: 10px;\r
+ &.simpleContainer{\r
+ margin: 5px 0;\r
}\r
-}\r
\r
-.selSubApiPath{\r
- \r
- // .inlineBlock;\r
- display: inline;\r
+ &.is-sticky{\r
+ width: 100%;\r
+ .boxSizing;\r
+ padding: 0 20px 0 270px;\r
+ right: 0;\r
+ z-index: 100;\r
+ margin: 0;\r
+ border: 0;\r
+\r
+ div.in{\r
+ border: 1px solid #7a7a7a;\r
+ background: #414042;\r
+ padding-left: 15px;\r
+ padding-top: 10px;\r
+ }\r
+ }\r
\r
- input[type="text"]{\r
- width: 150px;\r
- display: inline!important;\r
- margin-left: 5px;\r
- height: 26px;\r
- }\r
- \r
}\r
\r
label.classic{\r
min-width: 120px;\r
}\r
\r
-.actionButtons{\r
+.actionButtons, .api{\r
+ white-space: nowrap;\r
+ overflow-x: auto;\r
+ max-width: 100%;\r
+ //padding-bottom: 10px;\r
+ height: 50px;\r
\r
+ input[type="text"]{\r
+ width: 150px;\r
+ display: inline!important;\r
+ margin: 0 5px;\r
+ height: 34px;\r
+ .roundedCorners(0px);\r
+ border: 0;\r
+ }\r
\r
label.classic{\r
min-width: 90px;\r
}\r
\r
- select.input-sm{\r
- height: 26px;\r
+ span.input-sm{\r
line-height: 34px;\r
- vertical-align: top;\r
+ .inlineBlock;\r
+ padding: 0 10px;\r
}\r
\r
- // button{\r
- // margin-top: 3px;\r
- // }\r
+ .input-sm{\r
+ height: 34px;\r
+ display: inline;\r
+ line-height: 34px;\r
+ background: @text-color;\r
+ color: #fff;\r
+ border: 0;\r
+ width: 100px;\r
+ -webkit-border-radius: 3px 0 0 3px;\r
+ border-radius: 3px 0 0 3px;\r
+ }\r
+\r
+ .btn{\r
+ display: inline;\r
+ }\r
+\r
+ .pathWrapper{\r
+ //display: inline;\r
+ .inlineBlock;\r
+ background: #58595B;\r
+ padding: 0 5px;\r
+ margin-right: 5px;\r
+ height: 34px;\r
+ -webkit-border-radius: 0px 3px 3px 0px;\r
+ border-radius: 0px 3px 3px 0px;\r
+\r
+ input[type=text]{\r
+ border: 2px solid #ebecec;\r
+ }\r
+\r
+ .pathElem{\r
+ line-height: 33px;\r
+ }\r
+ }\r
\r
div.in{\r
padding: 0 10px;\r
}\r
}\r
\r
+//.api{\r
+// .input-sm{\r
+// padding-top: 0;\r
+// padding-bottom: 0;\r
+// font-weight: bold;\r
+// width: auto;\r
+// }\r
+//}\r
+\r
.dataPopupWrapper{\r
position: relative;\r
.dataPopup{\r
left: 50%;\r
margin-left: -225px;\r
margin-top: -127px;\r
- z-index: 1;\r
+ z-index: 5;\r
}\r
\r
div.requestActions{\r
}\r
\r
.scroll{\r
- overflow-y: scroll;\r
+ overflow-y: auto;\r
+ position: relative;\r
height: calc(~"100% - 50px"); \r
}\r
\r
\r
.trdiv{\r
border-top: 2px solid #dddddd;\r
+\r
+ &:first-child{\r
+ border-top: 0;\r
+ }\r
+\r
&.no-border{\r
border: 0;\r
}\r
&.pre-div{\r
position: relative;\r
border: 0;\r
- margin-bottom: 20px;\r
+ margin: 10px 0 20px;\r
padding: 0px 10px;\r
+\r
button.close{\r
color: #000;\r
right: 30px;\r
top: 10px;\r
+ z-index: 3;\r
+ width: 15px;\r
+ height: 15px;\r
+ background: transparent url('@{iconsNewRootPath}icon-close-small.png') no-repeat center center;\r
+ .opacityDeph(1);\r
+\r
+ &:before{\r
+ content: "";\r
+ }\r
+\r
+ &:hover{\r
+ background-position: center center!important;\r
+ .opacityDeph(1);\r
+ }\r
}\r
+\r
button.white-cross{\r
color: #fff;\r
}\r
\r
- .api{\r
- padding: 10px;\r
-\r
- input[type=text]{\r
- width: 100px;\r
- .inlineBlock;\r
- margin-left: 5px;\r
- vertical-align: middle;\r
- }\r
- }\r
-\r
.textareaWrapper{\r
position: relative;\r
+ border: 1px solid silver;\r
+\r
+ span{\r
+ color: auto;\r
+ }\r
\r
- textarea{\r
- width: 100%;\r
- min-height: 50px;\r
- overflow-y: scroll;\r
- height: 200px;\r
- max-width: 100%;\r
+ pre span{\r
+ color: auto;\r
+ }\r
+ \r
+ \r
+ textarea{\r
+ width: 100%;\r
+ min-height: 50px;\r
+ overflow-y: scroll;\r
+ height: 200px;\r
+ max-width: 100%;\r
+ }\r
+\r
+ .paramsBox{\r
+ position: absolute;\r
+ right: 55px;\r
+ top: 12px;\r
+\r
+ z-index: 4;\r
+ color: @text-color;\r
+\r
+ .line{\r
+ color: @text-color;\r
+ padding: 4px 30px 4px 20px;\r
+ background: #cdcdce;\r
+ margin-bottom: 1px;\r
+ font-size: 12px;\r
+ }\r
+ \r
+ span{\r
+ color: @text-color;\r
+ }\r
+\r
+ }\r
}\r
}\r
}\r
- }\r
\r
.rh-col1{\r
width: 27px;\r
overflow: hidden;\r
background: #393939;\r
border: 1px solid #7a7a7a;\r
- .roundedCorners(5px);\r
padding: 20px;\r
z-index: 15;\r
button.close{\r
/* --------------------------------------------------------------------------------- YANG UI TYPE UNION */\r
.unionType.tabs{\r
margin: 10px 0;\r
+\r
.nav-tabs{\r
border: 0;\r
+\r
li{\r
- margin: 0 2px;\r
- background-color: #ebecec!important;\r
- border: 0;\r
- &.btn-selected{\r
- background: orange!important;\r
- }\r
- &.btn-selected a{\r
- background: orange!important;\r
- }\r
- &:hover{\r
- background: orange!important;\r
- }\r
- &:hover a{\r
- background: orange!important;\r
- }\r
+ margin-right: 2px;\r
+\r
a{\r
- background-color: #ebecec!important;\r
- .roundedCorners(4px);\r
border: 0;\r
- padding-top: 2px;\r
- span{\r
- color: #000!important;\r
+ }\r
+\r
+ &.btn-selected, &:hover{\r
+\r
+ a{\r
+ background: transparent;\r
}\r
}\r
}\r
}\r
+\r
div.tab-content{\r
- border: 2px solid #ebecec;\r
- .boxSizing;\r
- padding: 22px 10px 10px;\r
- margin-top: -12px;\r
+ margin: 0;\r
}\r
}\r
/* --------------------------------------------------------------------------------- YANG UI TYPE UNION - END */\r
}\r
}\r
\r
-button.btn-like-tab{\r
- line-height: 1em;\r
- outline: 0 none;\r
- height: 26px;\r
- margin: 0;\r
- border: none;\r
- font-weight: bold;\r
- background: #ebecec;\r
- .transition(100ms);\r
- color: buttontext;\r
-\r
- &:hover{\r
- background: orange;\r
- color: buttontext;\r
- }\r
-\r
- &.active {\r
- background: orange;\r
- }\r
\r
- &.btn-selected{\r
- background: #ffa500;\r
- }\r
-}\r
-\r
-li.btn-like-tab{\r
- line-height: 1em;\r
- outline: 0 none;\r
- // height: 26px;\r
- margin: 0;\r
- border: none;\r
- font-weight: bold;\r
- .transition(100ms);\r
- color: buttontext;\r
- border-radius: 4px;\r
-\r
- &:hover{\r
- background-color: orange;\r
- color: buttontext;\r
- }\r
-\r
- &.active {\r
- /*background: orange;*/\r
- }\r
-\r
- &.btn-selected{\r
- /*background: #ffa500;*/\r
- background-color: transparent;\r
- border: 1px solid #fff;\r
- border-bottom: 0;\r
- }\r
-}\r
\r
.ui-resizable-handle {\r
&.ui-resizable-se{\r
Code Review / dlux.git / blobdiff