[#2112] Move Segment CSS into c-segment.vue (#2113)

The segment component CSS currently resides in the c-authorship-file component. Moving it to the segment component would make it easier to edit the segment component in the future. Let's move the CSS into c-segment.vue.
reposense · Feb 19, 2024 · fdb1892 · fdb1892
1 parent b103e28
commit fdb1892
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 74 deletions.
diff --git a/frontend/src/components/c-authorship-file.vue b/frontend/src/components/c-authorship-file.vue
@@ -347,78 +347,5 @@ export default defineComponent({
  padding-left: 4rem;
  }
  }
-
- .segment {
- border-left: .25rem solid mui-color('green');
-
- .code {
- background-color: mui-color('github', 'authored-code-background');
- padding-left: 1rem;
- }
-
- .line-number {
- color: mui-color('grey');
- float: left;
- // Not allowing user to select text
- -webkit-touch-callout: none;
- /* iOS Safari */
- -webkit-user-select: none;
- /* Safari */
- -khtml-user-select: none;
- /* Konqueror HTML */
- -moz-user-select: none;
- /* Firefox */
- -ms-user-select: none;
- /* Internet Explorer/Edge */
- user-select: none;
- /* Non-prefixed version, currently supported by Chrome and Opera */
- width: 2rem;
-
- // overwrite all hljs colors
- [class^='hljs'] {
- color: mui-color('grey');
- }
- }
-
- .line-content {
- padding-left: 2rem;
- word-break: break-word;
- }
-
- &.untouched {
- $grey: mui-color('grey', '400');
- border-left: .25rem solid $grey;
- height: 20px;
- /* height of a single line of code */
- position: relative;
-
- &.active {
- height: auto;
-
- .code {
- background-color: mui-color('white');
- }
- }
-
- .closer {
- cursor: pointer;
- // custom margin for position of toggle icon
- margin: .2rem 0 0 -.45rem;
- position: absolute;
-
- &.bottom {
- //custom margin for position of toggle icon at the bottom of segment
- margin: -1.05rem 0 0 -.45rem;
- }
-
- .icon {
- background-color: mui-color('white');
- color: mui-color('grey');
- width: .75em;
- }
- }
- }
- }
-
 }
 </style>
diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
@@ -69,6 +69,78 @@ export default defineComponent({
 });
 </script>
 
-<style lang="css">
+<style lang="scss" scoped>
 @import '../styles/hightlight-js-style.css';
+
+.segment {
+ border-left: .25rem solid mui-color('green');
+
+ .code {
+ background-color: mui-color('github', 'authored-code-background');
+ padding-left: 1rem;
+ }
+
+ .line-number {
+ color: mui-color('grey');
+ float: left;
+ // Not allowing user to select text
+ -webkit-touch-callout: none;
+ /* iOS Safari */
+ -webkit-user-select: none;
+ /* Safari */
+ -khtml-user-select: none;
+ /* Konqueror HTML */
+ -moz-user-select: none;
+ /* Firefox */
+ -ms-user-select: none;
+ /* Internet Explorer/Edge */
+ user-select: none;
+ /* Non-prefixed version, currently supported by Chrome and Opera */
+ width: 2rem;
+
+ // overwrite all hljs colors
+ [class^='hljs'] {
+ color: mui-color('grey');
+ }
+ }
+
+ .line-content {
+ padding-left: 2rem;
+ word-break: break-word;
+ }
+
+ &.untouched {
+ $grey: mui-color('grey', '400');
+ border-left: .25rem solid $grey;
+ height: 20px;
+ /* height of a single line of code */
+ position: relative;
+
+ &.active {
+ height: auto;
+
+ .code {
+ background-color: mui-color('white');
+ }
+ }
+
+ .closer {
+ cursor: pointer;
+ // custom margin for position of toggle icon
+ margin: .2rem 0 0 -.45rem;
+ position: absolute;
+
+ &.bottom {
+ //custom margin for position of toggle icon at the bottom of segment
+ margin: -1.05rem 0 0 -.45rem;
+ }
+
+ .icon {
+ background-color: mui-color('white');
+ color: mui-color('grey');
+ width: .75em;
+ }
+ }
+ }
+}
 </style>