Initial commit

app/assets/stylesheets/common/create/create_header.css.scss

@@ -0,0 +1,121 @@
+@import "../../variables/colors";
+@import "../../variables/sizes";
+
+.CreateDialog-header {
+  min-height: 100px !important;
+  max-height: 100px;
+}
+.CreateDialog-header.with-separator { border-bottom: 1px solid $cStructure-mainLine; }
+
+.CreateDialog-headerSteps {
+  display: block;
+  text-align: center;
+}
+
+.CreateDialog-headerStep {
+  display: inline-block;
+  width: auto;
+  min-width: 130px;
+  margin-right: 98px;
+}
+.CreateDialog-headerStep:last-child { margin-right: 0; }
+// TODO: this should be deprecated/removed by using standalone .LayoutIcon instead
+.CreateDialog-header .Dialog-headerIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  border-color: #CCC;
+  line-height: 42px;
+}
+
+.CreateDialog-header .Dialog-headerIcon .CDB-IconFont {
+  color: #CCC;
+}
+
+.CreateDialog-header .CDB-IconFont-add {
+  font-size: 20px;
+}
+
+.CreateDialog-header .Dialog-headerTitle {
+  color: $cTypography-help;
+  font-size: $sFontSize-larger;
+  line-height: $sLineHeight-large;
+}
+
+.CreateDialog-header .Dialog-headerText {
+  color: $cTypography-help;
+  font-size: 14px;
+  font-weight: $sFontWeight-lighter;
+}
+
+.CreateDialog-header .Dialog-headerIconBadge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #CCC;
+  border-radius: 15px;
+  background: white;
+  line-height: $sLineHeight-smaller;
+  text-align: center;
+}
+
+.CreateDialog-header .Dialog-headerIconBadge .CDB-IconFont {
+  margin-top: 1px;
+  color: $cTypography-secondary;
+  font-size: $sFontSize-smaller;
+  vertical-align: top;
+}
+
+.CreateDialog-headerButton {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 40px;
+  left: 30px;
+  width: 38px;
+  height: 38px;
+  border: 1px solid #CCC;
+  border-radius: 40px;
+  outline: none;
+  background: none;
+  color: #CCC;
+  font-size: $sFontSize-largest;
+  font-weight: $sFontWeight-lighter;
+  line-height: 38px;
+
+  &:hover {
+    border: 1px solid #999;
+    color: #999;
+  }
+}
+
+// Step selected or selectable
+.CreateDialog-headerStep.is-selected,
+.CreateDialog-headerStep.is-selectable:hover {
+  .Dialog-headerIcon { border-color: $cIcons-active; }
+
+  .CDB-IconFont {
+    color: $cIcons-active;
+  }
+
+  .Dialog-headerText,
+  .Dialog-headerTitle {
+    color: $cTypography-paragraphs;
+  }
+
+  .Dialog-headerIconBadge {
+    border-color: $cHighlight-main;
+    color: $cHighlight-positive;
+  }
+}
+
+.CreateDialog-headerStep.CreateDialog-headerStep--single {
+  .Dialog-headerText,
+  .Dialog-headerTitle {
+    color: $cTypography-paragraphs;
+  }
+}
+.CreateDialog-headerStep.is-selectable:hover { cursor: pointer; }