<!--Action - Add Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+ <div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">
text-decoration: none;
}
#board-paper svg{
- top: 70px;
+ top: 30px;
left: 0;
+ height: 95%;
}
.componentsList tspan{
/* width:30px !important; */
/*ACTIONS & COMPONENTS MENU*/
.input-search-controller{
height: 40px;
- padding-left: 42px;
- background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat;
+ padding-left: 36px;
+ background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat;
+ background-size: 4.5%;
border-radius: 0;
border: 0;
border-bottom: solid 1px #D7E7F9;
}
.input-search-controller::placeholder{
color: #D0D7E4;
- font-size: 11px;
+ font-size: 12px;
}
.input-search-controller:focus{
background-color: #fff !important;
font-size: 12px;
color: #C3CDDB;
}
-
+.controllerSidebar .joint-paper{
+ width: 98% !important;
+ height: 72vh !important;
+ margin: 0 !important;
+}
.actionBtns .btn{
margin: 0px 15px 16px -90px;
/* padding: 9px 20px; */
.new-action:hover{
margin: 9px 0 4px 3px;
padding: 6px;
- font-size: 12px;
+ font-size: 13px;
font-weight: bold;
color: #1B3E6F;
}
height: 65vh !important;
overflow-y: auto;
}
+.actionsList ul{
+ padding-left: 0;
+}
+.actionsList li{
+ list-style: none;
+}
.componentsList .list-group-item{
margin-bottom: 10px;
padding-left: 40px;
.add-attribute .btn:hover i::before{
color: #fff;
}
+.add-attribute .btn:focus{
+ box-shadow: none;
+}
.icon-function-attribute{
font-size: 18px;
}
font-size: 14px;
}
.attributesContainer label{
+ margin-bottom: 0;
color: #1B3E6F;
/* text-transform: uppercase; */
font-size: 12px;
font-weight: bold;
+ line-height: 32px;
}
.attributesContainer label.custom-control-label{
text-transform: unset;
border: 0;
}
.attributeOptions a:not(:first-child){
- margin-left: 18px;
+ margin-left: 14px;
}
.attributeOptions i{
color: #103D73 !important;
.joint-paper{
- width: 94% !important;
- height: 100vh !important;
- margin: 0 auto !important;
+ width: 96.4% !important;
+ height: 80vh !important;
+ margin: 60px auto 0 !important;
}
ul.templateLegend{
margin: 0;
font-size: 12px;
}
/*Modal*/
-.modal-backdrop{z-index: -1}
-.modal-holder.modal-backdrop{z-index: 100}
-.modal-holder + .modal-dialog {z-index: 1000}
+.modal{
+ top: 60px;
+}
+.modal-backdrop{
+ z-index: 0 !important;
+ opacity: 0 !important;
+}
+/* .modal-holder.modal-backdrop{z-index: 100}
+.modal-holder + .modal-dialog {z-index: 1000} */
.modal-dialog{
- max-width: 680px;
-}
\ No newline at end of file
+ max-width: 50%;
+}
+.modal-body{
+ font-size: 14px;
+}
+.createAttributeTabs .nav-link{
+ padding-top: 0 !important;
+}
+.createAttributeTabs .nav-item a,
+.createAttributeTabs .nav-item a.active{
+ border-radius: 0 !important;
+}
+.createAttributeTabs .nav-link{
+ text-transform: uppercase !important;
+ border-radius: 0 !important;
+ border: 0 !important;
+}
+.createAttributeTabs .nav-link.active{
+ border-radius: 0 !important;
+ border-bottom: solid 1px #1B3E6F !important;
+}
+.createAttributeTabs .nav-item{
+ margin-left: 50px;
+}
+.createAttributeTabs .tab-content{
+ margin-top: 20px;
+ padding: 20px 50px;
+ border: solid 1px #F4F9FE;
+}
+/*FORM*/
+.create-form .col-form-label{
+ color: #1B3E6F;
+ font-size: 12px;
+ font-weight: bold;
+}
+.create-form .col-form-label span{
+ color: #FF6469;
+}
+.create-form .form-control{
+ margin-bottom: 9px;
+ padding-left: 0;
+ padding-right: 0;
+ border-radius: 0;
+ border: 0;
+ border-bottom: solid 1px #EFEFF4;
+ font-size: 13px;
+ box-shadow: none !important;
+ color: #1B3E6F;
+}
+.create-form .form-control::placeholder{
+ color: #C3CDDB;
+}
+.create-form .form-control:focus{
+ border-bottom-color: #1B3E6F;
+ -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+ -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+ box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+ background-color: transparent !important;
+ text-shadow: none;
+}
+.list-group-item{
+ margin-bottom: 9px;
+ padding: 9px 1.25rem;
+ border-color: #E6EDF5;
+ font-size: 11px;
+ color: #1B3E6F;
+ font-weight: bold;
+ text-align: center;
+}
+.list-group-item.active{
+ color: #1B3E6F;
+ background-color: #C3CDDB;
+ border-color: #C3CDDB;
+}
+.list-group-horizontal .list-group-item + .list-group-item{
+ border-left-width: 1px;
+}
+.create-form .custom-control-input:checked ~ .custom-control-label{
+ background-color: transparent !important;
+ color: #1B3E6F;
+}
<i class="fa fa-angle-right ml-2 mr-2"></i>
<li class="breadcrumb-item">
<a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
- <button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
+ <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
+ data-target="#exampleModalLong" data-tooltip="Package Details">
<i class="icon-info" aria-hidden="true"></i>
</button>
</li>
}
}
-const rectWidth = 616;
-const rectHeight = 381;
+const rectWidth = '100%';
+const rectHeight = '100%';
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
<g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)">
<g id="workflow-container" transform="translate(401.000000, 137.000000)">
<g id="Card">
- <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use>
- <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use>
- </g>
- <g id="name">
- <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87,
- 0.8954305 87,2 L87,30 L87,30 L0,30 L0,
- 2 C-1.3527075e-16,0.8954305 0.8954305,
- 2.02906125e-16 2,0 Z" id="Rectangle"
- fill="#C3CDDB"></path>
- <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F">
- <tspan id="label" x="20" y="20">Action 1</tspan>
- </text>
+ <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use>
+ <use fill-rule="evenodd" xlink:href="#custom-action"></use>
</g>
</g>
</g>
<g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)">
<g id="execute" transform="translate(304.000000, 0.000000)">
<g id="Group" transform="translate(7.000000, 0.000000)">
- <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect>
- <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF">
- <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero">
+ <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="280" height="150" rx="3"></rect>
+ <g id="Group-4" transform="translate(20.000000, 25.000000)" fill="#FFFFFF">
+ <g id="database0-copy" transform="translate(115.000000, 5.000000)" fill-rule="nonzero">
<path d="M35.544,6.00705882 C34.7265882,
2.97882353 28.6425882,0 18,0 C7.35741176,
0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882,
font-family="HelveticaNeue-Bold, Helvetica Neue"
font-size="13"
font-weight="bold" line-spacing="18">
- <tspan id="label" x="64" y="18">execute</tspan>
- <tspan id="type" x="64" y="40"
+ <tspan id="label" x="20" y="70">execute</tspan>
+ <tspan id="type" x="30" y="92"
font-family="HelveticaNeue, Helvetica Neue" font-size="12"
font-weight="normal"></tspan>
</text>
}
const rectWidth = 260;
-const rectHeight = 60;
+const rectHeight = 50;
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', {
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="7.1-Designer" transform="translate(-14.000000, -618.000000)">
- <g id="controller" transform="translate(0.000000, 60.000000)">
+ <g id="controller" transform="translate(0.000000, 70.000000)">
<g id="functions" transform="translate(0.000000, 479.000000)">
<g id="list" transform="translate(8.000000, 51.000000)">
<g id="1" transform="translate(12.000000, 32.000000)">
<app-packages-header></app-packages-header>
<div class="container-fluid body-container">
<!--Tour Starter-->
+ <div>
<input id="clicker" [checked]="startTour" type="checkbox" />
<label class="ml-1" for="clicker">Start the tour</label>
-
+ </div>
<div class="panel-wrap packageWizard">
<div class="panel">
<button id="clicker1" class="close" type="button" (click)="stopTour()">
.packages-card [data-tooltip]:after {
padding: 9px;
font-size: 11px;
- background: #fff;
+ background: #C3CDDB;
border: solid 1px #E6EDF5;
box-shadow: 0 0 12 rgba(0,0,0,0.8);
border-radius: 3px;
[data-tooltip]:after {
z-index: 1000;
padding: 8px 20px !important;
- width: auto;
- background-color: #fff !important;
+ width: max-content;
+ background-color: #C3CDDB !important;
color: #1B3E6F;
content: attr(data-tooltip);
font-size: 12px;
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
- border-left-color: #fff;
+ border-left-color: #C3CDDB;
/* border-left-color: hsla(0, 0%, 20%, 0.9); */
}
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
- border-bottom-color: #DEE8F3;
- border-bottom-color: rgba(222, 232, 243, 1.0);
+ border-bottom-color: #C3CDDB;
+ border-bottom-color: rgba(195, 205, 219, 1.0);
}
.tooltip-bottom:hover:before,
margin-bottom: 0;
margin-left: -12px;
border-top-color: transparent;
- border-right-color: #fff;
+ border-right-color: #C3CDDB;
/* border-right-color: hsla(0, 0%, 20%, 0.9); */
}
width: 100% !important;
}
.tooltip .tooltip-inner{
- width: auto !important;
- max-width: 280px !important;
+ width: max-content !important;
text-align: left!important;
/* color:#1B3E6F;
background-color: #fff !important; */
border-radius: 20px !important;
}
.btn-primary{
- background-color: #1273EB !important;
- border-color: #1273EB !important;
+ background-color: #1273EB !important;
+ border-color: #1273EB !important;
}
.btn-primary:hover {
background-color: #0069d9 !important;