diff --git a/components/Avatar/Avatar.scss b/components/Avatar/Avatar.scss index bddc3e9ce..5ebbaa72c 100644 --- a/components/Avatar/Avatar.scss +++ b/components/Avatar/Avatar.scss @@ -1,14 +1,17 @@ $avatar-diameter: 35px; -.Avatar { - width : $avatar-diameter; - height : $avatar-diameter; - border-radius : 50%; - background-color: #eee; - overflow : hidden; - - img { - width : 100%; - height: 100%; +:global { + .Avatar { + width : $avatar-diameter; + height : $avatar-diameter; + border-radius : 50%; + background-color: #eee; + overflow : hidden; + + img { + width : 100%; + height: 100%; + } } } + \ No newline at end of file diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss index 1f5f1aec9..98f4ce479 100644 --- a/components/Carousel/Carousel.scss +++ b/components/Carousel/Carousel.scss @@ -1,45 +1,48 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $pager-bg-color: #737380; -.Carousel { - display: flex; - flex-direction: row; - - .page-down { - width: 20px; - margin-right: 15px; - background-color: $pager-bg-color; +:global { + .Carousel { display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - &.hidden { - display: none; + flex-direction: row; + + .page-down { + width: 20px; + margin-right: 15px; + background-color: $pager-bg-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &.hidden { + display: none; + } } - } - - .page-up { - width: 20px; - background-color: $pager-bg-color; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - &.hidden { - display: none; + + .page-up { + width: 20px; + background-color: $pager-bg-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &.hidden { + display: none; + } } - } - - .visible-area { - display: flex; - flex-direction: row; - overflow: hidden; - - .carousel-item:not(:first-child) { - margin-left: 30px; + + .visible-area { + display: flex; + flex-direction: row; + overflow: hidden; + + .carousel-item:not(:first-child) { + margin-left: 30px; + } } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/Carousel/CarouselExamples.scss b/components/Carousel/CarouselExamples.scss index 1538b7e32..b09736905 100644 --- a/components/Carousel/CarouselExamples.scss +++ b/components/Carousel/CarouselExamples.scss @@ -1,17 +1,20 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.Carousel { - .StandardListItem { - padding: 0px; +:global { + .Carousel { + .StandardListItem { + padding: 0px; + } } -} - -.CarouselExamples { - > p { - border: 1px solid $tc-gray-40; - margin: 20px 0px; + + .CarouselExamples { + > p { + border: 1px solid $tc-gray-40; + margin: 20px 0px; + } + .limited-width { + width: 200px; + } } - .limited-width { - width: 200px; - } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/Checkbox/Checkbox.scss b/components/Checkbox/Checkbox.scss index 209166dcb..548a96ada 100644 --- a/components/Checkbox/Checkbox.scss +++ b/components/Checkbox/Checkbox.scss @@ -1,14 +1,16 @@ -.Checkbox { - label { - margin-left: 10px; +:global { + .Checkbox { + label { + margin-left: 10px; + } + + .icon, button { + width : 24px; + height : 24px; + /* fixing jumping issues on webkit */ + outline : none; + overflow: hidden; + } } - - .icon, button { - width : 24px; - height : 24px; - /* fixing jumping issues on webkit */ - outline : none; - overflow: hidden; - } -} \ No newline at end of file +} diff --git a/components/Dropdown/Dropdown.scss b/components/Dropdown/Dropdown.scss index 84a723018..07cd37aff 100644 --- a/components/Dropdown/Dropdown.scss +++ b/components/Dropdown/Dropdown.scss @@ -1,162 +1,165 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.dropdown-wrap { - cursor: pointer; - position: relative; -} - -.Dropdown { - background-color: #fff; - box-shadow: 0 2px 7px rgba(0, 0, 0, 0.17); - border-radius: 5px; - display: inline-block; - position: absolute; - left: 0; - top: 5px; - width: 100%; - z-index: 2; - - ul { - height: 100%; - width: 100%; +:global { + .dropdown-wrap { + cursor: pointer; position: relative; - z-index: 10; - background-color: #fff; - padding: 11px 20px; - border-radius: 5px; - - li { - list-style: none; - } - - li a { - color: #394146; - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-size: 12px; - display: block; - line-height: 26px; - } } -} - -.dropdown-wrap.default { - border: 1px solid $tc-gray-20; - display: flex; - align-items: center; - padding: calc(2 * #{$base_unit}); - position: relative; - + .Dropdown { - ul.dropdown-menu-list { - padding: 10px 0px; + background-color: #fff; + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.17); + border-radius: 5px; + display: inline-block; + position: absolute; + left: 0; + top: 5px; + width: 100%; + z-index: 2; + + ul { + height: 100%; + width: 100%; + position: relative; + z-index: 10; + background-color: #fff; + padding: 11px 20px; + border-radius: 5px; + li { - padding: 0 20px; - @include ellipsis; + list-style: none; } - - li:hover { - background-color: $tc-gray-neutral-dark; + + li a { + color: #394146; + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 12px; + display: block; + line-height: 26px; } } } -} - -.dropdown-wrap.default::after { - content: " "; - width: 10px; - height: 10px; - display: block; - right: 10px; - top: 50%; - position: absolute; - transform: translateY(-50%) rotate(45deg); - border-bottom: 2px solid $tc-gray-20; - border-right: 2px solid $tc-gray-20; -} - -.Dropdown.hide { - display: none; -} - -.Dropdown.pointer-left:before { - right: initial; - left: 15px; -} - -.UserDropdownMenu .Dropdown.pointer-shadow { - margin-top: 35px; - - &:before { - content: ''; + + .dropdown-wrap.default { + border: 1px solid $tc-gray-20; + display: flex; + align-items: center; + padding: calc(2 * #{$base_unit}); + position: relative; + + .Dropdown { + ul.dropdown-menu-list { + padding: 10px 0px; + li { + padding: 0 20px; + @include ellipsis; + } + + li:hover { + background-color: $tc-gray-neutral-dark; + } + } + } + } + + .dropdown-wrap.default::after { + content: " "; + width: 10px; + height: 10px; display: block; + right: 10px; + top: 50%; position: absolute; - top: -6px; - right: 24px; - width: 12px; - height: 12px; - background: #FFFFFF; - border-right: 1px solid $tc-gray-20;; - border-bottom: 1px solid $tc-gray-20;; - transform: rotate(-135deg); - z-index:999; + transform: translateY(-50%) rotate(45deg); + border-bottom: 2px solid $tc-gray-20; + border-right: 2px solid $tc-gray-20; } -} - -.Dropdown.pointer-hide:before { - display: none; -} - -.Dropdown.no-autoclose { - cursor: default; -} - -.new-theme { - text-align: left; - height: 30px; - color: $tc-black; - background: $tc-gray-neutral-light; - border: 1px solid $tc-gray-20; - @include roboto; - font-size: 13px; - line-height: 20px; - width: 100%; - border-radius: 2px; - position: relative; - - .dropdown-menu-header { - width: 100%; - border: 0; - height: 28px; - line-height: 28px; - margin: 0; - padding: 0 0 0 10px; - color: $tc-gray-50; - font-size: 13px; + + .Dropdown.hide { + display: none; } - &:after{ - display: block; - content: ''; - position: absolute; - width: 10px; - height: 14px; - right: 11px; - top: 50%; - margin-top: -7px; - background: url("./icon-select.png") left top no-repeat; - background-size: 10px 14px; - z-index:2; + + .Dropdown.pointer-left:before { + right: initial; + left: 15px; } - .Dropdown { - ul.dropdown-menu-list { - padding: 10px 0px; - li { - padding: 0 20px; - @include ellipsis; - } - li:hover { - background-color: $tc-gray-neutral-dark; + + .UserDropdownMenu .Dropdown.pointer-shadow { + margin-top: 35px; + + &:before { + content: ''; + display: block; + position: absolute; + top: -6px; + right: 24px; + width: 12px; + height: 12px; + background: #FFFFFF; + border-right: 1px solid $tc-gray-20;; + border-bottom: 1px solid $tc-gray-20;; + transform: rotate(-135deg); + z-index:999; + } + } + + .Dropdown.pointer-hide:before { + display: none; + } + + .Dropdown.no-autoclose { + cursor: default; + } + + .new-theme { + text-align: left; + height: 30px; + color: $tc-black; + background: $tc-gray-neutral-light; + border: 1px solid $tc-gray-20; + @include roboto; + font-size: 13px; + line-height: 20px; + width: 100%; + border-radius: 2px; + position: relative; + + .dropdown-menu-header { + width: 100%; + border: 0; + height: 28px; + line-height: 28px; + margin: 0; + padding: 0 0 0 10px; + color: $tc-gray-50; + font-size: 13px; + } + &:after{ + display: block; + content: ''; + position: absolute; + width: 10px; + height: 14px; + right: 11px; + top: 50%; + margin-top: -7px; + background: url("./icon-select.png") left top no-repeat; + background-size: 10px 14px; + z-index:2; + } + .Dropdown { + ul.dropdown-menu-list { + padding: 10px 0px; + li { + padding: 0 20px; + @include ellipsis; + } + li:hover { + background-color: $tc-gray-neutral-dark; + } } } } } + \ No newline at end of file diff --git a/components/Dropdown/DropdownExamples.scss b/components/Dropdown/DropdownExamples.scss index b86dd3e10..21075cd66 100644 --- a/components/Dropdown/DropdownExamples.scss +++ b/components/Dropdown/DropdownExamples.scss @@ -1,31 +1,33 @@ -/** - * Containers of dropdown should be positioned relative so that the dropdown stay within the bounds of it - * Pointer is positioned 15px from the right by default, but this can be overriden in styling - */ - -.dropdown-example { - margin-bottom: 50px; - position: relative; - padding: 15px; - background-color: #DDD; +:global { + /** + * Containers of dropdown should be positioned relative so that the dropdown stay within the bounds of it + * Pointer is positioned 15px from the right by default, but this can be overriden in styling + */ + + .dropdown-example { + margin-bottom: 50px; + position: relative; + padding: 15px; + background-color: #DDD; + } + + .full-width { + width: 100%; + + .Dropdown:before { + right: initial; + left: 30px; + } + } + + .limited-width { + width: 25%; + display: inline-block; + margin-right: 25px; + text-align: right; + } + + .limited-width.pointer-left-example { + text-align: left; + } } - -.full-width { - width: 100%; - - .Dropdown:before { - right: initial; - left: 30px; - } -} - -.limited-width { - width: 25%; - display: inline-block; - margin-right: 25px; - text-align: right; -} - -.limited-width.pointer-left-example { - text-align: left; -} \ No newline at end of file diff --git a/components/ExampleApp/ExampleApp.scss b/components/ExampleApp/ExampleApp.scss index 0e28f04d5..6b540a01d 100644 --- a/components/ExampleApp/ExampleApp.scss +++ b/components/ExampleApp/ExampleApp.scss @@ -1,18 +1,21 @@ -@import 'tc-styles'; +@import '~tc-ui/src/styles/tc-styles'; -body { - background-color: $tc-gray-neutral-light; - padding: 15px; - - .invisible { - opacity: .3; - visibility: visible; - } - - h1 { - margin : 80px 0 40px 0; - text-align : center; - padding-bottom: 10px; - border-bottom : 1px solid $tc-gray-neutral-dark; +:global { + body { + background-color: $tc-gray-neutral-light; + padding: 15px; + + .invisible { + opacity: .3; + visibility: visible; + } + + h1 { + margin : 80px 0 40px 0; + text-align : center; + padding-bottom: 10px; + border-bottom : 1px solid $tc-gray-neutral-dark; + } } } + \ No newline at end of file diff --git a/components/ExampleComponent/ExampleComponent.scss b/components/ExampleComponent/ExampleComponent.scss index 57532e94f..c4cb24064 100644 --- a/components/ExampleComponent/ExampleComponent.scss +++ b/components/ExampleComponent/ExampleComponent.scss @@ -1,35 +1,38 @@ -// Whenever you need predefined color variables or mixins -// Add the following line to the top of your .scss file -@import 'tc-includes'; - -// Declare local variables, if necessary -$peaches: #ffdab9; - -/* Please do not overly nest (except media queries): -** ul { -** &.item-list { -** li { -** &.peaches-color { -** background-color: $white; -** } -** } -** } -** } -*/ - -// Prefer flat over nested structure -.item-list { - background-color: white; -} - -.peaches-color { - color: $peaches -} - -// Always nest media queries -.on-sale { - border: 3px solid $tc-dark-blue; - @media screen and (max-width: 700px) { - border-width: 2px; +:global { + // Whenever you need predefined color variables or mixins + // Add the following line to the top of your .scss file + @import '~tc-ui/src/styles/tc-includes'; + + // Declare local variables, if necessary + $peaches: #ffdab9; + + /* Please do not overly nest (except media queries): + ** ul { + ** &.item-list { + ** li { + ** &.peaches-color { + ** background-color: $white; + ** } + ** } + ** } + ** } + */ + + // Prefer flat over nested structure + .item-list { + background-color: white; + } + + .peaches-color { + color: $peaches + } + + // Always nest media queries + .on-sale { + border: 3px solid $tc-dark-blue; + @media screen and (max-width: 700px) { + border-width: 2px; + } } } + \ No newline at end of file diff --git a/components/ExampleNav/ExampleNavStyle.scss b/components/ExampleNav/ExampleNavStyle.scss index 8ddd7ed00..b2793fe03 100644 --- a/components/ExampleNav/ExampleNavStyle.scss +++ b/components/ExampleNav/ExampleNavStyle.scss @@ -1,21 +1,24 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.ExampleNav { - position: fixed; - bottom: 0; - background-color: #fff; - opacity: 0.6; - - li { - display: inline-block; - } - - a { - margin: 10px; - display: inline-block; - } - - .back { - color: $tc-gray-30; +:global { + .ExampleNav { + position: fixed; + bottom: 0; + background-color: #fff; + opacity: 0.6; + + li { + display: inline-block; + } + + a { + margin: 10px; + display: inline-block; + } + + .back { + color: $tc-gray-30; + } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/FilePicker/FilePicker.scss b/components/FilePicker/FilePicker.scss index 29c5da172..a3b92c23e 100644 --- a/components/FilePicker/FilePicker.scss +++ b/components/FilePicker/FilePicker.scss @@ -1,54 +1,57 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.filepicker { - position: relative; - height: 130px; - - .filepicker-drag-drop-pane { - @include roboto-medium; - position: absolute; - display: block; - left: 0; - top: 0; - width: 100%; - height: 100%; - padding: $base-unit*4; - background: $tc-gray-neutral-light; - font-size: $tc-label-lg; - color: $tc-gray-80; - text-align: center; - border: 1px dashed $tc-gray-40; - } - - .filepicker-progress { - display: none; - } - - &.in-progress { - .filepicker-progress { +:global { + .filepicker { + position: relative; + height: 130px; + + .filepicker-drag-drop-pane { + @include roboto-medium; + position: absolute; display: block; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: $base-unit*4; + background: $tc-gray-neutral-light; + font-size: $tc-label-lg; + color: $tc-gray-80; + text-align: center; + border: 1px dashed $tc-gray-40; } - - .filepicker-drag-drop-text, - .filepicker-picker + button { + + .filepicker-progress { display: none; } - } - - &.drag-entered { - .filepicker-drag-drop-pane { - border: 1px solid $tc-gray-80; + + &.in-progress { + .filepicker-progress { + display: block; + } + + .filepicker-drag-drop-text, + .filepicker-picker + button { + display: none; + } + } + + &.drag-entered { + .filepicker-drag-drop-pane { + border: 1px solid $tc-gray-80; + } + } + + .filepicker-progress { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 0; + background-color: $tc-dark-blue-70; } } - - .filepicker-progress { - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 0; - background-color: $tc-dark-blue-70; - } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/FileUploader/FileUploaderStyles.scss b/components/FileUploader/FileUploaderStyles.scss index 2e786da3c..973be615a 100644 --- a/components/FileUploader/FileUploaderStyles.scss +++ b/components/FileUploader/FileUploaderStyles.scss @@ -1,36 +1,39 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.FileUploader { - position: relative; - - .Loader { - z-index: 1; - } - - .UploadedFiles { - margin-bottom: 20px; - } - - .Dropzone { - display: inline-block; - } - - .drag-and-drop { +:global { + .FileUploader { + position: relative; + + .Loader { + z-index: 1; + } + + .UploadedFiles { + margin-bottom: 20px; + } + .Dropzone { - text-align: center; - border : 3px dashed $tc-gray-20; - margin : 10px; - display : block; - - p { - font-size: 20px; - margin: 30px 0px; - color: $tc-gray-20; + display: inline-block; + } + + .drag-and-drop { + .Dropzone { + text-align: center; + border : 3px dashed $tc-gray-20; + margin : 10px; + display : block; + + p { + font-size: 20px; + margin: 30px 0px; + color: $tc-gray-20; + } } } + + .dropzone-container { + text-align: center; + } } - - .dropzone-container { - text-align: center; - } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/Formsy/FormFields.scss b/components/Formsy/FormFields.scss index 8cd787af6..6c635560c 100644 --- a/components/Formsy/FormFields.scss +++ b/components/Formsy/FormFields.scss @@ -1,313 +1,316 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.row { - margin-bottom: 20px; - &.center{ - display: table; - margin: 0 auto; - label{ - display: inline; - } - input{ - display: inline; - width: 100px; +:global { + .row { + margin-bottom: 20px; + &.center{ + display: table; + margin: 0 auto; + label{ + display: inline; + } + input{ + display: inline; + width: 100px; + } } } -} -label{ - display:block; - margin: 10px auto; - text-transform: none; - @include tc-label-md; - color: $tc-gray-70; - font-size: 13px; -} - -.error-message{ - display:block; - margin: 5px auto; - @include roboto; - - color: $tc-gray-70; - font-size: 13px; - line-height:20px; - font-style:italic; - border: 1px solid $tc-red-30; - background: $tc-red-10; - color: $tc-red-70; - padding:10px; - border-radius: 2px; - strong{ - @include roboto-bold; + label{ + display:block; + margin: 10px auto; + text-transform: none; + @include tc-label-md; + color: $tc-gray-70; + font-size: 13px; } -} - -input { - display:block; - margin: 0 auto; - color: $tc-black; - background: $tc-gray-neutral-light; - border-color: $tc-gray-20; - @include tc-label-md; - - &[disabled]{ - color: $tc-gray-20; - background: $tc-white; + + .error-message{ + display:block; + margin: 5px auto; + @include roboto; + + color: $tc-gray-70; + font-size: 13px; + line-height:20px; + font-style:italic; + border: 1px solid $tc-red-30; + background: $tc-red-10; + color: $tc-red-70; + padding:10px; + border-radius: 2px; + strong{ + @include roboto-bold; + } } - - &:hover{ - border-color: $tc-gray-40; + + input { + display:block; + margin: 0 auto; + color: $tc-black; background: $tc-gray-neutral-light; - } - - &:focus{ - background: $tc-white!important; - border-color: $tc-dark-blue-90!important; - } - - &.error{ - border: 1px solid $tc-red-70!important; - background: $tc-gray-neutral-light!important; + border-color: $tc-gray-20; + @include tc-label-md; + + &[disabled]{ + color: $tc-gray-20; + background: $tc-white; + } + + &:hover{ + border-color: $tc-gray-40; + background: $tc-gray-neutral-light; + } + &:focus{ background: $tc-white!important; - // border-color: $tc-dark-blue-90!important; + border-color: $tc-dark-blue-90!important; + } + + &.error{ + border: 1px solid $tc-red-70!important; + background: $tc-gray-neutral-light!important; + &:focus{ + background: $tc-white!important; + // border-color: $tc-dark-blue-90!important; + } } } -} - -textarea{ - display:block; - margin: 0 auto; - height: 100px; - color: $tc-black; - background: $tc-gray-neutral-light; - border-color: $tc-gray-20; - @include tc-label-md; - font-size:15px; - line-height:20px; - box-shadow: none; - - &[disabled]{ - color: $tc-gray-20; - background: $tc-white; - } - - &:hover{ - border-color: $tc-gray-40; - } - - &:focus{ - background: $tc-white!important; - border-color: $tc-dark-blue-90!important; - } - - &.error{ - background: $tc-gray-neutral-light!important; - border: 1px solid $tc-red-70!important; + + textarea{ + display:block; + margin: 0 auto; + height: 100px; + color: $tc-black; + background: $tc-gray-neutral-light; + border-color: $tc-gray-20; + @include tc-label-md; + font-size:15px; + line-height:20px; + box-shadow: none; + + &[disabled]{ + color: $tc-gray-20; + background: $tc-white; + } + + &:hover{ + border-color: $tc-gray-40; + } + &:focus{ background: $tc-white!important; - // border-color: $tc-dark-blue-90!important; + border-color: $tc-dark-blue-90!important; + } + + &.error{ + background: $tc-gray-neutral-light!important; + border: 1px solid $tc-red-70!important; + &:focus{ + background: $tc-white!important; + // border-color: $tc-dark-blue-90!important; + } } } -} - -.checkbox-group-item { - display: inline-block; - margin-right: 42px; - label { - @include roboto-bold; - color: $tc-gray-80; - margin-right: 0; - } -} - -.radio-group-input { - .radio-group-label { - @include tc-label-md; - margin-right: 20px; + + .checkbox-group-item { + display: inline-block; + margin-right: 42px; + label { + @include roboto-bold; + color: $tc-gray-80; + margin-right: 0; + } } - .radio-group-options { - display: flex; - flex-direction: row; - .radio { - margin: 0; - input[type="radio"] { - opacity: 0; - display: none; - } - label { - display: inline-block; - line-height: 19px; - padding-left: 26px; - position: relative; - @include roboto-bold; - font-size:14px; - color: $tc-black; - margin-right: 30px; - &:before { - border: 1px solid $tc-gray-20; + + .radio-group-input { + .radio-group-label { + @include tc-label-md; + margin-right: 20px; + } + .radio-group-options { + display: flex; + flex-direction: row; + .radio { + margin: 0; + input[type="radio"] { + opacity: 0; + display: none; + } + label { + display: inline-block; + line-height: 19px; + padding-left: 26px; + position: relative; + @include roboto-bold; + font-size:14px; + color: $tc-black; + margin-right: 30px; + &:before { + border: 1px solid $tc-gray-20; + border-radius: 50%; + background-color: #fff; + content: ""; + display: inline-block; + height: 19px; + left: 0; + position: absolute; + top: 0; + width: 19px; + } + } + input[type="radio"]:checked + label:after { + background: $tc-dark-blue-90; border-radius: 50%; - background-color: #fff; content: ""; display: inline-block; - height: 19px; - left: 0; + left: 4px; position: absolute; - top: 0; - width: 19px; + top: 4px; + height: 11px; + width: 11px; } } - input[type="radio"]:checked + label:after { - background: $tc-dark-blue-90; - border-radius: 50%; - content: ""; - display: inline-block; - left: 4px; - position: absolute; - top: 4px; - height: 11px; - width: 11px; - } } } -} - -.tiled-group-row { - display: flex; - flex-flow: row wrap; - justify-content: center; -} -a.tiled-group-item { - position: relative; - -webkit-flex: initial; - flex: initial; - margin-right: 20px; - height:155px; - width:135px; - border: 1px solid $tc-gray-20; - border-radius: 4px; - cursor: pointer; - border: 1px solid #dcdce0; - border-radius: 4px; - display: inline-block; - margin: 10px 10px 0; - position: relative; - vertical-align: top; - - &:hover{ - border: 1px solid $tc-dark-blue-70; + + .tiled-group-row { + display: flex; + flex-flow: row wrap; + justify-content: center; } - - &.active{ - background: $tc-gray-10; - border-color: $tc-gray-10; - &:after { - content: ''; - display: block; - position: absolute; - top: 10px; - right: 10px; - width: 15px; - height: 15px; - background: #1A85FF; - border-radius: 2px; + a.tiled-group-item { + position: relative; + -webkit-flex: initial; + flex: initial; + margin-right: 20px; + height:155px; + width:135px; + border: 1px solid $tc-gray-20; + border-radius: 4px; + cursor: pointer; + border: 1px solid #dcdce0; + border-radius: 4px; + display: inline-block; + margin: 10px 10px 0; + position: relative; + vertical-align: top; + + &:hover{ + border: 1px solid $tc-dark-blue-70; + } + + &.active{ + background: $tc-gray-10; + border-color: $tc-gray-10; + &:after { + content: ''; + display: block; + position: absolute; + top: 10px; + right: 10px; + width: 15px; + height: 15px; + background: #1A85FF; + border-radius: 2px; + } + &:before { + content: ''; + position: absolute; + z-index: 1; + top: 12px; + right: 15px; + width: 5px; + border-width: 0 2px 2px 0; + border-style: solid; + border-color: #fff; + height: 10px; + transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + } + &:hover { + border-color: $tc-gray-10; + } } - &:before { - content: ''; + + + span.title{ + display:block; + margin-top: 20px; + @include roboto-bold; + color: $tc-black; + font-size: 13px; + text-align:center; + } + + span.icon { + text-align: center; + display:block; + height: 50px; + margin:30px auto 20px auto; + } + small { + display:block; + font-size: 11px; + text-align:center; + color: $tc-gray-50; + @include roboto; + margin-top:10px; + } + .check-mark { + text-align: center; + background: $tc-dark-blue-90; + border-radius: 2px; + display: none; + height: 15px; position: absolute; - z-index: 1; - top: 12px; right: 15px; - width: 5px; - border-width: 0 2px 2px 0; - border-style: solid; - border-color: #fff; - height: 10px; - transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - } - &:hover { - border-color: $tc-gray-10; + top: 15px; + width: 15px; } } - - span.title{ - display:block; - margin-top: 20px; - @include roboto-bold; - color: $tc-black; - font-size: 13px; - text-align:center; - } - - span.icon { - text-align: center; - display:block; - height: 50px; - margin:30px auto 20px auto; - } - small { - display:block; - font-size: 11px; - text-align:center; - color: $tc-gray-50; - @include roboto; - margin-top:10px; - } - .check-mark { - text-align: center; - background: $tc-dark-blue-90; - border-radius: 2px; - display: none; - height: 15px; - position: absolute; - right: 15px; - top: 15px; - width: 15px; - } -} - -.SliderRadioGroup { - margin: 25px auto 0px auto; - .rc-slider-dot, - .rc-slider-handle { - background: $tc-white; - border: 4px solid $tc-gray-10; - border-radius: 18px; - width: 20px; - height: 20px; - bottom: -7px; - } - - .rc-slider-handle { - border-color: $tc-dark-blue-90; - margin-left: -4px; - bottom: -2px; - display: none; - } - - &:not(.null-value) .rc-slider-dot-active { - border: none; - background: $tc-dark-blue-90 url('./images/check-white.svg') no-repeat 6px 7px; - // bottom: -2px; - // margin-left: -5px; - } - - .rc-slider-track, - .rc-slider-rail { - background-color: $tc-gray-10; - } - - .rc-slider-mark { - top: -30px; - .rc-slider-mark-text { - @include tc-label-lg; - line-height: 5 * $base_unit; - color: $tc-gray-80; - letter-spacing: 0; + .SliderRadioGroup { + margin: 25px auto 0px auto; + .rc-slider-dot, + .rc-slider-handle { + background: $tc-white; + border: 4px solid $tc-gray-10; + border-radius: 18px; + width: 20px; + height: 20px; + bottom: -7px; + } + + .rc-slider-handle { + border-color: $tc-dark-blue-90; + margin-left: -4px; + bottom: -2px; + display: none; + } + + &:not(.null-value) .rc-slider-dot-active { + border: none; + background: $tc-dark-blue-90 url('./images/check-white.svg') no-repeat 6px 7px; + // bottom: -2px; + // margin-left: -5px; + } + + .rc-slider-track, + .rc-slider-rail { + background-color: $tc-gray-10; + } + + .rc-slider-mark { + top: -30px; + .rc-slider-mark-text { + @include tc-label-lg; + line-height: 5 * $base_unit; + color: $tc-gray-80; + letter-spacing: 0; + } } } } + \ No newline at end of file diff --git a/components/FullHeightContainer/FullHeightContainer.scss b/components/FullHeightContainer/FullHeightContainer.scss index c1ccd6772..9e47e84a9 100644 --- a/components/FullHeightContainer/FullHeightContainer.scss +++ b/components/FullHeightContainer/FullHeightContainer.scss @@ -1,2 +1,3 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; + \ No newline at end of file diff --git a/components/Icons/icons.scss b/components/Icons/icons.scss index b1f406f21..5ced3512d 100644 --- a/components/Icons/icons.scss +++ b/components/Icons/icons.scss @@ -1,11 +1,14 @@ -@import "tc-includes"; +@import '~tc-ui/src/styles/tc-includes'; -.x-mark-icon { - color: $tc-gray-30; - fill: $tc-gray-30; - - &:hover { - color: $tc-black; - fill: $tc-black; +:global { + .x-mark-icon { + color: $tc-gray-30; + fill: $tc-gray-30; + + &:hover { + color: $tc-black; + fill: $tc-black; + } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/ImageViewer/ImageViewer.scss b/components/ImageViewer/ImageViewer.scss index afd8c14dc..64e59b1cc 100644 --- a/components/ImageViewer/ImageViewer.scss +++ b/components/ImageViewer/ImageViewer.scss @@ -1,106 +1,109 @@ -.ImageViewer { - - main { - width : 100vw; - height: 100vh; - padding: 20px; - padding-top: 10px; - - .content { - overflow: hidden; - text-align: center; - width: 100%; - - .slideshow { +:global { + .ImageViewer { + + main { + width : 100vw; + height: 100vh; + padding: 20px; + padding-top: 10px; + + .content { + overflow: hidden; + text-align: center; width: 100%; - .icon.arrow { - width: 33px; - height: 74px; - } - - .preview { - overflow: hidden; - text-align: center; - padding: 20px 0; - - .previous, .next { - min-width: 50px; - - .arrow-previous, .arrow-next { - margin: auto - } - - .arrow-next { - margin: auto - } + + .slideshow { + width: 100%; + .icon.arrow { + width: 33px; + height: 74px; } - - .image { - width: 100%; - max-width: 1000px; - margin-right: 80px; - margin-left: 80px; - - .img-container { + + .preview { + overflow: hidden; + text-align: center; + padding: 20px 0; + + .previous, .next { + min-width: 50px; + + .arrow-previous, .arrow-next { + margin: auto + } + + .arrow-next { + margin: auto + } + } + + .image { width: 100%; - height: 100%; - max-height: 800px; max-width: 1000px; - - .bg-image { - margin-top: 40px; - background-size: contain; - background-repeat: no-repeat; + margin-right: 80px; + margin-left: 80px; + + .img-container { width: 100%; - - &.zoomed { - overflow: auto; - - img { - &:hover { - cursor: zoom-out; + height: 100%; + max-height: 800px; + max-width: 1000px; + + .bg-image { + margin-top: 40px; + background-size: contain; + background-repeat: no-repeat; + width: 100%; + + &.zoomed { + overflow: auto; + + img { + &:hover { + cursor: zoom-out; + } } } - } - - &:hover { - cursor: zoom-in; + + &:hover { + cursor: zoom-in; + } } } } } - } - - .thumbnails { - text-align: center; - max-width: 100vw; - padding: 20px; - min-height: 100px; - overflow: auto; - white-space: nowrap; - - > * { - display: inline-block; - margin: 10px; - position: relative; - - &.elevated { - opacity: 0.4; + + .thumbnails { + text-align: center; + max-width: 100vw; + padding: 20px; + min-height: 100px; + overflow: auto; + white-space: nowrap; + + > * { + display: inline-block; + margin: 10px; + position: relative; + + &.elevated { + opacity: 0.4; + } } - } - - button { - img { - width : 60px; - height : 50px; - display: block; + + button { + img { + width : 60px; + height : 50px; + display: block; + } } } } } } } + } - + \ No newline at end of file diff --git a/components/ImageViewerHeader/ImageViewerHeader.scss b/components/ImageViewerHeader/ImageViewerHeader.scss index d5359f422..332c2724f 100644 --- a/components/ImageViewerHeader/ImageViewerHeader.scss +++ b/components/ImageViewerHeader/ImageViewerHeader.scss @@ -1,58 +1,61 @@ -@import 'tc-includes'; - -.ImageViewerHeader { - - main { - width: 100vw; - padding: 20px; - - > hr { - height : 2px; - width : 100%; - margin-top: 20px; - } - - .header { - width : 100%; - - .user { - min-width: 240px; - - .titles { - text-align: left; - margin-left: 15px; - max-width: 225px; - overflow: hidden; - - .name { - font-size : 16px; - font-weight: 200; - } - - .title { - color: $tc-gray-20; - } - } +@import '~tc-ui/src/styles/tc-includes'; + +:global { + .ImageViewerHeader { + + main { + width: 100vw; + padding: 20px; + + > hr { + height : 2px; + width : 100%; + margin-top: 20px; } - - .icons { - text-align: right; - margin-right: 60px; - - .icon { - width: 25px; - height: 25px; - } - - .icon.download { - width: 22px; - height: 25px; + + .header { + width : 100%; + + .user { + min-width: 240px; + + .titles { + text-align: left; + margin-left: 15px; + max-width: 225px; + overflow: hidden; + + .name { + font-size : 16px; + font-weight: 200; + } + + .title { + color: $tc-gray-20; + } + } } - - > * { - margin-left: 15px; + + .icons { + text-align: right; + margin-right: 60px; + + .icon { + width: 25px; + height: 25px; + } + + .icon.download { + width: 22px; + height: 25px; + } + + > * { + margin-left: 15px; + } } } } } } + \ No newline at end of file diff --git a/components/Loader/LoaderStyle.scss b/components/Loader/LoaderStyle.scss index 8f3efc4a7..d5e60ae72 100644 --- a/components/Loader/LoaderStyle.scss +++ b/components/Loader/LoaderStyle.scss @@ -1,61 +1,64 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.Loader { - position : absolute; - display : flex; - top : 0; - left : 0; - width : 100%; - height : 100%; - justify-content: center; - align-items : center; - - .Loader__container { - padding : 25px; - // background-color: $primary-color; - opacity : .98; - border-radius : 10px; +:global { + .Loader { + position : absolute; + display : flex; + top : 0; + left : 0; + width : 100%; + height : 100%; + justify-content: center; + align-items : center; + + .Loader__container { + padding : 25px; + // background-color: $primary-color; + opacity : .98; + border-radius : 10px; + } + + .Loader__loader { + width: 50px; + height: 50px; + border-top : 10px solid $tc-gray-neutral-dark; + border-right : 10px solid $tc-gray-neutral-dark; + border-bottom : 10px solid $tc-gray-neutral-dark; + border-left : 10px solid $tc-gray-neutral-light; + -webkit-transform: translateZ(0); + -ms-transform : translateZ(0); + transform : translateZ(0); + -webkit-animation: load8 .8s infinite linear; + animation : load8 .8s infinite linear; + } + .Loader__loader, + .Loader__loader:after { + border-radius: 50%; + } + + } - - .Loader__loader { - width: 50px; - height: 50px; - border-top : 10px solid $tc-gray-neutral-dark; - border-right : 10px solid $tc-gray-neutral-dark; - border-bottom : 10px solid $tc-gray-neutral-dark; - border-left : 10px solid $tc-gray-neutral-light; - -webkit-transform: translateZ(0); - -ms-transform : translateZ(0); - transform : translateZ(0); - -webkit-animation: load8 .8s infinite linear; - animation : load8 .8s infinite linear; + + @-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } - .Loader__loader, - .Loader__loader:after { - border-radius: 50%; + + @keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } - - } - -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} \ No newline at end of file + \ No newline at end of file diff --git a/components/ManageSteps/ManageSteps.scss b/components/ManageSteps/ManageSteps.scss index b332f91a0..523de43d0 100644 --- a/components/ManageSteps/ManageSteps.scss +++ b/components/ManageSteps/ManageSteps.scss @@ -1,58 +1,60 @@ -.ManageSteps { - h5 { - font-weight: bold; - } - - .StepRow { - justify-content: center; - } - - hr { - height: 10px; - margin: 20px 0 30px 0; - } - - .project-Steps { - margin-top: 60px; - - > header { - button { - padding: 4px 40px; - } +:global { + .ManageSteps { + h5 { + font-weight: bold; } - - .column-headers { - margin-top: 15px; - font-weight: normal; - - li { - &:nth-child(1) { - min-width: 162px; - } - - &:nth-child(2), &:nth-child(3), &:nth-child(4) { - min-width: 135px; - margin-left: 20px; - } - - &:nth-child(5) { - min-width: 162px; - margin: 0px 10px 0px 30px; + + .StepRow { + justify-content: center; + } + + hr { + height: 10px; + margin: 20px 0 30px 0; + } + + .project-Steps { + margin-top: 60px; + + > header { + button { + padding: 4px 40px; } - - &:nth-child(6) { - min-width: 162px; - margin-right: 35px; + } + + .column-headers { + margin-top: 15px; + font-weight: normal; + + li { + &:nth-child(1) { + min-width: 162px; + } + + &:nth-child(2), &:nth-child(3), &:nth-child(4) { + min-width: 135px; + margin-left: 20px; + } + + &:nth-child(5) { + min-width: 162px; + margin: 0px 10px 0px 30px; + } + + &:nth-child(6) { + min-width: 162px; + margin-right: 35px; + } } } - } - - .Steps { - > li { - margin-top: 25px; + + .Steps { + > li { + margin-top: 25px; + } } } } -} \ No newline at end of file +} diff --git a/components/ManageSteps/ManageStepsExamples.scss b/components/ManageSteps/ManageStepsExamples.scss index d1b9fdec2..cc915f7ea 100644 --- a/components/ManageSteps/ManageStepsExamples.scss +++ b/components/ManageSteps/ManageStepsExamples.scss @@ -1,5 +1,7 @@ -.ManageStepsExamples { - padding: 40px; -} \ No newline at end of file +:global { + .ManageStepsExamples { + padding: 40px; + } +} diff --git a/components/MenuBar/MenuBar.scss b/components/MenuBar/MenuBar.scss index 2ce513c2d..f391d5165 100644 --- a/components/MenuBar/MenuBar.scss +++ b/components/MenuBar/MenuBar.scss @@ -1,59 +1,62 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.MenuBar { - display: flex; - @include roboto-medium; - - &.horizontal { - flex-direction: row; - justify-content: center; - - li { - display: flex; +:global { + .MenuBar { + display: flex; + @include roboto-medium; + + &.horizontal { + flex-direction: row; justify-content: center; - margin: 0px 15px; + + li { + display: flex; + justify-content: center; + margin: 0px 15px; + } } - } - - &.vertical { - flex-direction: column; - - li { - padding: 10px 15px; + + &.vertical { + flex-direction: column; + + li { + padding: 10px 15px; + } } - } - - li { - display: flex; - - &.selected { - border-bottom: 2px solid $tc-orange-70; - + + li { + display: flex; + + &.selected { + border-bottom: 2px solid $tc-orange-70; + + a { + color: $tc-black; + } + } + + &.mobile { + width: 30px; + } + a { - color: $tc-black; + display: inline-block; + @include roboto-medium; + font-size: $tc-label-lg; + color: $tc-gray-50; + line-height: 32px; + &:hover{ + color: $tc-black; + } } } - - &.mobile { - width: 30px; - } - - a { - display: inline-block; - @include roboto-medium; - font-size: $tc-label-lg; - color: $tc-gray-50; - line-height: 32px; - &:hover{ - color: $tc-black; + + li:hover { + a { + color: white; } } + } - - li:hover { - a { - color: white; - } - } - } + \ No newline at end of file diff --git a/components/MenuBar/MenuBarExamples.scss b/components/MenuBar/MenuBarExamples.scss index cde8e1ded..1ec38a04b 100644 --- a/components/MenuBar/MenuBarExamples.scss +++ b/components/MenuBar/MenuBarExamples.scss @@ -1,7 +1,10 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.MenuBar { - &.vertical { - width: 100px; +:global { + .MenuBar { + &.vertical { + width: 100px; + } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index c8ca0b2c5..437e48ea2 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -1,182 +1,185 @@ -// this is to include tc styles in the output library -@import 'tc-includes'; - -/* Breakpoints - update as necessary */ -$mobile: 768px; -$super-wide: 1376px; - -.Navbar { - height: 60px; - background-color: $tc-gray-neutral-light; - border-bottom: 1px solid $tc-gray-30; - padding: 10px 20px; - width: 100%; - - @media screen and (max-width: $mobile) { - height: 40px; - padding-top: 0; - padding-bottom: 0; - } - - .topcoder-logo { - width: 56px; - height: 24px; - margin-right: 40px; - flex: 0 0 auto; - display: flex; - align-items: center; - - @media screen and (min-width: $super-wide) { - width: 155px; - - &.non-mobile { - display: flex; - } - &.mobile { - display: none; - } - } - - @media screen and (max-width: $super-wide) { - width: 40px; - margin-right: 15px; - - &.non-mobile { - display: none; - } - &.mobile { - display: flex; - } - } - } - - .search-bar-wrap { - flex: 1 1 auto; - margin-right: 35px; - - @media screen and (min-width: $super-wide) { - margin-right: 32px; - } - +:global { + // this is to include tc styles in the output library + @import '~tc-ui/src/styles/tc-includes'; + + /* Breakpoints - update as necessary */ + $mobile: 768px; + $super-wide: 1376px; + + .Navbar { + height: 60px; + background-color: $tc-gray-neutral-light; + border-bottom: 1px solid $tc-gray-30; + padding: 10px 20px; + width: 100%; + @media screen and (max-width: $mobile) { - flex: 0 0 60px; - order: 2; - width: 60px; height: 40px; + padding-top: 0; + padding-bottom: 0; + } + + .topcoder-logo { + width: 56px; + height: 24px; + margin-right: 40px; + flex: 0 0 auto; display: flex; - margin-right: 0px; - justify-content: center; align-items: center; - } - - &:hover { - background-color: $tc-gray-40; - - .mobile-wrap { - svg > g > g { - stroke: white; + + @media screen and (min-width: $super-wide) { + width: 155px; + + &.non-mobile { + display: flex; + } + &.mobile { + display: none; } } - } - - .mobile-wrap { - display: none; - - @media screen and (max-width: $mobile) { - display: block; - margin: auto; + + @media screen and (max-width: $super-wide) { + width: 40px; + margin-right: 15px; + + &.non-mobile { + display: none; + } + &.mobile { + display: flex; + } } } - - .SearchBar { - margin-right: 45px; - max-width: 789px; - - @media screen and (max-width: $mobile) { - display: none; + + .search-bar-wrap { + flex: 1 1 auto; + margin-right: 35px; + + @media screen and (min-width: $super-wide) { + margin-right: 32px; } - } - } - - .MenuBar { - margin-right: 30px; - - @media screen and (max-width: $mobile) { - order: 1; - margin-right: 7px; - } - - &.horizontal li { - position: relative; - - a { - @media screen and (max-width: $mobile) { - padding-bottom: 0; - position: absolute; - top: 50%; - transform: translateY(-50%); - } + + @media screen and (max-width: $mobile) { + flex: 0 0 60px; + order: 2; + width: 60px; + height: 40px; + display: flex; + margin-right: 0px; + justify-content: center; + align-items: center; } - } - } - - .menu-wrap { - flex: 0 0 auto; - position: relative; - display: flex; - align-items: center; - - @media screen and (max-width :$mobile) { - width: 40px; - height: 40px; - order: 3; - cursor: pointer; - + &:hover { background-color: $tc-gray-40; - + .mobile-wrap { svg > g > g { stroke: white; } } } - } - - .mobile-wrap { - display: none; - - @media screen and (max-width: $mobile) { - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + + .mobile-wrap { + display: none; + + @media screen and (max-width: $mobile) { + display: block; + margin: auto; + } + } + + .SearchBar { + margin-right: 45px; + max-width: 789px; + + @media screen and (max-width: $mobile) { + display: none; + } } } - - .quick-links-wrap { + + .MenuBar { margin-right: 30px; - display: inline-block; - vertical-align: middle; - + @media screen and (max-width: $mobile) { - display: none; + order: 1; + margin-right: 7px; } - - .Dropdown { - right: -46px; - top: 10px; + + &.horizontal li { + position: relative; + + a { + @media screen and (max-width: $mobile) { + padding-bottom: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + } } } - - .UserDropdownMenu { - flex-shrink: 0; - background-color: transparent; - - @media screen and (max-width: $mobile) { + + .menu-wrap { + flex: 0 0 auto; + position: relative; + display: flex; + align-items: center; + + @media screen and (max-width :$mobile) { + width: 40px; + height: 40px; + order: 3; + cursor: pointer; + + &:hover { + background-color: $tc-gray-40; + + .mobile-wrap { + svg > g > g { + stroke: white; + } + } + } + } + + .mobile-wrap { display: none; + + @media screen and (max-width: $mobile) { + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .quick-links-wrap { + margin-right: 30px; + display: inline-block; + vertical-align: middle; + + @media screen and (max-width: $mobile) { + display: none; + } + + .Dropdown { + right: -46px; + top: 10px; + } + } + + .UserDropdownMenu { + flex-shrink: 0; + background-color: transparent; + + @media screen and (max-width: $mobile) { + display: none; + } } } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/Navbar/NavbarExample.scss b/components/Navbar/NavbarExample.scss index 2b13c14a9..cef5cde9f 100644 --- a/components/Navbar/NavbarExample.scss +++ b/components/Navbar/NavbarExample.scss @@ -1,15 +1,18 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.search-results { - .exact-match, - .members, - .challenges { - border-bottom: 1px solid $tc-gray-40; - margin: 10px 0px; - padding: 0px 10px 10px 10px; - - h2 { - margin-bottom: 10px; +:global { + .search-results { + .exact-match, + .members, + .challenges { + border-bottom: 1px solid $tc-gray-40; + margin: 10px 0px; + padding: 0px 10px 10px 10px; + + h2 { + margin-bottom: 10px; + } } } } + \ No newline at end of file diff --git a/components/Panel/Panel.scss b/components/Panel/Panel.scss index 393d80cc8..ccae75eb1 100644 --- a/components/Panel/Panel.scss +++ b/components/Panel/Panel.scss @@ -1,26 +1,29 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $panel-header-text-color: #737380; $panel-header-bg-color: #DFDFE1; -.Panel { - .panel-header { - line-height : 16px; - font-size : 14px; - display : flex; - justify-content : space-between; - background-color: $panel-header-bg-color; - padding : 10px; - color : $panel-header-text-color - } - - .panel-body { - border-left : 1px solid $tc-gray-40; - border-right : 1px solid $tc-gray-40; - border-bottom : 1px solid $tc-gray-40; - padding: 10px; - overflow-x: visible; - overflow-y: scroll; - max-height: 252px; +:global { + .Panel { + .panel-header { + line-height : 16px; + font-size : 14px; + display : flex; + justify-content : space-between; + background-color: $panel-header-bg-color; + padding : 10px; + color : $panel-header-text-color + } + + .panel-body { + border-left : 1px solid $tc-gray-40; + border-right : 1px solid $tc-gray-40; + border-bottom : 1px solid $tc-gray-40; + padding: 10px; + overflow-x: visible; + overflow-y: scroll; + max-height: 252px; + } } } + \ No newline at end of file diff --git a/components/Prize/PrizeExamples.scss b/components/Prize/PrizeExamples.scss index 85a82f118..b9c584c8a 100644 --- a/components/Prize/PrizeExamples.scss +++ b/components/Prize/PrizeExamples.scss @@ -1,6 +1,9 @@ -.divStyle { - background-color: #47474F; - padding: 15px; - width: 400px; - height: 200px !important; +:global { + .divStyle { + background-color: #47474F; + padding: 15px; + width: 400px; + height: 200px !important; + } } + \ No newline at end of file diff --git a/components/Prize/PrizeItem.scss b/components/Prize/PrizeItem.scss index fa8117fd1..1750c0bd7 100644 --- a/components/Prize/PrizeItem.scss +++ b/components/Prize/PrizeItem.scss @@ -1,82 +1,85 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.TaggedValue { - display:inline-block; - height: 20px; - margin-right: 15px; - - .subText { - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-size: 13px; - line-height: 15px; - color: white; - font-weight: 500; - } - .tagged-value-bg{ - display: inline; - padding: 1px 4px 1px 4px; - min-width: 15px; - max-height: 15px; - background: $tc-gray-30; - border-radius: 8px; - text-align: center; - font-size: 11px; - line-height: 13px; - font-family: "Roboto-Black", Arial, Helvetica, sans-serif; - font-weight: bold; - color: $tc-gray-80; - } - -} - -.prize { - .TaggedValue:nth-child(1) { - .tagged-value-bg { - background: $tc-gold; +:global { + .TaggedValue { + display:inline-block; + height: 20px; + margin-right: 15px; + + .subText { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 13px; + line-height: 15px; + color: white; + font-weight: 500; } - } - .TaggedValue:nth-child(2) { - .tagged-value-bg { - background: $tc-silver; + .tagged-value-bg{ + display: inline; + padding: 1px 4px 1px 4px; + min-width: 15px; + max-height: 15px; + background: $tc-gray-30; + border-radius: 8px; + text-align: center; + font-size: 11px; + line-height: 13px; + font-family: "Roboto-Black", Arial, Helvetica, sans-serif; + font-weight: bold; + color: $tc-gray-80; } + } - - .TaggedValue:nth-child(3) { - .tagged-value-bg { - background: $tc-bronze; + + .prize { + .TaggedValue:nth-child(1) { + .tagged-value-bg { + background: $tc-gold; + } } - } -} - -.bonus { - .TaggedValue:nth-child(1) { - .tagged-value-bg { - background: $tc-purple-70; + .TaggedValue:nth-child(2) { + .tagged-value-bg { + background: $tc-silver; + } + } + + .TaggedValue:nth-child(3) { + .tagged-value-bg { + background: $tc-bronze; + } } } - .TaggedValue:nth-child(2) { - .tagged-value-bg { + + .bonus { + .TaggedValue:nth-child(1) { + .tagged-value-bg { background: $tc-purple-70; + } } - } - - .TaggedValue:nth-child(3) { - .tagged-value-bg { - background: $tc-dark-blue-70; + .TaggedValue:nth-child(2) { + .tagged-value-bg { + background: $tc-purple-70; + } + } + + .TaggedValue:nth-child(3) { + .tagged-value-bg { + background: $tc-dark-blue-70; + } } } -} - -.PrizeItems { - .title { - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-weight: bold; - font-size: 15px; - line-height: 18px; - color: white; - } - .items { - margin-top: 10px; + + .PrizeItems { + .title { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-weight: bold; + font-size: 15px; + line-height: 18px; + color: white; + } + .items { + margin-top: 10px; + } } + } - + \ No newline at end of file diff --git a/components/ProgressBar/ProgressBar.scss b/components/ProgressBar/ProgressBar.scss index 8ac5308d9..4b869fbb1 100644 --- a/components/ProgressBar/ProgressBar.scss +++ b/components/ProgressBar/ProgressBar.scss @@ -1,85 +1,88 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.ProgressBar { - .progress-box { - position: absolute; - width: 400px; - margin: auto; - - .checkpoint-line { - display: block; - margin-bottom: 5px; - height: 20px; - - .checkpoint-text { - position: absolute; - float: left; - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-weight: 500; - font-size: 13px; - line-height: 15px; - color: white; +:global { + .ProgressBar { + .progress-box { + position: absolute; + width: 400px; + margin: auto; + + .checkpoint-line { + display: block; + margin-bottom: 5px; + height: 20px; + + .checkpoint-text { + position: absolute; + float: left; + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 13px; + line-height: 15px; + color: white; + } } - } - .progress-ui { - width: 80%; - position: relative; - height: 8px; - - .progress-line { - top:0px; - position: absolute; - height: 4px; + .progress-ui { + width: 80%; + position: relative; + height: 8px; + + .progress-line { + top:0px; + position: absolute; + height: 4px; + width: 100%; + background-color: $tc-gray-20; + display: inline-block; + } + + .completion-line { + top:0px; + left:0px; + position: absolute; + height: 4px; + background-color: $tc-dark-blue-70; + display: inline-block; + border-right: 4px solid $tc-gray-80; + } + + .progress-circles { + width: 100%; + top:-5px; + display: block; + position: absolute; + + .circle { + position: absolute; + float: left; + background: $tc-gray-20; + border: 3px solid $tc-gray-80; + width: 13px; + height: 13px; + border-radius: 50%; + } + .completed { + background: $tc-dark-blue; + } + } + } + + .time-line { + display: block; + margin-bottom: 5px; + height: 20px; width: 100%; - background-color: $tc-gray-20; - display: inline-block; - } - - .completion-line { - top:0px; - left:0px; - position: absolute; - height: 4px; - background-color: $tc-dark-blue-70; - display: inline-block; - border-right: 4px solid $tc-gray-80; - } - - .progress-circles { - width: 100%; - top:-5px; - display: block; - position: absolute; - - .circle { + + .time-line-text { position: absolute; float: left; - background: $tc-gray-20; - border: 3px solid $tc-gray-80; - width: 13px; - height: 13px; - border-radius: 50%; - } - .completed { - background: $tc-dark-blue; + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 11px; + line-height: 15px; + color: $tc-gray-30; } } } - - .time-line { - display: block; - margin-bottom: 5px; - height: 20px; - width: 100%; - - .time-line-text { - position: absolute; - float: left; - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-size: 11px; - line-height: 15px; - color: $tc-gray-30; - } - } } } + \ No newline at end of file diff --git a/components/ProgressBar/ProgressBarExample.scss b/components/ProgressBar/ProgressBarExample.scss index 06c27f20c..a25f3cad1 100644 --- a/components/ProgressBar/ProgressBarExample.scss +++ b/components/ProgressBar/ProgressBarExample.scss @@ -1,6 +1,9 @@ -.divStyle { - background-color:#47474F; - - width:420px; - height: 90px; +:global { + .divStyle { + background-color:#47474F; + + width:420px; + height: 90px; + } } + \ No newline at end of file diff --git a/components/QuickLinks/QuickLinks.scss b/components/QuickLinks/QuickLinks.scss index 45c5ccdda..2dd4ba308 100644 --- a/components/QuickLinks/QuickLinks.scss +++ b/components/QuickLinks/QuickLinks.scss @@ -1,56 +1,59 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $link-text-hover-color: #7A7F83; -.QuickLinks { - position: relative; - display: inline-block; - - .dropdown-menu-header { - cursor: pointer; - } - - .Dropdown { - width: auto; - margin-top: 20px; - left: initial; - right: -16px; - - .dropdown-menu-list { - padding: 20px; - white-space: nowrap; - - .dropdown-menu-list-item { - display: inline-block; - cursor: pointer; - - .StandardListItem { - padding: 0; - - &:active, - &:hover { +:global { + .QuickLinks { + position: relative; + display: inline-block; + + .dropdown-menu-header { + cursor: pointer; + } + + .Dropdown { + width: auto; + margin-top: 20px; + left: initial; + right: -16px; + + .dropdown-menu-list { + padding: 20px; + white-space: nowrap; + + .dropdown-menu-list-item { + display: inline-block; + cursor: pointer; + + .StandardListItem { + padding: 0; + + &:active, + &:hover { + .label { + color: $link-text-hover-color; + } + } + .label { - color: $link-text-hover-color; + font-size: 12px; + line-height: 26px; + color: $tc-gray-90; } } - - .label { - font-size: 12px; - line-height: 26px; - color: $tc-gray-90; - } } - } - - .dropdown-menu-list-item:not(:last-child) { - margin-right: 30px; - text-align: center; + + .dropdown-menu-list-item:not(:last-child) { + margin-right: 30px; + text-align: center; + } } } + + .Dropdown:before { + right: 47px; + } + } - - .Dropdown:before { - right: 47px; - } - -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/QuickLinks/QuickLinksExample.scss b/components/QuickLinks/QuickLinksExample.scss index 1786c284d..46134365b 100644 --- a/components/QuickLinks/QuickLinksExample.scss +++ b/components/QuickLinks/QuickLinksExample.scss @@ -1,21 +1,24 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.example-wrap { - width: 332px; - background-color: #FAFAFB; - padding: 23px 30px; - position: relative; - - .QuickLinks { - position: absolute; - right: 30px; - - .dropdown-menu-header { +:global { + .example-wrap { + width: 332px; + background-color: #FAFAFB; + padding: 23px 30px; + position: relative; + + .QuickLinks { position: absolute; right: 30px; - top: 50%; - transform: translateY(-50%); - } + + .dropdown-menu-header { + position: absolute; + right: 30px; + top: 50%; + transform: translateY(-50%); + } + } + } - -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/RichDataTable/RichDataTableExample.scss b/components/RichDataTable/RichDataTableExample.scss index e69de29bb..136d06384 100644 --- a/components/RichDataTable/RichDataTableExample.scss +++ b/components/RichDataTable/RichDataTableExample.scss @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/RichDataTable/RichDataTableHeader.scss b/components/RichDataTable/RichDataTableHeader.scss index 2b6d1f9e6..50e55601d 100644 --- a/components/RichDataTable/RichDataTableHeader.scss +++ b/components/RichDataTable/RichDataTableHeader.scss @@ -1,41 +1,44 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.RichDataTableHeader { - display: flex; - align-items: center; - justify-content: space-between; - padding: calc(4 * #{$base_unit}); - margin: 0px auto; - border-bottom: 1px solid rgba(163, 163, 174, 0.3); - @media (max-width: 700px) { - display: block; - padding: calc(2 * #{$base_unit}); - } - background-color: $tc-gray-neutral-light; - - .rich-data-table-header-column { +:global { + .RichDataTableHeader { display: flex; - color: $tc-gray-50; align-items: center; - - &:hover { - color: $tc-black; + justify-content: space-between; + padding: calc(4 * #{$base_unit}); + margin: 0px auto; + border-bottom: 1px solid rgba(163, 163, 174, 0.3); + @media (max-width: 700px) { + display: block; + padding: calc(2 * #{$base_unit}); } - - &.sorted-asc::after { - content: ''; - background-image: url(./arrow-down-big.svg); - width: 10px; - height: 12px; - margin-left: calc(2 * #{$base_unit}); - } - - &.sorted-desc::after { - content: ''; - background-image: url(./arrow-up-big.svg); - width: 10px; - height: 12px; - margin-left: calc(2 * #{$base_unit}); + background-color: $tc-gray-neutral-light; + + .rich-data-table-header-column { + display: flex; + color: $tc-gray-50; + align-items: center; + + &:hover { + color: $tc-black; + } + + &.sorted-asc::after { + content: ''; + background-image: url(./arrow-down-big.svg); + width: 10px; + height: 12px; + margin-left: calc(2 * #{$base_unit}); + } + + &.sorted-desc::after { + content: ''; + background-image: url(./arrow-up-big.svg); + width: 10px; + height: 12px; + margin-left: calc(2 * #{$base_unit}); + } } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index c4d904cc9..24e26a3b6 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -1,157 +1,160 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.SearchBar { - @include roboto; - background: $tc-gray-80; - height: 30px; - width: 100%; - border: 0; - border-radius: 2px; - position: relative; - padding-left: 15px; - padding-right: 46px; - - &.state-empty { - .search-bar__clear { - display: none; +:global { + .SearchBar { + @include roboto; + background: $tc-gray-80; + height: 30px; + width: 100%; + border: 0; + border-radius: 2px; + position: relative; + padding-left: 15px; + padding-right: 46px; + + &.state-empty { + .search-bar__clear { + display: none; + } } - } - - .search-txt { - display: none; - color: white; - } - - &.state-empty:before { - content: "Search for projects"; - position: absolute; - left: 15px; - top: 50%; - text-align: left; - transform: translateY(-50%); - color: $tc-gray-40; - font-size: 13px; - line-height: 20px; - width: 75%; - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - } - - &.state-focused:before, - &.state-filled:before { - content: ""; - } - - &.state-filled, - &.state-focused { - border-color: $tc-gray-40; - padding-right: 88px; - background-color: white; - + .search-txt { - display: block; + display: none; + color: white; } - - .search-icon-wrap { - width: 88px; - background-color: $tc-dark-blue-90; - z-index: 20; - cursor: pointer; + + &.state-empty:before { + content: "Search for projects"; + position: absolute; + left: 15px; + top: 50%; + text-align: left; + transform: translateY(-50%); + color: $tc-gray-40; + font-size: 13px; + line-height: 20px; + width: 75%; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; } - } - - &.state-focused { + + &.state-focused:before, + &.state-filled:before { + content: ""; + } + + &.state-filled, + &.state-focused { + border-color: $tc-gray-40; + padding-right: 88px; + background-color: white; + + .search-txt { + display: block; + } + + .search-icon-wrap { + width: 88px; + background-color: $tc-dark-blue-90; + z-index: 20; + cursor: pointer; + } + } + + &.state-focused { + .search-typeahead-text { + display: block; + } + + .suggestions-panel { + display: block; + } + } + + .search-bar__text, .search-typeahead-text { - display: block; + @include roboto; + outline: 0px; + border: 0px none; + font-size: 17px; + color: $tc-gray-90; + line-height: 20px; + // NOTE: If uncommented, it causes problems with the proper alignment of + // the typeahead text. + // width: calc(100% - 15px - 46px); + position: absolute; + left: 0; + text-indent: 15px; + top: 50%; + transform: translateY(-50%); + background-color: transparent !important; + z-index: 20; + padding-left: 0px; + height: 30px; } - - .suggestions-panel { - display: block; + + .search-bar__text { + padding-right: 130px; + + &:hover, + &:focus { + border: none; + box-shadow: none; + } } - } - - .search-bar__text, - .search-typeahead-text { - @include roboto; - outline: 0px; - border: 0px none; - font-size: 17px; - color: $tc-gray-90; - line-height: 20px; - // NOTE: If uncommented, it causes problems with the proper alignment of - // the typeahead text. - // width: calc(100% - 15px - 46px); - position: absolute; - left: 0; - text-indent: 15px; - top: 50%; - transform: translateY(-50%); - background-color: transparent !important; - z-index: 20; - padding-left: 0px; - height: 30px; - } - - .search-bar__text { - padding-right: 130px; - - &:hover, - &:focus { - border: none; - box-shadow: none; + + .search-typeahead-text { + position: absolute; + color: $tc-gray-40; + display: none; + z-index: 20; + top: 19px; } - } - - .search-typeahead-text { - position: absolute; - color: $tc-gray-40; - display: none; - z-index: 20; - top: 19px; - } - - .search-bar__clear { - position: absolute; - top: 50%; - right: 110px; - transform: translateY(-50%); - cursor: pointer; - z-index: 20; - } - - .search-icon-wrap { - position: absolute; - right: 0; - top: 0; - height: 30px; - width: 37px; - background: $tc-gray-60 url("./ui-16px-2_zoom.svg") 10px 7px no-repeat; - border-radius: 0 2px 2px 0; - border-left: 1px solid $tc-black; - @include roboto; - font-size: 12px; - color: $tc-white; - padding-left: 36px; - text-align: left; - line-height: 30px; - } - - .suggestions-panel { - display: none; - position: absolute; - top: 30px; - left: 0; - width: 100%; - z-index: 1000; - - .loading-suggestions { + + .search-bar__clear { + position: absolute; + top: 50%; + right: 110px; + transform: translateY(-50%); + cursor: pointer; + z-index: 20; } - - .SearchSuggestions { - strong { - font-weight: 600; + + .search-icon-wrap { + position: absolute; + right: 0; + top: 0; + height: 30px; + width: 37px; + background: $tc-gray-60 url("./ui-16px-2_zoom.svg") 10px 7px no-repeat; + border-radius: 0 2px 2px 0; + border-left: 1px solid $tc-black; + @include roboto; + font-size: 12px; + color: $tc-white; + padding-left: 36px; + text-align: left; + line-height: 30px; + } + + .suggestions-panel { + display: none; + position: absolute; + top: 30px; + left: 0; + width: 100%; + z-index: 1000; + + .loading-suggestions { + } + + .SearchSuggestions { + strong { + font-weight: 600; + } } } } } + \ No newline at end of file diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index e6220d1c4..a9e46cde7 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -1,130 +1,133 @@ -@import 'tc-includes'; - -.SearchSuggestions { - margin-bottom: 30px; - background-color: white; - border: 1px solid $tc-gray-30; - box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3); - border-radius: 2px; - // min-height: 303px; - position: relative; - - .panel-header { - background-color: $tc-gray-neutral-light; - position: relative; - height: 36px; - padding-left: 14px; - - .label { - font-size: 12px; - line-height: 14px; - color: $tc-gray-30; - position: relative; - } - - .recent-search-panel-actions { - position: absolute; - right: 0; - top: 0; - height: 100%; - width: 51px; - text-align: center; - cursor: pointer; - - .recent-search-panel-action { - height: 100%; - - a, a:visited { - font-size: 12px; - line-height: 14px; - color: $tc-gray-30; - background-color: transparent; - border: 0px; - outline: 0px; - display: block; - width: 100%; - height: 100%; - padding-top: 10px; - } - } - - } - - .recent-search-panel-actions:hover { - background-color: rgba(159, 33, 237, 0.1); - - .recent-search-panel-action { - a, a:hover, a:active { - color: $tc-dark-blue; - border: 0px; - outline: 0px; - } - } - } - } - - .panel-body { - border: none; - padding: 0; - // padding-bottom: 5px; - - li.selected { - background-color: $tc-gray-neutral-dark; - } - - .StandardListItem { - align-items: initial; - text-align: left; - padding: 3px 14px; - cursor: pointer; - max-height: 36px; - - .label { - color: $tc-gray-90; - font-size: 16px; - line-height: 30px; - white-space: nowrap; - text-overflow: ellipsis; - width: 95%; - overflow-x: hidden; - overflow-y: hidden; - } - } - - .StandardListItem:hover { - background-color: $tc-gray-neutral-dark; - - } - - .footer-link { - width: 100%; - display:block; - height: 40px; - padding: 14px 15px; - background-color: $tc-dark-blue-10; - color: $tc-gray-90; - font-size: 12px; - line-height: 14px; - position: absolute; - bottom: 0; - border: 0px none; - outline: 0px none; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .footer-link:hover, .footer-link:active { - background-color: $tc-dark-blue-30; - color: $tc-black; - border: 0px none; - outline: 0px none; - } - } -} - -.SearchSuggestions.empty-state { - .panel-body { - padding-bottom: 45px; - } +@import '~tc-ui/src/styles/tc-includes'; + +:global { + .SearchSuggestions { + margin-bottom: 30px; + background-color: white; + border: 1px solid $tc-gray-30; + box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3); + border-radius: 2px; + // min-height: 303px; + position: relative; + + .panel-header { + background-color: $tc-gray-neutral-light; + position: relative; + height: 36px; + padding-left: 14px; + + .label { + font-size: 12px; + line-height: 14px; + color: $tc-gray-30; + position: relative; + } + + .recent-search-panel-actions { + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 51px; + text-align: center; + cursor: pointer; + + .recent-search-panel-action { + height: 100%; + + a, a:visited { + font-size: 12px; + line-height: 14px; + color: $tc-gray-30; + background-color: transparent; + border: 0px; + outline: 0px; + display: block; + width: 100%; + height: 100%; + padding-top: 10px; + } + } + + } + + .recent-search-panel-actions:hover { + background-color: rgba(159, 33, 237, 0.1); + + .recent-search-panel-action { + a, a:hover, a:active { + color: $tc-dark-blue; + border: 0px; + outline: 0px; + } + } + } + } + + .panel-body { + border: none; + padding: 0; + // padding-bottom: 5px; + + li.selected { + background-color: $tc-gray-neutral-dark; + } + + .StandardListItem { + align-items: initial; + text-align: left; + padding: 3px 14px; + cursor: pointer; + max-height: 36px; + + .label { + color: $tc-gray-90; + font-size: 16px; + line-height: 30px; + white-space: nowrap; + text-overflow: ellipsis; + width: 95%; + overflow-x: hidden; + overflow-y: hidden; + } + } + + .StandardListItem:hover { + background-color: $tc-gray-neutral-dark; + + } + + .footer-link { + width: 100%; + display:block; + height: 40px; + padding: 14px 15px; + background-color: $tc-dark-blue-10; + color: $tc-gray-90; + font-size: 12px; + line-height: 14px; + position: absolute; + bottom: 0; + border: 0px none; + outline: 0px none; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .footer-link:hover, .footer-link:active { + background-color: $tc-dark-blue-30; + color: $tc-black; + border: 0px none; + outline: 0px none; + } + } + } + + .SearchSuggestions.empty-state { + .panel-body { + padding-bottom: 45px; + } + } } + \ No newline at end of file diff --git a/components/SelectDropdown/SelectDropdown.scss b/components/SelectDropdown/SelectDropdown.scss index 45c1d2805..b4f73ad97 100644 --- a/components/SelectDropdown/SelectDropdown.scss +++ b/components/SelectDropdown/SelectDropdown.scss @@ -1,12 +1,15 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.SelectDropdown { - border: none; - padding: 0px; - min-width: 100px; - margin-left: calc(2 * #{$base_unit}); - - .Dropdown { - top: 20px; +:global { + .SelectDropdown { + border: none; + padding: 0px; + min-width: 100px; + margin-left: calc(2 * #{$base_unit}); + + .Dropdown { + top: 20px; + } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/StandardListItem/StandardListItemStyles.scss b/components/StandardListItem/StandardListItemStyles.scss index 9774b7012..fe86f8431 100644 --- a/components/StandardListItem/StandardListItemStyles.scss +++ b/components/StandardListItem/StandardListItemStyles.scss @@ -1,55 +1,58 @@ $breakpoint-mobile: 768px; -.StandardListItem { - - display: flex; - align-items: center; - - text-align: center; - - width: 100%; - - padding: 15px 20px; - - @media (max-width: $breakpoint-mobile) { - padding: 12px 15px; - } - - &.top { - flex-direction: column-reverse; - - .icon { - width: 32px; - height: 32px; +:global { + .StandardListItem { + + display: flex; + align-items: center; + + text-align: center; + + width: 100%; + + padding: 15px 20px; + + @media (max-width: $breakpoint-mobile) { + padding: 12px 15px; } - - // Add margin only if label present - .label + .icon { - margin-bottom: 7px; + + &.top { + flex-direction: column-reverse; + + .icon { + width: 32px; + height: 32px; + } + + // Add margin only if label present + .label + .icon { + margin-bottom: 7px; + } } - } - - &.left { - flex-direction: row-reverse; - justify-content: flex-end; - - .label + .icon { - margin-right: 10px; + + &.left { + flex-direction: row-reverse; + justify-content: flex-end; + + .label + .icon { + margin-right: 10px; + } } - } - - &.right{ - justify-content: space-between; - - .label + .icon { - margin-left: 10px; + + &.right{ + justify-content: space-between; + + .label + .icon { + margin-left: 10px; + } } - } - - &.left, &.right { - .icon { - width: 16px; - height: 16px; + + &.left, &.right { + .icon { + width: 16px; + height: 16px; + } } } } + \ No newline at end of file diff --git a/components/StepRow/StepRow.scss b/components/StepRow/StepRow.scss index c2d69c5b7..0d55ab341 100644 --- a/components/StepRow/StepRow.scss +++ b/components/StepRow/StepRow.scss @@ -1,37 +1,39 @@ -.StepRow { - .name { - width: 162px; - } - - .DateTime { - margin-left: 20px; - width: 135px; - - &.disabled { - width: 138px; +:global { + .StepRow { + .name { + width: 162px; + } + + .DateTime { + margin-left: 20px; + width: 135px; + + &.disabled { + width: 138px; + } + } + + .Select { + width: 162px; + } + + .icon.warning { + margin-left: 10px; + } + + .types { + margin-left : 30px; + margin-right: 10px; + width : 162px; + } + + button { + + &.addButton { + margin-left: 15px; + } } } - - .Select { - width: 162px; - } - - .icon.warning { - margin-left: 10px; - } - - .types { - margin-left : 30px; - margin-right: 10px; - width : 162px; - } - - button { - - &.addButton { - margin-left: 15px; - } - } -} \ No newline at end of file +} diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss index add42616a..ae4a8244b 100644 --- a/components/SubNav/SubNav.scss +++ b/components/SubNav/SubNav.scss @@ -1,18 +1,21 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.SubNav { - background-color: $tc-gray-50; - - .StandardListItem { - padding: 20px 0px; - - .label { - color: $tc-gray-60; - } - - .label:active, - .label:hover { - color: white; +:global { + .SubNav { + background-color: $tc-gray-50; + + .StandardListItem { + padding: 20px 0px; + + .label { + color: $tc-gray-60; + } + + .label:active, + .label:hover { + color: white; + } } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/SubNav/SubNavExamples.scss b/components/SubNav/SubNavExamples.scss index 57c476ee2..309206967 100644 --- a/components/SubNav/SubNavExamples.scss +++ b/components/SubNav/SubNavExamples.scss @@ -1,8 +1,11 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.SubNavExamples { - > p { - border: 1px solid $tc-gray-40; - margin: 20px 0px; +:global { + .SubNavExamples { + > p { + border: 1px solid $tc-gray-40; + margin: 20px 0px; + } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/components/SubTrackDetails/SubTrackDetails.scss b/components/SubTrackDetails/SubTrackDetails.scss index 3b9e98ff0..6937914d5 100644 --- a/components/SubTrackDetails/SubTrackDetails.scss +++ b/components/SubTrackDetails/SubTrackDetails.scss @@ -1,52 +1,55 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $track-desc-text-color: #DCDCE0; -.SubTrackDetails{ - .heading { - height:20px; - - .title { - font-size: 15px; +:global { + .SubTrackDetails{ + .heading { + height:20px; + + .title { + font-size: 15px; + line-height: 18px; + margin-left: 11px; + color: white; + float: left; + font-weight: bold; + font-family: "Roboto", Arial, Helvetica, sans-serif; + } + + .develop { + @include tc-track-colors; + } + + .design { + @include tc-track-colors; + } + + .data { + @include tc-track-colors; + } + } + + p { + width: 290px; + font-size: 13px; line-height: 18px; - margin-left: 11px; - color: white; - float: left; - font-weight: bold; + margin-top: 7px; font-family: "Roboto", Arial, Helvetica, sans-serif; - } - - .develop { - @include tc-track-colors; + color: $tc-gray-20; } - - .design { - @include tc-track-colors; + + .verticalLine { + width: 4px; /* Use only border style */ + height: 19px; + display: block; + margin-right: 3px; + float: left; } - - .data { - @include tc-track-colors; + + .hidden { + display:none; } } - - p { - width: 290px; - font-size: 13px; - line-height: 18px; - margin-top: 7px; - font-family: "Roboto", Arial, Helvetica, sans-serif; - color: $tc-gray-20; - } - - .verticalLine { - width: 4px; /* Use only border style */ - height: 19px; - display: block; - margin-right: 3px; - float: left; - } - - .hidden { - display:none; - } } + \ No newline at end of file diff --git a/components/SubTrackDetails/SubTrackDetailsExample.scss b/components/SubTrackDetails/SubTrackDetailsExample.scss index c82df82d6..653e8d612 100644 --- a/components/SubTrackDetails/SubTrackDetailsExample.scss +++ b/components/SubTrackDetails/SubTrackDetailsExample.scss @@ -1,5 +1,8 @@ -.divStyle { - background-color:#47474F; - padding:20px; - width:320px +:global { + .divStyle { + background-color:#47474F; + padding:20px; + width:320px + } } + \ No newline at end of file diff --git a/components/SwitchButton/SwitchButton.scss b/components/SwitchButton/SwitchButton.scss index 4a93467aa..03be989bd 100644 --- a/components/SwitchButton/SwitchButton.scss +++ b/components/SwitchButton/SwitchButton.scss @@ -1,72 +1,75 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.SwitchButton { - position: relative; - display: flex; - align-items: center; - .label{ - width: 92px; - line-height: 20px; - font-size: 12px; - @include roboto; - color: $tc-gray-60; - } - label{ +:global { + .SwitchButton { + position: relative; display: flex; - margin: 0; - padding: 0; - height: 20px; - margin-top: 5px; - } - input[type="checkbox"] { - max-height: 0; - max-width: 0; - opacity: 0; - margin: 0; - position: absolute; - z-index:-1; - &:checked + i:before { - width: 35px; - background: $tc-dark-blue-90; + align-items: center; + .label{ + width: 92px; + line-height: 20px; + font-size: 12px; + @include roboto; + color: $tc-gray-60; } - &:checked + i:after { - left: 18px; + label{ + display: flex; + margin: 0; + padding: 0; + height: 20px; + margin-top: 5px; } - } - i { - display: inline-block; - position: relative; - text-indent: 60px; - height: 20px; - width: 35px; - border-radius: 10px; - margin: 0; - padding: 0; - background: $tc-gray-40; - &:before { - content: ""; + input[type="checkbox"] { + max-height: 0; + max-width: 0; + opacity: 0; + margin: 0; position: absolute; - display: block; + z-index:-1; + &:checked + i:before { + width: 35px; + background: $tc-dark-blue-90; + } + &:checked + i:after { + left: 18px; + } + } + i { + display: inline-block; + position: relative; + text-indent: 60px; height: 20px; - width: 20px; - top: 0; - left: 0; + width: 35px; border-radius: 10px; + margin: 0; + padding: 0; background: $tc-gray-40; - -webkit-transition: .25s ease-in-out; - } - &:after { - content: ""; - position: absolute; - display: block; - height: 14px; - width: 14px; - top: 3px; - left: 3px; - border-radius: 7px; - background: $tc-white; - cursor: pointer; - -webkit-transition: .25s ease-in-out; + &:before { + content: ""; + position: absolute; + display: block; + height: 20px; + width: 20px; + top: 0; + left: 0; + border-radius: 10px; + background: $tc-gray-40; + -webkit-transition: .25s ease-in-out; + } + &:after { + content: ""; + position: absolute; + display: block; + height: 14px; + width: 14px; + top: 3px; + left: 3px; + border-radius: 7px; + background: $tc-white; + cursor: pointer; + -webkit-transition: .25s ease-in-out; + } } } } + \ No newline at end of file diff --git a/components/TCFooter/TCFooter.scss b/components/TCFooter/TCFooter.scss index 966da35cb..be921d260 100644 --- a/components/TCFooter/TCFooter.scss +++ b/components/TCFooter/TCFooter.scss @@ -1,144 +1,147 @@ -@import 'tc-includes'; - -.TCFooter { - width: 100%; - background-color: $tc-gray-90; - padding: 1px 20px 30px 20px; - font-family: 'Roboto', Arial; - - .social-links { - font-size: 13px; - line-height: 1.2em; - text-align: center; - font-weight: normal; - margin: 30px 2px 0; - color: #fff; - - a { - display: inline-block; - background-size: contain; - background-repeat: no-repeat; - margin: 23px 0; - - + a { - margin-left: 30px; +@import '~tc-ui/src/styles/tc-includes'; + +:global { + .TCFooter { + width: 100%; + background-color: $tc-gray-90; + padding: 1px 20px 30px 20px; + font-family: 'Roboto', Arial; + + .social-links { + font-size: 13px; + line-height: 1.2em; + text-align: center; + font-weight: normal; + margin: 30px 2px 0; + color: #fff; + + a { + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + margin: 23px 0; + + + a { + margin-left: 30px; + } } } + + .copyright-notice { + text-align: center; + font-size: 12px; + line-height: 14px; + color: #656565; + } } - - .copyright-notice { - text-align: center; - font-size: 12px; - line-height: 14px; - color: #656565; - } -} - - -@media only screen and (max-width : 767px) { - - .TCFooter .other-nav-items.mobile { - - .Panel { - .panel-header { - padding-left: 15px; - padding-right: 15px; + + + @media only screen and (max-width : 767px) { + + .TCFooter .other-nav-items.mobile { + + .Panel { + .panel-header { + padding-left: 15px; + padding-right: 15px; + } + .panel-body { + padding: 0px; + } } - .panel-body { - padding: 0px; + .MenuBar { + width: 100%; + li { + background-color: white; + border-bottom: 1px solid $tc-gray-neutral-dark; + } } } - .MenuBar { - width: 100%; - li { - background-color: white; - border-bottom: 1px solid $tc-gray-neutral-dark; - } + + .TCFooter .menu-item { + display: none; + margin-top: 30px; } - } - .TCFooter .menu-item { - display: none; - margin-top: 30px; - } - - .TCFooter .other-nav-items.non-mobile { - display: none; - } - - .TCFooter .other-nav-items.mobile { - display: block; - } - - .menu-visible .TCFooter .menu-item { - display: block; - } - - .TCFooter .social-links { - - a { - width: 27px; - height: 27px; - margin-top: 10px; - - svg { + .TCFooter .other-nav-items.non-mobile { + display: none; + } + + .TCFooter .other-nav-items.mobile { + display: block; + } + + .menu-visible .TCFooter .menu-item { + display: block; + } + + .TCFooter .social-links { + + a { width: 27px; height: 27px; + margin-top: 10px; + + svg { + width: 27px; + height: 27px; + } } } } -} - -@media only screen and (min-width : 768px) { - - .TCFooter .other-nav-items.non-mobile { - .MenuBar { - padding-top: 20px; - - li + li { - margin-left: 15px; - } - - li { - text-align: center; - font-weight: normal; - - a { - color: #fff; - font-size: 16px; - line-height: 21px; + + @media only screen and (min-width : 768px) { + + .TCFooter .other-nav-items.non-mobile { + .MenuBar { + padding-top: 20px; + + li + li { + margin-left: 15px; } - a:hover { - color: #0096ff; + + li { + text-align: center; + font-weight: normal; + + a { + color: #fff; + font-size: 16px; + line-height: 21px; + } + a:hover { + color: #0096ff; + } } } } - } - - .TCFooter .copyright-notice { - font-size: 15px; - color: #fff; - } - - .TCFooter .other-nav-items.non-mobile { - display: block; - } - - .TCFooter .other-nav-items.mobile { - display: none; - } - - .TCFooter .social-links { - - a { - width: 32px; - height: 32px; - margin-top: 13px; - - svg { + + .TCFooter .copyright-notice { + font-size: 15px; + color: #fff; + } + + .TCFooter .other-nav-items.non-mobile { + display: block; + } + + .TCFooter .other-nav-items.mobile { + display: none; + } + + .TCFooter .social-links { + + a { width: 32px; height: 32px; + margin-top: 13px; + + svg { + width: 32px; + height: 32px; + } } } } } + \ No newline at end of file diff --git a/components/Tabs/Tabs.scss b/components/Tabs/Tabs.scss index 0fe470d14..b10ab3a12 100644 --- a/components/Tabs/Tabs.scss +++ b/components/Tabs/Tabs.scss @@ -1,50 +1,53 @@ -/* can't use 'tabs', because of conflicts */ - -@import "~tc-ui/src/styles/variables"; -@import "~tc-ui/src/styles/typography"; - -.tabs { - width: 300px; - list-style-type: none; - margin: 0 auto 50px auto; - ul{ - text-align: center; - display: -webkit-flex; - display: flex; - width:300px; - } - li { - // -webkit-flex: initial; - flex: initial; - width: 50%; - padding: 10px 0; - text-align: center; - background-color: $tc-gray-neutral-light; - @include roboto-medium; - font-size: 15px; - line-height:20px; - background: $tc-white; - border: 1px solid $tc-gray-30; - cursor: pointer; - a{ - color: $tc-gray-80; - } - &:hover { +:global { + /* can't use 'tabs', because of conflicts */ + + @import "~tc-ui/src/styles/variables"; + @import "~tc-ui/src/styles/typography"; + + .tabs { + width: 300px; + list-style-type: none; + margin: 0 auto 50px auto; + ul{ + text-align: center; + display: -webkit-flex; + display: flex; + width:300px; } - &.active { - background-color: $tc-dark-blue-90; - border: 1px solid $tc-dark-blue-90; + li { + // -webkit-flex: initial; + flex: initial; + width: 50%; + padding: 10px 0; + text-align: center; + background-color: $tc-gray-neutral-light; + @include roboto-medium; + font-size: 15px; + line-height:20px; + background: $tc-white; + border: 1px solid $tc-gray-30; + cursor: pointer; a{ - color: $tc-white; + color: $tc-gray-80; + } + &:hover { + } + &.active { + background-color: $tc-dark-blue-90; + border: 1px solid $tc-dark-blue-90; + a{ + color: $tc-white; + } + } + &:first-child{ + border-radius: 2px 0 0 2px; + border-right:none; + } + &:last-child{ + border-radius: 0 2px 2px 0 ; + border-left:none; } - } - &:first-child{ - border-radius: 2px 0 0 2px; - border-right:none; - } - &:last-child{ - border-radius: 0 2px 2px 0 ; - border-left:none; } } } + \ No newline at end of file diff --git a/components/TaggedValue/TaggedValue.scss b/components/TaggedValue/TaggedValue.scss index ad3adb4df..fae1fbe36 100644 --- a/components/TaggedValue/TaggedValue.scss +++ b/components/TaggedValue/TaggedValue.scss @@ -1,35 +1,38 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.TaggedValue { - display:inline-block; - height: 20px; - .tagged-value-bg { - display: inline; - padding: 4px 4px 1px 4px; - min-width: 15px; - max-height: 15px; - background: $tc-dark-blue-70; - border-radius: 8px; - text-align: center; - font-size: 11px; - line-height: 13px; - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-weight: bold; - color: $tc-gray-80; - padding: 1px 7px 2px 7px; +:global { + .TaggedValue { + display:inline-block; + height: 20px; + .tagged-value-bg { + display: inline; + padding: 4px 4px 1px 4px; + min-width: 15px; + max-height: 15px; + background: $tc-dark-blue-70; + border-radius: 8px; + text-align: center; + font-size: 11px; + line-height: 13px; + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-weight: bold; + color: $tc-gray-80; + padding: 1px 7px 2px 7px; + } + .subText { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 13px; + line-height: 15px; + color: white; + font-weight: 500; + padding-left: 6px; + padding-right: 10px; + } } - .subText { - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-size: 13px; - line-height: 15px; - color: white; - font-weight: 500; - padding-left: 6px; - padding-right: 10px; - } -} -.count-one { - .tagged-value-bg { - background: $tc-purple-70; + .count-one { + .tagged-value-bg { + background: $tc-purple-70; + } } } + \ No newline at end of file diff --git a/components/TaggedValue/TaggedValueExamples.scss b/components/TaggedValue/TaggedValueExamples.scss index 96df153fe..88a033595 100644 --- a/components/TaggedValue/TaggedValueExamples.scss +++ b/components/TaggedValue/TaggedValueExamples.scss @@ -2,26 +2,29 @@ $gray: #47474F; $blue : #59A7FF; $purple: #B47DD6; -.sample1 { - .tagged-value-bg { - background-color: $purple; - color: white; +:global { + .sample1 { + .tagged-value-bg { + background-color: $purple; + color: white; + } + .subText { + color: white; + } } - .subText { - color: white; + + .sample2 { + .tagged-value-bg { + color: $gray; + } + .subText{ + color: lightblue; + } } -} - -.sample2 { - .tagged-value-bg { - color: $gray; + .divStyle { + background-color:#47474F; + padding:20px; + width:320px } - .subText{ - color: lightblue; - } -} -.divStyle { - background-color:#47474F; - padding:20px; - width:320px } + \ No newline at end of file diff --git a/components/TaggedValue/TaggedValueList.scss b/components/TaggedValue/TaggedValueList.scss index 9f72bf301..c86f83b41 100644 --- a/components/TaggedValue/TaggedValueList.scss +++ b/components/TaggedValue/TaggedValueList.scss @@ -1,9 +1,11 @@ -.TaggedValueList { - .items{ - white-space: normal; - } - .items-scroll { - overflow-x: scroll; - white-space: nowrap; - } -} \ No newline at end of file +:global { + .TaggedValueList { + .items{ + white-space: normal; + } + .items-scroll { + overflow-x: scroll; + white-space: nowrap; + } + } +} diff --git a/components/Tooltip/Tooltip.scss b/components/Tooltip/Tooltip.scss index 882fd97c2..bbb063d80 100644 --- a/components/Tooltip/Tooltip.scss +++ b/components/Tooltip/Tooltip.scss @@ -1,112 +1,115 @@ -@import 'tc-includes'; -.Tooltip { - @include roboto; - position: relative; - - .tooltip-popper { - z-index: 1000; - } - - .fade-enter { - opacity: 0; - transition: opacity 0.2s ease; - } - - .fade-enter-active { - opacity: 1; - } - - .tooltip-pointer { - position: absolute; - transform: rotate(45deg); - } - - [data-placement="top"] .tooltip-pointer { - border-right: 1px solid rgba($tc-black, 0.2); - border-bottom: 1px solid rgba($tc-black, 0.2); - bottom: -5px !important; - } - - [data-placement="bottom"] .tooltip-pointer { - border-left: 1px solid rgba($tc-black, 0.2); - border-top: 1px solid rgba($tc-black, 0.2); - top: -5px !important; - } - - - .tooltip-target { - cursor: default; - display: block; - &.click-pointer { - cursor: pointer; - } - } - .tooltip-container { +@import '~tc-ui/src/styles/tc-includes'; +:global { + .Tooltip { + @include roboto; position: relative; - white-space: nowrap; - display: block; - visibility: visible; - opacity: 1; - transition: opacity 0s linear; - z-index: 1000; - &.tooltip-hide { - visibility: hidden; + + .tooltip-popper { + z-index: 1000; + } + + .fade-enter { opacity: 0; + transition: opacity 0.2s ease; } - .tooltip-content-container { - width: 100%; - overflow: hidden; - padding: 15px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - .tooltip-body { - font-size: 14px; - padding: 0; - margin: 0; - } + + .fade-enter-active { + opacity: 1; } - } //tooltip theme styling - &.default { - .tooltip-content-container { - background-color: $tc-gray-80; - color: #fff; //additional theme styling goes here - .tooltip-pointer { - background-color: $tc-gray-80; - } - .tooltip-body { - color: #fff; - } - } - } //tooltip light theme - &.light { + .tooltip-pointer { - background-color: $tc-white; - border-style: solid; - border-color: $tc-gray-neutral-dark; + position: absolute; + transform: rotate(45deg); } - + [data-placement="top"] .tooltip-pointer { - border-width: 0px 1px 1px 0px; + border-right: 1px solid rgba($tc-black, 0.2); + border-bottom: 1px solid rgba($tc-black, 0.2); + bottom: -5px !important; } - + [data-placement="bottom"] .tooltip-pointer { - border-width: 1px 0px 0px 1px; + border-left: 1px solid rgba($tc-black, 0.2); + border-top: 1px solid rgba($tc-black, 0.2); + top: -5px !important; } - - [data-placement="right"] .tooltip-pointer { - border-width: 0px 0px 1px 1px; + + + .tooltip-target { + cursor: default; + display: block; + &.click-pointer { + cursor: pointer; + } } - - .tooltip-content-container { - background-color: $tc-white; - border: 1px solid $tc-gray-neutral-dark; - box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.17); - color: $tc-gray-80; //additional theme styling goes here - - .tooltip-body { - color: $tc-gray-80; + .tooltip-container { + position: relative; + white-space: nowrap; + display: block; + visibility: visible; + opacity: 1; + transition: opacity 0s linear; + z-index: 1000; + &.tooltip-hide { + visibility: hidden; + opacity: 0; + } + .tooltip-content-container { + width: 100%; + overflow: hidden; + padding: 15px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + .tooltip-body { + font-size: 14px; + padding: 0; + margin: 0; + } + } + } //tooltip theme styling + &.default { + .tooltip-content-container { + background-color: $tc-gray-80; + color: #fff; //additional theme styling goes here + .tooltip-pointer { + background-color: $tc-gray-80; + } + .tooltip-body { + color: #fff; + } + } + } //tooltip light theme + &.light { + .tooltip-pointer { + background-color: $tc-white; + border-style: solid; + border-color: $tc-gray-neutral-dark; + } + + [data-placement="top"] .tooltip-pointer { + border-width: 0px 1px 1px 0px; + } + + [data-placement="bottom"] .tooltip-pointer { + border-width: 1px 0px 0px 1px; + } + + [data-placement="right"] .tooltip-pointer { + border-width: 0px 0px 1px 1px; + } + + .tooltip-content-container { + background-color: $tc-white; + border: 1px solid $tc-gray-neutral-dark; + box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.17); + color: $tc-gray-80; //additional theme styling goes here + + .tooltip-body { + color: $tc-gray-80; + } } } } } + \ No newline at end of file diff --git a/components/Tooltip/TooltipExamples.scss b/components/Tooltip/TooltipExamples.scss index 532704acb..a773486fe 100644 --- a/components/Tooltip/TooltipExamples.scss +++ b/components/Tooltip/TooltipExamples.scss @@ -1,70 +1,73 @@ -.tooltip-examples-container { - - .Tooltip { - .tooltip-target { - position: relative; - width: 150px; - background-color: #999; - height: 150px; - margin: 10px; - font-size: 14px; - font-weight: bold; - color: #fff; - text-align: center; - padding: 15px; - - &#tooltip-1 { - } - - &#tooltip-2 { - width: 50%; - background-color: #C00; - } - - &#tooltip-3 { - margin-left: 25%; - background-color: #CC0; - - } - - &#tooltip-4 { - margin-left: 50%; - background-color: #0C0; - } - - &#tooltip-5 { - margin-left: 75%; - background-color: #00C; - } - - &#tooltip-6 { - margin-left: calc(100% - 200px); - padding: 0; - height: 200px; - width: 200px; - } - - &#tooltip-7, &#tooltip-8 { - background-color: steelblue; - height: 200px; - width: 200px; +:global { + .tooltip-examples-container { + + .Tooltip { + .tooltip-target { + position: relative; + width: 150px; + background-color: #999; + height: 150px; + margin: 10px; + font-size: 14px; + font-weight: bold; + color: #fff; + text-align: center; + padding: 15px; + + &#tooltip-1 { + } + + &#tooltip-2 { + width: 50%; + background-color: #C00; + } + + &#tooltip-3 { + margin-left: 25%; + background-color: #CC0; + + } + + &#tooltip-4 { + margin-left: 50%; + background-color: #0C0; + } + + &#tooltip-5 { + margin-left: 75%; + background-color: #00C; + } + + &#tooltip-6 { + margin-left: calc(100% - 200px); + padding: 0; + height: 200px; + width: 200px; + } + + &#tooltip-7, &#tooltip-8 { + background-color: steelblue; + height: 200px; + width: 200px; + } } - } - //custom theme - &.blue-round { - .tooltip-content-container { - background-color: #0000CC; - border: 3px solid #000; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - .tooltip-pointer { + //custom theme + &.blue-round { + .tooltip-content-container { background-color: #0000CC; - } - .tooltip-body { - color: #FFF; + border: 3px solid #000; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + .tooltip-pointer { + background-color: #0000CC; + } + .tooltip-body { + color: #FFF; + } } } } } } + \ No newline at end of file diff --git a/components/UploadedFile/UploadedFileStyles.scss b/components/UploadedFile/UploadedFileStyles.scss index 5d9ee001a..08c4f6b85 100644 --- a/components/UploadedFile/UploadedFileStyles.scss +++ b/components/UploadedFile/UploadedFileStyles.scss @@ -1,74 +1,77 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.UploadedFile { - width: 203px; - - main { - background-color: $tc-gray-neutral-light; - height : 135px; - position : relative; - - .document-icon { - width : 35px; - height: 35px; +:global { + .UploadedFile { + width: 203px; + + main { + background-color: $tc-gray-neutral-light; + height : 135px; + position : relative; + + .document-icon { + width : 35px; + height: 35px; + } + + .preview { + height : 135px; + width : 100%; + background-size: cover; + } } - - .preview { - height : 135px; - width : 100%; - background-size: cover; + + .cross { + height: 10px; + width: 10px; } - } - - .cross { - height: 10px; - width: 10px; - } - - .file-name { - margin-top: 5px; - - p { - @include ellipsis; - max-width: 180px; - - font-weight: 400; + + .file-name { + margin-top: 5px; + + p { + @include ellipsis; + max-width: 180px; + + font-weight: 400; + } } - } - - .progress { - position : absolute; - width : 100%; - left : 0; - top : 100px; - padding : 13px 20px 7px 20px; - background-color: rgba(255,255,255,0.7); - } - - progress { - width: 100%; - } - - .failed { - button { - margin-top: 10px; + + .progress { + position : absolute; + width : 100%; + left : 0; + top : 100px; + padding : 13px 20px 7px 20px; + background-color: rgba(255,255,255,0.7); } - - img { - opacity: .60; + + progress { + width: 100%; } - } - - textarea { - margin-top : 5px; - width : 100%; - height : 82px; - border-width: 0; - color : $tc-gray-50; - - &:focus { - border-width: 1px; - color: $tc-gray-80; + + .failed { + button { + margin-top: 10px; + } + + img { + opacity: .60; + } + } + + textarea { + margin-top : 5px; + width : 100%; + height : 82px; + border-width: 0; + color : $tc-gray-50; + + &:focus { + border-width: 1px; + color: $tc-gray-80; + } } } } + \ No newline at end of file diff --git a/components/UploadedFiles/UploadedFilesStyles.scss b/components/UploadedFiles/UploadedFilesStyles.scss index c38f44123..43df11f5a 100644 --- a/components/UploadedFiles/UploadedFilesStyles.scss +++ b/components/UploadedFiles/UploadedFilesStyles.scss @@ -1,10 +1,13 @@ -.UploadedFiles { - margin-right: auto; - margin-left: auto; - - li { - margin: 12px 10px; +:global { + .UploadedFiles { + margin-right: auto; + margin-left: auto; + + li { + margin: 12px 10px; + } } } + \ No newline at end of file diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index 018eb2a4a..ff1e83c06 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -1,89 +1,92 @@ -@import 'tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; -.UserDropdownMenu { - padding: 15px 20px; - display: inline-block; - position: relative; - - &.non-logged-in { - .tc-btn-primary { - margin-left: 7px; - } - .tc-btn { - white-space: nowrap; - } - } - - .dropdown-menu-header { - cursor: pointer; - display: flex; - align-items: center; - - .user-image { - display: inline-block; - width: 35px; - height: 35px; - margin-right: 10px; - border-radius: 50%; - vertical-align: middle; - } - - .username { - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-size: 14px; - line-height: 16px; - @include ellipsis; - margin: 0px; - margin-right: 10px; - display: inline-block; - overflow: hidden; - - @media screen and (max-width: 768px) { - display: none; +:global { + .UserDropdownMenu { + padding: 15px 20px; + display: inline-block; + position: relative; + + &.non-logged-in { + .tc-btn-primary { + margin-left: 7px; + } + .tc-btn { + white-space: nowrap; } } - - .dropdown-arrow { - position: relative; - top: 2px; - display: inline-block; - } - } - - .Dropdown { - margin-top: 8px; - padding-bottom: 10px; - width: 96%; - - ul { - padding: 0; - - .user-menu-item { - padding: 0 20px; - - a { - font-weight: 400; + + .dropdown-menu-header { + cursor: pointer; + display: flex; + align-items: center; + + .user-image { + display: inline-block; + width: 35px; + height: 35px; + margin-right: 10px; + border-radius: 50%; + vertical-align: middle; + } + + .username { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + @include ellipsis; + margin: 0px; + margin-right: 10px; + display: inline-block; + overflow: hidden; + + @media screen and (max-width: 768px) { + display: none; } } - - .user-menu-item:hover { - background-color: $tc-gray-neutral-dark; + + .dropdown-arrow { + position: relative; + top: 2px; + display: inline-block; } } - - ul:first-child { - padding-top: 10px; - } - - ul:not(:last-child) { - li:last-child a { - border-bottom: 1px solid $tc-gray-neutral-dark; - display: block; + + .Dropdown { + margin-top: 8px; + padding-bottom: 10px; + width: 96%; + + ul { + padding: 0; + + .user-menu-item { + padding: 0 20px; + + a { + font-weight: 400; + } + } + + .user-menu-item:hover { + background-color: $tc-gray-neutral-dark; + } + } + + ul:first-child { + padding-top: 10px; + } + + ul:not(:last-child) { + li:last-child a { + border-bottom: 1px solid $tc-gray-neutral-dark; + display: block; + } } } - } - - .Dropdown:before { - right: 13px; + + .Dropdown:before { + right: 13px; + } } } + \ No newline at end of file