.ds-container { height: 100%; position: relative; margin-left: 90px; } .ds-container .wizard-container { height: 100%; } /* Left Side (Step Description) */ .ds-container .wizardStepsDescription { width: 320px; background-color: #ffffff; border-right: solid 1px #dcdcdc; height: 100%; position: relative; } /*Animation using ng-animate*/ .ds-container .wizardStepsDescription.ng-hide-add, .wizardStepsDescription.ng-hide-remove { transition: left 0.4s ease-out; } .ds-container .wizardStepsDescription.ng-hide-add { left: 0; z-index: 0; } .ds-container .wizardStepsDescription.ng-hide-add.ng-hide-add-active { left: -350px; z-index: -1; } .ds-container .wizardStepsDescription.ng-hide-remove { left: -350px; z-index: -1; } .ds-container .wizardStepsDescription.ng-hide-remove.ng-hide-remove-active { left: 0; z-index: -1; } .ds-container .wizardStepsDescriptionContainer { overflow: auto; height: calc( 100% - 70px ); } .ds-container .wizardStepsDescription .closeIconContainer { width: 100%; margin-top: 20px; height: 10px; } .ds-container .wizardStepsDescription .closeIconContainer:hover .closeIcon { background-image: url('../../images/shared/close-hovered.png'); } .ds-container .wizardStepsDescription .closeIcon { height: 10px; margin-right: 20px; cursor: pointer; background-image: url('../../images/shared/close.png'); height: 10px; width: 10px; } .ds-container .wizardStepsDescription .step { /* Bottom padding is also needed, because blur shouldn't overlap the last line */ padding: 0 30px 5px 30px; color: #4a4a4a; } .ds-container .wizardStepsDescription .importIconContainer { text-align: center; margin-bottom: 40px; } .ds-container .wizardStepsDescription .itemTitle { margin-top: 20px; margin-bottom: 10px; font-family: GlowSemibold; font-size: 14px; } .ds-container .wizardStepsDescription .itemTitle.mainTitle { font-size: 16px; } .ds-container .wizardStepsDescription .itemDescription { font-family: GlowRegular; font-size: 14px; } .ds-container .wizardStepsDescription .itemDescription .blueText { color: #4659bf; display: inline-block; } .ds-container .wizardStepsDescription .itemDescription .ui-btn-link { font-size: 14px; } .ds-container .wizardStepsDescription .stepTopBlur { position: absolute; height: 12px; width: 100%; top: 30px; pointer-events: none; /* Go from completely solid white on the top to completely transparent on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); } .ds-container .wizardStepsDescription .stepBottomBlur { position: absolute; height: 12px; width: 100%; bottom: 40px; pointer-events: none; /* Go from completely transparent on the top to completely solid white on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%); } .ds-container .wizardStepsDescription .stepNumber { bottom: 20px; text-align: center; width: 100%; position: absolute; font-family: GlowRegular; font-size: 12px; color: #b6b6b6; text-transform: uppercase; } /*Right Side*/ .ds-container .wizardSteps { height: 100%; overflow: hidden; } .ds-container .wizardSteps .stepsContentContainer { float: left; margin: 10px 33px 20px 73px; } .ds-container .wizardSteps .stepsContentContainer .stepContent { position: relative; width: 360px; min-height: 60px; max-height: 600px; margin-top: 10px; padding: 20px 30px; margin-left: 7px; margin-right: 7px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); transition: all 0.2s ease-in-out; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect { width: 100%; position: relative; cursor: pointer; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect input { border: none; border-bottom: 1px solid #efefef; padding-left: 10px; font-family: GlowSemiBold; font-size: 14px; color: #4a4a4a; outline: none; box-shadow: none; position: relative; padding: 8px 20px 3px 10px; cursor: pointer; border-radius: 0; } /*hide 'clear button' in IE10+ on the edge of input*/ .ds-container .wizardSteps .stepsContentContainer .stepContent input::-ms-clear { display: none; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect input:focus { border-radius: 0; border-bottom: 1px solid #5774e7; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 14px; font-family: GlowRegular; font-size: 14px; color: #b6b6b6; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect input::-moz-placeholder { /* Firefox 19+ */ font-size: 14px; font-family: GlowRegular; font-size: 14px; color: #b6b6b6; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect input:-ms-input-placeholder { /* IE 10+ */ font-size: 14px; font-family: GlowRegular; font-size: 14px; color: #b6b6b6; } .ds-container .wizardSteps .stepsContentContainer .stepContent .dropdown-multiselect input:-moz-placeholder { /* Firefox 18- */ font-size: 14px; font-family: GlowRegular; font-size: 14px; color: #b6b6b6; } .ds-container .wizardSteps .stepsContentContainer .stepContent.collapsed.availableForExpand { height: 110px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.collapsed.availableForExpand:hover { /* +5px for each: top, bottom */ height: 120px; /* -5px for top */ margin-top: 5px; /* +5px for each: top, bottom;*/ padding-top: 25px; padding-bottom: 25px; /*+6px for each: left side, right side *!*/ padding-left: 37px; padding-right: 37px; /*!* +7px for each: left side, right side *!*/ width: 374px; /*!* -7px for left side *!*/ margin-left: 0; /*!* -7px for right side *!*/ margin-right: 0; /*border: solid 1px #5774e7;*/ box-shadow: 0 0 4px 0 blue; cursor: pointer; } /* Styles for the step block below the hovered-collapsed one */ .ds-container .wizardSteps .stepsContentContainer .stepContent.collapsed.availableForExpand:hover + .stepContent { /* -5px for top */ margin-top: 5px; } .ds-container .wizardSteps .stepContent .buttonContainer { height: 38px; margin-top: 30px; } .ds-container .wizardSteps .stepContent .buttonContainer .diwWithSpinner { right: 90px; bottom: 30px; position: absolute; } .ds-container .wizardSteps .stepContent .buttonContainer .ui-btn-light { width: 140px; } .ds-container .wizardSteps .stepsContentContainer .stepContent .stepHeader { font-size: 14px; font-family: GlowSemiBold; color: #4a4a4a; } .ds-container .wizardSteps .stepsContentContainer .stepContent .stepHeader .ui-btn-link { display: inline-block; margin-top: 12px; } .ds-container .wizardSteps .stepsContentContainer .stepContent .stepHeader .stepNumber { width: 22px; height: 22px; border: solid 2px #b6b6b6; border-radius: 100%; display: inline-block; text-align: center; line-height: 18px; } .ds-container .wizardSteps .stepsContentContainer .stepContent .stepHeader .stepTitle { display: inline-block; padding-left: 3px; } .ds-container .wizardSteps .stepsContentContainer .stepContent .stepHeader.active { font-size: 16px; line-height: 34px; } .ds-container .wizardSteps .stepsContentContainer .stepContent .stepHeader.active .stepNumber { width: 34px; height: 34px; border: solid 2px #5774e7; line-height: 31px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.connectionStep { max-height: 420px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.connectionStep .itemTitle.disabled, .ds-container .wizardSteps .stepsContentContainer .stepContent.connectionStep .ui-input[disabled] { opacity: 0.4; } .ds-container .wizardSteps .stepsContentContainer .stepContent.connectionStep .ui-input[disabled] { background-color: white; } .ds-container .wizardSteps .stepsContentContainer .stepContent .minimizedStep1 { max-height: 50px; } /* Projects and Scope specific styles, START */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .topBlur { position: absolute; height: 12px; width: 100%; pointer-events: none; /* Go from completely solid white on the top to completely transparent on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .topBlur.projectsAndScopeSection { top: 54px; left: 0; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .bottomBlur { position: absolute; height: 12px; width: 100%; pointer-events: none; /* Go from completely transparent on the top to completely solid white on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%); } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .bottomBlur.projectsAndScopeSection { bottom: 20px; left: 0; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .topBlur.fieldsMappingMaximizedContainer { top: 22px; left: 0; z-index: 100; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .bottomBlur.fieldsMappingMaximizedContainer { bottom: 20px; left: 0; } /* Override padding, because this step has child, which should be wider than generic styles allow with set paddings. */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep { padding-left: 20px; padding-right: 20px; /* Override generic max-height, because this section can be higher without going out of bounds */ max-height: none; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep.collapsed.availableForExpand:hover { padding-left: 27px; padding-right: 27px; } /* The width is set to get rid of slightly corrupted markup during the expand of "Projects and Scope" section */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .projectsAndScopeStepContent { width: 320px; } /* Because we've overriden padding styles, now we have to move all child containers 10px to the right. */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .stepHeader { position: relative; padding-left: 10px; /* This style is necessary, so that top blur doesn't overlap header when animation is decreasing the height of container */ z-index: 100; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .collapsedInfoContainer { padding-left: 10px; } /* If Jira Scopes dropdown value or Project Field Mapping dropdown value wasn't selected, show empty container */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep.collapsed.empty.availableForExpand { height: 60px; } /* Override hover height for empty section, it should not be 120px, but 70px in this case*/ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep.collapsed.empty.availableForExpand:hover { height: 70px; } /* Individual collapsed info: dropdown label, dropdown value */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .collapsedInfoContainer .collapsedInfoLabelContainer { font-family: GlowRegular; font-size: 12px; margin-top: 6px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .collapsedInfoContainer .collapsedInfoLabelContainer:first-child { margin-top: 8px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .collapsedInfoContainer .collapsedInfoLabelContainer .collapsedInfoLabel { float: left; color: #808080; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .collapsedInfoContainer .collapsedInfoLabelContainer .collapsedInfoValue { padding-left: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a4a4a; } /* Jira scope label and dropdown styles */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .jiraScopeLabel { margin-top: 24px; margin-left: 19px; } /* Override standard dropdown styles */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .jiraScopeDropdown input { width: 300px; padding-right: 40px; border-radius: 0; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .jiraScopeDropdown .clearSearch { top: 11px; } /* Project field mapping label and dropdown styles */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .projectFieldMappingLabel { margin-top: 22px; margin-left: 19px; } /* Auto-import styles */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection { position: relative; width: 330px; /* The height is set to get rid of slightly corrupted markup during the expand of "Projects and Scope" section */ height: 95px; margin-left: -10px; margin-top: 12px; border-radius: 4px; background-color: #FBFBFB; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection .autoImportHeader { font-family: GlowSemibold; font-size: 14px; color: #4a4a4a; padding-top: 10px; padding-left: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection .autoImportProjectsCheckbox { float: left; margin-top: 11px; margin-left: 20px; margin-right: 6px; display: inline-block; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection .autoImportProjectsLabel { /* overflow: auto makes this div element start after the float left element and not go behind that float left element to the left-most side */ overflow: auto; margin-top: 9px; margin-left: -2px; position: relative; display: inline-block; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection .autoImportCriterionsList { padding-bottom: 8px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection .autoImportCriterionsList .autoImportCriterion:first-child { margin-top: 3px !important; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .autoImportSection .autoImportCriterionsList .autoImportCriterion { margin-left: 42px; font-size: 12px; color: #808080; } /* Fields Mappings styles */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingHeaderContainer { margin-top: 10px; margin-left: 10px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingHeaderContainer .subHeader.fieldsMapping { float: left; font-family: GlowSemibold; font-size: 16px; color: #4a4a4a; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingHeaderContainer .expandButton { float: left; margin-left: 11px; margin-top: 7px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingSection { clear: both; position: relative; padding-top: 4px; margin-left: 10px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingSection .area { } /* Individual field mapping item container */ .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingSection .fieldMappingContainer { font-family: GlowRegular; font-size: 12px; margin-top: 6px; height: 17px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingSection .fieldMappingContainer .fieldMappingEpicflow { float: left; color: #808080; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingSection .fieldMappingContainer .fieldMappingJira { padding-left: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a4a4a; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingHeaderContainer.maximized { position: relative; margin-top: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer { clear: both; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer { margin-top: 10px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingAreaHeader { font-family: GlowSemibold; font-size: 14px; color: #808080; margin-left: 10px; padding-top: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer { } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingLabel { font-family: GlowRegular; font-size: 12px; color: #36393e; margin-left: 19px; margin-top: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingCheckbox { font-family: GlowRegular; font-size: 14px; color: #4a4a4a; margin-top: 10px; padding-left: 10px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingCheckbox .ui-checkbox { vertical-align: middle; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingDatePicker { } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingDatePicker .fieldMappingLabel { margin-top: 10px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingDatePicker .datePickerContainer { width: 111px; margin-top: 5px; margin-left: 12px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingDatePicker .datepickerLabel { margin-left: 11px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .fieldsMappingMaximizedContainer .fieldMappingAreaContainer .fieldMappingInfoContainer .fieldMappingDatePicker .datePickerContainer .datepicker { width: 100%; height: 28px; border-radius: 4px; border: solid 1px #dcdcdc; outline: none; font-family: GlowRegular; font-size: 13px; color: #4a4a4a; background: #ffffff url(../../images/shared/small-calendar.png) no-repeat right 10px center; padding: 0 30px 0 10px; cursor: pointer; margin-top: 2px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.projectsAndScopeStep .buttonContainer { margin-right: 10px; margin-bottom: 7px; } /* Projects and Scope specific styles, END */ /* Groups and Users specific styles */ .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep { padding-left: 0; padding-right: 0; /* Override generic max-height, because this section can be higher without going out of bounds */ max-height: none; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep.collapsed.availableForExpand:hover { padding-left: 7px; padding-right: 7px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep.availableForExpand.collapsed.empty { height: 60px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep.availableForExpand.collapsed.empty:hover { height: 70px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .stepHeader { margin-left: 30px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .itemTitle { margin-top: 8px; margin-bottom: 5px; margin-left: 30px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .stepHeader .resetButton { margin-right: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .stepHeader.active { margin-bottom: 24px; margin-left: 30px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .step3CollapsedScrollableArea { height: 50px; margin-left: 30px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .optionsGroup { display: inline-block; margin-right: 0; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .optionsGroup:first-child { margin-right: 19px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent { position: relative; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .optionsGroup_wrapper { margin-left: 30px; margin-bottom: 15px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .autoAddNewUsersSection { width: 240px; height: 40px; border-radius: 4px; background-color: #fbfbfb; padding: 10px; margin-top: 10px; margin-bottom: 10px; margin-left: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .autoAddNewUsersSection .autoAddNewUsersCheckbox { vertical-align: middle; margin-right: 6px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .autoAddNewUsersSection .autoAddNewUsersLabel { display: inline-block; font-family: GlowRegular; font-size: 14px; color: #4a4a4a; vertical-align: middle; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .defaultAssigneeSection { margin-bottom: 15px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .addMoreButton { border: 0; outline: none; background-color: white; width: 85px; margin: auto; display: block; margin-top: 10px; background-image: url("../../images/shared/plus-hovered.png"); background-repeat: no-repeat; background-position: left, center; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent hr { border-color: #efefef; width: 100%; margin-top: 0; margin-bottom: 20px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .deleteFieldMapping { display: inline-block; width: 12px; height: 12px; padding-top: 29px; background-image: url("../../images/shared/delete.png"); background-repeat: no-repeat; cursor: pointer; vertical-align: bottom; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .selectedGroups { max-height: 86px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersStepForm { font-size: 12px; color: #b6b6b6; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .fieldsForGroupSeparator { text-align: center; margin-bottom: 5px; color: #b6b6b6; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .deleteFieldMapping:focus { background-image: url("../../images/shared/delete_hover.png"); } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .advancedSettings { height: 38px; padding: 0 30px; margin-top: 28px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .advancedSettings button { display: inline-block; width: 130px; margin-right: 10px; margin-left: 15px; background: none; outline: none; border: 0; height: 38px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .groupsAndUsersContent .advancedSettings input { display: inline-block; width: 140px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .optionsGroup .ui-radiobutton { margin-right: 3px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.groupsAndUsersStep .optionsGroup .ui-radiobutton-label[disabled] { color: #4a4a4a; cursor: default; opacity: 0.4; } .ds-container .wizardSteps .stepContent .itemTitle { font-family: GlowRegular; font-size: 12px; color: #36393e; margin-top: 22px; margin-left: 10px; } .ds-container .wizardSteps .stepContent .itemTitle .infoIcon { display: inline-block; margin-left: 4px; cursor: pointer; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup { height: 72px; border-radius: 4px; background-color: #fbfbfb; margin-bottom: 5px; width: 320px; margin-left: 20px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldDropdown { display: inline-block; width: 187px; vertical-align: top; margin-right: 20px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldDropdown .itemTitle { margin-left: 19px; margin-bottom: 0; padding-top: 2px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldPrefix .itemTitle { margin-bottom: 0; padding-top: 2px; margin-left: 8px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldDropdown .groupFieldDropdown { margin-left: 10px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldDropdown .ui-input { border-radius: 0; border: none; border-bottom: 1px solid #efefef; border-radius: 0; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldDropdown .ui-input:focus { border-bottom: 1px solid #5774e7; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .ui-input { background-color: #fbfbfb; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .fieldsForGroup .fieldPrefix { display: inline-block; width: 78px; vertical-align: top; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .groupFieldMappingSection { padding-bottom: 12px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .topBlur.groupFieldMappingSectionBlur { position: absolute; top: 145px; height: 12px; width: 100%; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); z-index: 1; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .bottomBlur.groupFieldMappingSectionBlur { position: absolute; height: 12px; bottom: 0; width: 100%; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%); z-index: 1; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .groupFieldMappingsRemovedNotification { width: 320px; height: 37px; border-radius: 4px; background-color: #fbfbfb; margin-left: 20px; margin-top: 10px; font-size: 12px; } .ds-container .wizardSteps .stepContent.groupsAndUsersStep .groupFieldMappingsRemovedNotification .groupFieldMappingsRemovedNotificationText { margin-left: 19px; top: 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ds-container .wizardSteps .stepsContentContainer .stepContent.finalStep { max-height: 215px; } .ds-container .wizardSteps .stepsContentContainer .stepContent.finalStep .desciption { font-family: GlowRegular; font-size: 14px; color: #4a4a4a; margin-top: 15px; } /* Finalize step always has 60px height in collapsed state(because it's empty) */ .ds-container .wizardSteps .stepsContentContainer .stepContent.finalStep.collapsed.availableForExpand { height: 60px; } /* Override hover height for empty section, it should not be 120px, but 70px in this case*/ .ds-container .wizardSteps .stepsContentContainer .stepContent.finalStep.collapsed.availableForExpand:hover { height: 70px; } .ds-container .wizardSteps .stepContent .ui-input { padding-left: 10px; color: #36393f; width: 100%; display: inline-block; height: 24px; margin-top: 6px; } .ds-container .wizardSteps .stepContent .ui-input.wrongValue { border-bottom: 1px solid #ec4a43; } .ds-container .wizardSteps .stepContent .colapsedInfo { font-family: GlowRegular; font-size: 12px; color: #808080; margin-top: 8px; } .ds-container .wizardSteps .stepContent .colapsedInfo .selectedValue { color: #4a4a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; padding-left: 3px; } .ds-container .wizardSteps .stepContent .colapsedInfo .selectedValue.selectedUrl { width: 200px; } .ds-container .wizardSteps .stepContent .colapsedInfo .selectedValue.selectedUsername { width: 166px; } .ds-container .wizardSteps .stepsResultContainer { padding: 20px 80px 20px 0; overflow-x: auto; overflow-y: hidden; position: relative; height: 100%; } /*Block that is used to show notification while loading data*/ .ds-container .wizardSteps .stepsResultContainer .loadingSection { padding-left: 10px; } .ds-container .wizardSteps .stepsResultContainer .loadingSection .diwWithSpinner { display: table; } .ds-container .wizardSteps .stepsResultContainer .loadingSection .diwWithSpinner .ui-loader-dark { display: inline-block; } .ds-container .wizardSteps .stepsResultContainer .loadingSection .diwWithSpinner .loadingText { padding-left: 10px; display: inline-block; font-family: GlowRegular; font-size: 14px; color: #4a4a4a; vertical-align: middle; display: table-cell; } .ds-container .wizardSteps .stepsResultContainer .containerHeader { padding-left: 10px; padding-right: 10px; padding-bottom: 20px; } .ds-container .wizardSteps .stepsResultContainer .containerHeader img { vertical-align: top; margin-top: 5px; margin-right: 3px; } .ds-container .wizardSteps .stepsResultContainer .containerHeader .title { font-family: GlowSemiBold; font-size: 16px; color: #4a4a4a; } .ds-container .wizardSteps .stepsResultContainer .containerHeader .count { font-family: GlowRegular; font-size: 14px; color: #4a4a4a; } .ds-container .wizardSteps .stepsResultContainer .containerHeader .issuesCount { font-family: GlowRegular; font-size: 14px; color: #b6b6b6; margin-left: 4px; } .ds-container .wizardSteps .stepsResultContainer .emptyArea { font-family: GlowRegular; font-size: 14px; color: #b6b6b6; padding-left: 10px; } .ds-container .wizardSteps .stepsResultContainer .topBlur { position: absolute; height: 12px; width: 100%; pointer-events: none; /* Go from completely solid white on the top to completely transparent on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); } .ds-container .wizardSteps .stepsResultContainer .bottomBlur { position: absolute; height: 12px; width: 100%; pointer-events: none; /* Go from completely transparent on the top to completely solid white on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%); } .ds-container .wizardSteps .stepsResultContainer .groupsAndUsersContainer { min-height: 110px; display: table; width: 100%; height: 50%; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer { width: 280px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); margin-right: 10px; min-height: 110px; display: table-cell; position: relative; vertical-align: top; padding: 20px; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .usersTitle { font-family: GlowRegular; font-size: 13px; color: #808080; line-height: 27px; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea { padding-left: 10px; padding-right: 10px; position: relative; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .groupsListContainer { overflow-x: hidden; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .groupRow { width: 100%; position: relative; height: 20px; display: table; margin-bottom: 8px; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .groupRow .groupName, .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .groupRow .usersCount { display: table-cell; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .groupRow .groupName { font-family: GlowRegular; font-size: 14px; text-align: left; color: #4a4a4a; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .groupRow .usersCount { font-family: GlowSemibold; font-size: 13px; text-align: right; color: #4a4a4a; width: 25px; vertical-align: bottom; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .noGroupRow { margin-bottom: 10px; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .noGroupRow .groupName, .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsListArea .noGroupRow .usersCount { color: #808080; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsTopBlur { top: -3px; } .ds-container .wizardSteps .stepsResultContainer .groupsContainer .groupsBottomBlur { bottom: 0; } .ds-container .wizardSteps .stepsResultContainer .groupsAndUsersContainerSeparator { display: table-cell; vertical-align: top; width: 10px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer { border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); position: relative; min-height: 110px; vertical-align: top; display: table-cell; padding: 20px 0; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .containerHeader { padding-left: 30px; padding-right: 30px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .emptyArea, .ds-container .wizardSteps .stepsResultContainer .usersContainer .loadingSection { padding-left: 30px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .topBlur.usersWithAssignmentBlur { top: 25px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .bottomBlur.usersWithAssignmentBlur { bottom: 34px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .topBlur.usersWithoutAssignmentBlur { top: 60px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .bottomBlur.usersWithoutAssignmentBlur { bottom: 0; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea { position: relative; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle { font-family: GlowRegular; font-size: 13px; color: #808080; cursor: pointer; line-height: 15px; padding-left: 30px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle.expanded { margin-bottom: 15px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle.withAssignmentUsersSectionTitle { margin-top: 20px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle:hover { color: #4a4a4a; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle:hover .triangle { background: url('../../images/dataSources/triangle-up-hovered.png') no-repeat; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle:hover .triangle.collapsed { background: url('../../images/dataSources/triangle-down-hovered.png') no-repeat; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle .triangle { display: inline-block; background: url('../../images/dataSources/triangle-up.png') no-repeat; width: 7px; height: 7px; margin-left: 5px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersSectionTitle .triangle.collapsed { background: url('../../images/dataSources/triangle-down.png') no-repeat; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList { position: relative; overflow: auto; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow { font-family: GlowRegular; font-size: 14px; color: #4a4a4a; line-height: 25px; word-wrap: break-word; display: table; width: 100%; padding-left: 30px; padding-right: 30px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow:hover { background-color: #F4F5FC; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow:hover .groupNameForUser { box-shadow: 0 0 0 1px #dcdcdc; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow:hover .linkGroupToUserContainer, .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer.isGroupNameInputVisible { display: inline-block; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .cell { display: table-cell; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .cell.checkBoxCell { width: 25px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .cell.removedGroupsCell { width: 120px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .cell.removedGroupsCell .removedGroupsDescription { font-size: 12px; text-align: right; color: #b6b6b6; cursor: pointer; height: 15px; line-height: 15px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .cell.removedGroupsCell .removedGroupsDescription:hover { color: #808080; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .ui-checkbox { vertical-align: middle; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .userName { display: inline-block; margin-right: 10px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .userName.userWithoutGroups { margin-right: 14px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser { display: inline-block; font-family: GlowRegular; font-size: 13px; color: #36393e; min-height: 22px; border-radius: 4px; background-color: #f4f4f4; padding: 0 8px; margin-right: 4px; line-height: 22px; position: relative; min-width: 28px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser.addedGroup { box-shadow: 0 0 0 1px #808080; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser:hover { box-shadow: 0 0 0 1px #5774e7; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser.lastGroup { margin-right: 14px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser:hover .removeIcon { display: inline-block; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser .removeIcon { position: absolute; display: none; top: 0; right: 8px; width: 24px; height: 100%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f4f4f4 50%, #f4f4f4 100%); } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser .removeIcon .image { background: url('../../images/dataSources/remove.png') no-repeat; width: 8px; height: 8px; float: right; margin-top: 8px; cursor: pointer; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .groupNameForUser .removeIcon .image:hover { background: url('../../images/dataSources/remove-hovered.png') no-repeat; } /* Directive linkGroupToUser styles */ .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer { display: none; margin-left: -4px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer .plusIcon { cursor: pointer; /*Negative margin is used to make blocks jmping with setted +*/ margin-left: -9px; background: url(../../images/shared/plus-hovered.png) no-repeat; height: 8px; width: 8px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer .plusIcon:hover { background: url(../../images/shared/plus-blue-hovered.png) no-repeat; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer .inputContainer { display: inline-block; position: relative; line-height: 22px; max-height: 22px; padding: 0 8px; margin-right: 4px; box-shadow: 0 0 0 1px #5774e7; background-color: #f4f4f4; color: #36393e; border-radius: 4px; font-family: GlowRegular; font-size: 13px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer .inputContainer input.groupName { height: 22px; border: none; background-color: rgb(244, 244, 244); outline: none; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer ul.availableGroupsList { position: fixed; z-index: 1000; list-style-type: none; padding: 5px 0; width: 170px; max-height: 300px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); overflow-y: auto; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer ul.availableGroupsList li.availableGroupListItem { font-family: GlowRegular; font-size: 14px; color: #4a4a4a; cursor: pointer; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .linkGroupToUserContainer ul.availableGroupsList li.availableGroupListItem:hover { background-color: #f4f5fc; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip { position: fixed; z-index: 1000; right: 30px; width: 135px; background-color: #ffffff; box-shadow: 0 1px 10px 0 rgba(0, 17, 40, 0.3); padding: 4px 0; border-radius: 4px; display: none; opacity: 0; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip > .upTriangle { content: " "; width: 0; height: 0; border-bottom: 6px solid #ffffff; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; top: -6px; margin-bottom: -6px; left: 50%; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip > .downTriangle { content: " "; width: 0; height: 0; border-top: 6px solid #ffffff; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; bottom: 0; margin-bottom: -6px; left: 50%; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip .removedItem { height: 25px; padding: 0 10px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip .removedGroupName { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px; float: left; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip .undoIcon { display: inline-block; cursor: pointer; background: url(../../images/shared/undo.png) no-repeat; height: 11px; width: 14px; float: right; margin-top: 8px; } .ds-container .wizardSteps .stepsResultContainer .usersContainer .usersListArea .usersList .userRow .removedGroupsTooltip .undoIcon:hover { background: url(../../images/shared/undo-hovered.png) no-repeat; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer { min-height: 110px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); position: relative; margin-top: 10px; padding: 20px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsTopBlur { top: 30px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsBottomBlur { bottom: 0; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListTableContainer { overflow: auto; max-height: 150px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea { position: relative; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectsListHeader { border-radius: 4px; background-color: #f6f6f6; font-family: GlowRegular; font-size: 13px; color: #808080; cursor: default; margin-bottom: 5px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectsListHeader .questionSign { color: #5774e7; margin-left: 3px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectsListTable.projectRow { line-height: 15px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectRow { display: table; height: 28px; width: 100%; padding: 5px 10px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectRow td { padding: 0 !important; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectRow .ellipsis { height: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 0; min-width: 100%; display: block; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .column { display: table-cell; position: relative; min-width: 60px; word-break: break-all; word-wrap: break-word; overflow: hidden; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .checkColumn { width: 20px; min-width: 20px; vertical-align: top; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .checkColumn .importedMark { background-image: url('../../images/dataSources/validField.png'); background-position: center center; background-repeat: no-repeat; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectName { min-width: 100px; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .dateColumn { width: 135px; text-align: right; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .dateColumn .emptyStartDate { font-size: 13px; color: #808080; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea.compactTable .dateColumn { width: 90px; text-align: right; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .dateColumn .emptyEndDate { font-size: 13px; color: #808080; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .dateColumn .emptyEndDate.notPossibleToImport { color: #ec4a43; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea.compactTable .workColumn { width: 101px; text-align: right; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .workColumn { width: 105px; text-align: right; } .ds-container .wizardSteps .stepsResultContainer .projectsContainer .projectsListArea .projectError { vertical-align: top; } /*Icon */ .ds-container .stepsIcon { position: absolute; background-image: url('../../images/dataSources/infoIcon-big.png'); height: 30px; width: 30px; bottom: 20px; left: 25px; cursor: pointer; } .ds-container .stepsIcon:hover { background-image: url('../../images/dataSources/infoIcon-big-hovered.png'); } .ds-container .con-container { width: 100%; text-align: center; height: 100%; overflow: auto; } .ds-container .con-container .connectionsList { width: 1200px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); position: relative; display: inline-block; overflow: auto; margin-top: 20px; padding: 20px 0; text-align: left; } .ds-container .con-container .connectionsList .containerHeader { padding-left: 30px; padding-right: 30px; padding-bottom: 20px; } .ds-container .con-container .connectionsList .containerHeader img { vertical-align: top; margin-top: 5px; margin-right: 3px; } .ds-container .con-container .connectionsList .containerHeader .title { font-family: GlowSemiBold; font-size: 16px; color: #4a4a4a; } .ds-container .con-container .connectionsList .containerHeader .count { font-family: GlowRegular; font-size: 14px; color: #4a4a4a; } .ds-container .con-container .connectionsList .connectionsListHeaderContainer { padding: 0 20px; } .ds-container .con-container .connectionsList .connectionsListHeader { border-radius: 4px; background-color: #f6f6f6; font-family: GlowRegular; font-size: 13px; color: #808080; cursor: default; margin-bottom: 5px; } .ds-container .con-container .connectionsList .connectionsListHeader.connectionRow { padding: 5px 10px; } .ds-container .con-container .connectionsList .connectionRow { display: table; height: 28px; width: 100%; padding: 0 30px; padding-top: 3px; } .ds-container .con-container .connectionsList .connectionRow .ellipsis { height: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 25px; width: 0; min-width: 100%; display: block; } .ds-container .con-container .connectionsList .connectionRow .column { display: table-cell; position: relative; } .ds-container .con-container .connectionsList .connectionRow .column.connected { color: #6ebc2c; } .ds-container .con-container .connectionsList .connectionRow .column.error { color: #ec4a43; } .ds-container .con-container .connectionsList .connectionRow .column.limited { color: #ff7c10; } .ds-container .con-container .connectionsList .connectionRow .column .connectionState { width: max-content; } .ds-container .con-container .connectionsList .connectionRow .column .limitedConnectionIcon img { margin-bottom: 3px; } .ds-container .con-container .connectionsList .connectionRow .column.urlColumn { width: 223px; } .ds-container .con-container .connectionsList .connectionRow .column.urlColumn .companyName { font-family: GlowSemibold; } .ds-container .con-container .connectionsList .connectionRow .column.usernameColumn { width: 188px; } .ds-container .con-container .connectionsList .connectionRow .column.scopeColumn { width: 181px; } .ds-container .con-container .connectionsList .connectionRow .column.projectColumn { width: 145px; padding-right: 40px; } .ds-container .con-container .connectionsList .connectionRow .column.countColumn { text-align: right; } .ds-container .con-container .connectionsList .connectionRow .column.countColumn.projectsCount { width: 40px; } .ds-container .con-container .connectionsList .connectionRow .column.countColumn.tasksCount, .ds-container .con-container .connectionsList .connectionRow .column.countColumn.groupsCount { width: 60px; } .ds-container .con-container .connectionsList .connectionRow .column.countColumn.usersCount { width: 58px; } .ds-container .con-container .connectionsList .connectionRow .column.stateColumn { width: 153px; padding-left: 60px; display: flex; } .ds-container .con-container .connectionsList .connectionRow .column.stateColumn .showListBtn { margin-left: 8px; cursor: pointer; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn { width: 32px; vertical-align: middle; padding-bottom: 3px; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn { display: none; width: 32px; height: 20px; padding-top: 7px; padding-left: 6px; vertical-align: middle; border: solid 1px transparent; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn .img { background-image: url('../../images/dataSources/dots.png'); width: 18px; height: 4px; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn:hover .img, .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn.actionMenuBtn-active .img { background-image: url('../../images/dataSources/dots-hovered.png'); } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn:hover, .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn.actionMenuBtn-active { border-radius: 4px; border: solid 1px #b6b6b6; cursor: pointer; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenuBtn.actionMenuBtn-active { display: inline-block; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenu { position: fixed; width: 140px; height: 95px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); font-family: GlowRegular; font-size: 14px; text-align: left; color: #4a4a4a; padding: 5px 0; z-index: 1000; margin-top: 5px; /*negative margin is used to aligh menu on the right of the 3 dots button*/ margin-left: -108px; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenu .actionBtn { padding: 0 10px; height: 28px; line-height: 28px; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenu .actionBtn:hover { cursor: pointer; background-color: #F4F5FC; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenu .actionBtn[disabled] { opacity: 0.4; cursor: default; } .ds-container .con-container .connectionsList .connectionRow .column.actionMenuColumn .actionMenu .actionBtn[disabled]:hover { background-color: transparent; } .ds-container .con-container .connectionsListWithScroll .connectionRow { color: #4a4a4a; } .ds-container .con-container .connectionsListWithScroll .connectionRow:hover { background-color: #F4F5FC; } .ds-container .con-container .connectionsListWithScroll .connectionRow:hover .column.actionMenuColumn .actionMenuBtn { display: inline-block; } .ds-container .con-container .buttonContainer { height: 38px; margin-top: 30px; margin-right: 30px; } .ds-container .con-container .buttonContainer .ui-btn-light { width: 158px; } .ds-container .con-container .topBlur { position: absolute; height: 12px; width: 100%; pointer-events: none; /* Go from completely solid white on the top to completely transparent on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); } .ds-container .con-container .bottomBlur { position: absolute; height: 12px; width: 100%; pointer-events: none; /* Go from completely transparent on the top to completely solid white on the bottom */ background-image: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%); } .ds-container .con-container .topBlur.connectionsListTopBlur { top: 90px; } .ds-container .con-container .bottomBlur.connectionsListBottomBlur { bottom: 88px; } .ds-container .loader-container { margin-left: 50%; top: 50%; bottom: 50%; position: absolute; } .ds-container .infoDropdown-container { position: absolute; /* Info Dropdown is always 92px from the top */ top: 92px; /* Info Dropdown should be above everything else */ z-index: 9999; font-family: GlowRegular; font-size: 14px; width: 250px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2); display: none; opacity: 0; /* make text non-selectable for all children elements */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } /* Triangle above the Dropdown */ .ds-container .infoDropdown-container .infoDropdown-arrow { content: " "; width: 0; height: 0; position: absolute; top: 95px; } .ds-container .infoDropdown-container .infoDropdown-arrow.leftArrow { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 5px solid #ffffff; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)); left: -5px; } .ds-container .infoDropdown-container .infoDropdown-arrow.rightArrow { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #ffffff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); left: 200px; } .ds-container .infoDropdown-container .infoDropdown-text { padding: 15px 18px; font-size: 13px; } .ds-container .infoDropdown-container .infoDropdown-text .ui-btn-link { font-size: 13px; } .deleteConnectionConfirmation-popup > .modal-dialog > .modal-content { height: 238px; } .modified { color: #ff7c10 !important; } .ds-container .customDropdown .ui-input-bordered { border: none; border-bottom: 1px solid #efefef; border-radius: 0; } .ds-container .customDropdown .ui-input-bordered:focus { border-bottom: 1px solid #5774e7 } .ds-container .jiraScopeDropdown { padding-top: 8px; margin-left: 10px; } .ds-container .projectFieldMappingDropdown { padding-top: 8px; margin-left: 10px; } .ds-container .defaultAssigneeDropdown { padding-top: 8px; margin-left: 30px; }