Fix css, scss formatting

CropperBlazor · Aug 2, 2024 · ad064a7 · ad064a7
1 parent 46669f0
commit ad064a7
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 62 deletions.
diff --git a/src/Cropper.Blazor/Client/Models/DocStrings.cs b/src/Cropper.Blazor/Client/Models/DocStrings.cs
@@ -38,9 +38,9 @@ public static string GetMemberDescription(string saveTypename, MemberInfo member
             return GetDocStrings(name);
         }
 
-        public static string GetEnumDescription(string enumName, string? enumValue)
+        public static string GetEnumDescription(string enumName, string? enum-value)
         {
-            string name = $"{enumName}_enum_{enumValue}";
+            string name = $"{enumName}_enum_{enum-value}";
 
             return GetDocStrings(name);
         }

diff --git a/src/Cropper.Blazor/Client/Pages/Crop/Examples/CropPolygonImage_ScriptCode.html b/src/Cropper.Blazor/Client/Pages/Crop/Examples/CropPolygonImage_ScriptCode.html
@@ -1,7 +1,7 @@
 <div class="mud-codeblock">
 	<div class="html">
 		<pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;</span><span class="html-element-name">script</span><span class="html-tag-delimiter">&gt;</span>
 	window.getPolygonImage = (sourceCanvas, path) => {
 		const canvas = document.createElement('canvas');
 		const context = canvas.getContext('2d');
@@ -28,7 +28,7 @@
 
 		return canvas.toDataURL("image/png", 1);
 	}
-<span class="htmlTagDelimiter">&lt;&#47;</span><span class="htmlElementName">script</span> <span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;&#47;</span><span class="html-element-name">script</span> <span class="html-tag-delimiter">&gt;</span>
 </pre>
 	</div>
 </div>
diff --git a/src/Cropper.Blazor/Client/Pages/Crop/Examples/CropRoundImage_ScriptCode.html b/src/Cropper.Blazor/Client/Pages/Crop/Examples/CropRoundImage_ScriptCode.html
@@ -1,7 +1,7 @@
 <div class="mud-codeblock">
 	<div class="html">
 		<pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;</span><span class="html-element-name">script</span><span class="html-tag-delimiter">&gt;</span>
 	window.getEllipseImage = (sourceCanvas) => {
 		const createdCanvas = document.createElement('canvas');
 		const contextCanvas = createdCanvas.getContext('2d');
@@ -20,7 +20,7 @@
 
 		return createdCanvas.toDataURL("image/png", 1);
 	}
-<span class="htmlTagDelimiter">&lt;&#47;</span><span class="htmlElementName">script</span> <span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;&#47;</span><span class="html-element-name">script</span> <span class="html-tag-delimiter">&gt;</span>
 </pre>
 	</div>
 </div>
diff --git a/src/Cropper.Blazor/Client/Pages/CropZoom/Examples/MinMaxZoomRatio_ScriptCode.html b/src/Cropper.Blazor/Client/Pages/CropZoom/Examples/MinMaxZoomRatio_ScriptCode.html
@@ -1,7 +1,7 @@
 <div class="mud-codeblock">
 	<div class="html">
 		<pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;</span><span class="html-element-name">script</span><span class="html-tag-delimiter">&gt;</span>
 	window.overrideOnZoomCropperEvent = (minZoomRatio, maxZoomRatio) => {
 		window.cropper.onZoom = function (imageObject, event, correlationId) {
 			const jSEventData = this.getJSEventData(event, correlationId);
@@ -17,7 +17,7 @@
 			}
 		};
 	};
-<span class="htmlTagDelimiter">&lt;&#47;</span><span class="htmlElementName">script</span> <span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;&#47;</span><span class="html-element-name">script</span> <span class="html-tag-delimiter">&gt;</span>
 </pre>
 	</div>
 </div>
diff --git a/src/Cropper.Blazor/Client/Pages/ManualMarkdown/InstallScriptManualCode.html b/src/Cropper.Blazor/Client/Pages/ManualMarkdown/InstallScriptManualCode.html
@@ -1,7 +1,7 @@
 <div class="mud-codeblock">
 	<div class="html">
 <pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">script</span> <span class="htmlAttributeName">src</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Cropper.Blazor/cropper.min.js</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span><span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">/script</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="html-tag-delimiter">&lt;</span><span class="html-element-name">script</span> <span class="html-attribute-name">src</span><span class="html-operator">=</span><span class="quot">&quot;</span><span class="html-attribute-value">_content/Cropper.Blazor/cropper.min.js</span><span class="quot">&quot;</span><span class="html-tag-delimiter">&gt;</span><span class="html-tag-delimiter">&lt;</span><span class="html-element-name">/script</span><span class="html-tag-delimiter">&gt;</span>
 </pre>
 	</div>
 </div>
diff --git a/src/Cropper.Blazor/Client/Pages/ManualMarkdown/InstallServicesOverrideGlobalCode.html b/src/Cropper.Blazor/Client/Pages/ManualMarkdown/InstallServicesOverrideGlobalCode.html
@@ -6,7 +6,7 @@
 <span class="comment">// Override full global path to cropperJSInterop.min.js module</span>
 <span class="localVar">builder</span>.Services.<span class="function">AddCropper</span>(<span class="keyword">new</span> <span class="class">CropperJsInteropOptions</span>()
 {
-	IsActiveGlobalPath = <span class="sharpVariable">true</span>,
+	IsActiveGlobalPath = <span class="sharp-variable">true</span>,
 	GlobalPathToCropperModule = <span class="string">"{StartUrlWithPath}/_content/Cropper.Blazor/cropperJsInterop.min.js"</span>
 });
 </pre>

diff --git a/src/Cropper.Blazor/Client/Styles/Cropper.Blazor.Client.scss b/src/Cropper.Blazor/Client/Styles/Cropper.Blazor.Client.scss
@@ -210,7 +210,7 @@
 }
 
 .cropper-face {
-    opacity: 10%;
+    opacity: 0.1;
 }
 
 .img-container.cropper-face-close .cropper-container .cropper-crop-box .cropper-face {

diff --git a/src/Cropper.Blazor/Client/Styles/components/docspage.scss b/src/Cropper.Blazor/Client/Styles/components/docspage.scss
@@ -87,10 +87,7 @@
 
     & .docs-frame-absolute {
         position: absolute;
-        bottom: 0;
-        left: 0;
-        top: 0;
-        right: auto;
+        inset: 0 auto 0 0;
         width: 100%;
         height: 100%;
 

diff --git a/src/Cropper.Blazor/Client/Styles/layout/_mainlayout.scss b/src/Cropper.Blazor/Client/Styles/layout/_mainlayout.scss
@@ -1,18 +1,18 @@
 .docs-title {
-    font-family: 'Public Sans', 'Roboto', 'Arial', sans-serif;
+    font-family: 'Public Sans', Roboto, Arial, sans-serif;
     font-weight: 600;
     font-size: 3.75rem;
 }
 
 .docs-title-description {
-    font-family: 'Public Sans', 'Roboto', 'Arial', sans-serif;
+    font-family: 'Public Sans', Roboto, Arial, sans-serif;
     font-weight: 500;
     line-height: 1.75;
     font-size: 1.1rem;
     margin: 0 4px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
     .docs-title {
         font-size: 2.5rem;
     }
@@ -48,7 +48,7 @@
     }
 
     .mud-button {
-        font-family: 'Public Sans', 'Roboto', 'Arial', sans-serif;
+        font-family: 'Public Sans', Roboto, Arial, sans-serif;
         font-weight: 500;
         line-height: 1.75;
         letter-spacing: 0.02857em;
@@ -75,7 +75,7 @@
 .docs-brand-text {
     letter-spacing: 0.1rem;
     font-weight: 500;
-    font-family: 'Roboto', sans-serif;
+    font-family: Roboto, sans-serif;
     margin-inline-start: 12px;
     user-select: none;
 }
@@ -92,7 +92,7 @@
     }
 }
 
-@media (max-width: 960px) {
+@media (width <= 960px) {
     :root {
         --mud-drawer-width-left: 300px !important;
     }

diff --git a/src/Cropper.Blazor/Client/Styles/layout/_markdown.scss b/src/Cropper.Blazor/Client/Styles/layout/_markdown.scss
@@ -1,46 +1,46 @@
 .mud-landingpage-editor {
     & .html, .codearea {
-        & .htmlTagDelimiter {
+        & .html-tag-delimiter {
             color: #979797;
         }
 
-        & .htmlElementName {
+        & .html-element-name {
             color: #988ef1;
         }
 
-        & .htmlAttributeName {
+        & .html-attribute-name {
             color: #27b5b5;
         }
 
-        & .htmlOperator, .quot {
+        & .html-operator, .quot {
             color: #c8c8c8;
         }
 
-        & .htmlAttributeValue {
+        & .html-attribute-value {
             color: #ededed;
         }
 
-        & .htmlLink {
+        & .html-link {
             color: #61afef;
             text-decoration: underline;
         }
 
         & .enum {
             color: #b4eb8f;
-            background-color: rgba(255, 255, 255, 0.15);
+            background-color: rgb(255 255 255 / 15%);
         }
 
-        & .enumValue, .sharpVariable {
+        & .enum-value, .sharp-variable {
             color: #ededed;
-            background-color: rgba(255, 255, 255, 0.15);
+            background-color: rgb(255 255 255 / 15%);
         }
 
         & .keyword {
             color: #61afef;
-            background-color: rgba(255, 255, 255, 0.15);
+            background-color: rgb(255 255 255 / 15%);
         }
 
-        & .atSign {
+        & .at-sign {
             color: #8323d8;
         }
 
@@ -50,7 +50,7 @@
     }
 
     & .csharp {
-        & .atSign {
+        & .at-sign {
             color: #000;
             background-color: #d2d295;
         }
@@ -110,7 +110,7 @@
 
     & .css {
         & .property {
-            color: hsl(76, 21%, 52%);
+            color: hsl(76deg 21% 52%);
         }
 
         & .comment {
@@ -119,7 +119,7 @@
     }
 
     & .csharp {
-        & .atSign {
+        & .at-sign {
             color: #8323d8;
         }
 
@@ -159,19 +159,19 @@
             color: #57a64a;
         }
 
-        & .htmlElementName {
+        & .html-element-name {
             color: #7e6fffff;
         }
 
-        & .htmlAttributeName {
+        & .html-attribute-name {
             color: #8323d8;
         }
 
-        & .htmlAttributeValue {
+        & .html-attribute-value {
             color: #ff4081;
         }
 
-        & .htmlOperator {
+        & .html-operator {
             color: #737373;
         }
 
@@ -195,28 +195,28 @@
             user-select: all;
         }
 
-        & .htmlTagDelimiter {
+        & .html-tag-delimiter {
             color: #979797;
         }
 
-        & .htmlElementName {
+        & .html-element-name {
             color: var(--mud-palette-primary);
             font-weight: 600;
         }
 
-        & .htmlAttributeName {
+        & .html-attribute-name {
             color: #8323d8;
         }
 
-        & .htmlOperator, .quot {
+        & .html-operator, .quot {
             color: #737373;
         }
 
-        & .htmlAttributeValue {
+        & .html-attribute-value {
             color: #ff4081;
         }
 
-        & .htmlLink {
+        & .html-link {
             color: #ff4081;
             text-decoration: underline;
         }
@@ -226,7 +226,7 @@
             background-color: var(--mud-palette-grey-light);
         }
 
-        & .enumValue, .sharpVariable {
+        & .enum-value, .sharp-variable {
             color: var(--mud-palette-text-primary);
             background-color: var(--mud-palette-grey-light);
         }
@@ -236,7 +236,7 @@
             background-color: var(--mud-palette-grey-light);
         }
 
-        & .atSign {
+        & .at-sign {
             color: #8323d8;
         }
 

diff --git a/src/Cropper.Blazor/Client/Styles/layout/_updateAvaibleDetector.scss b/src/Cropper.Blazor/Client/Styles/layout/_updateAvaibleDetector.scss
@@ -1,4 +1,4 @@
-@media (min-width: 0) and (max-width: 510px) {
+@media (width >= 0) and (width <= 510px) {
     .mud-snackbar-location-bottom-right {
         right: 0 !important;
     }

diff --git a/src/Cropper.Blazor/Cropper.Blazor.Client.Compiler/DocStrings.cs b/src/Cropper.Blazor/Cropper.Blazor.Client.Compiler/DocStrings.cs
@@ -90,8 +90,8 @@ public bool Execute()
 
                         foreach (string enumName in enumNames)
                         {
-                            Enum enumValue = (Enum)Enum.Parse(type, enumName);
-                            string doc = enumValue.GetDocumentation();
+                            Enum enum-value = (Enum)Enum.Parse(type, enumName);
+                            string doc = enum-value.GetDocumentation();
                             doc = NormalizeWord(doc);
                             doc = ConvertCrefToHTML(doc);
                             doc = ConvertMarkdownToHTML(doc);
@@ -162,7 +162,7 @@ private static string ConvertCrefToHTML(string markdownText)
                 }
                 else if (result.Contains("Cropper.Blazor.Models.CropperComponentType"))
                 {
-                    (string enumName, string enumItemName) = result.RemoveNamespaceFromEnumValue();
+                    (string enumName, string enumItemName) = result.RemoveNamespaceFromenum-value();
 
                     return $"<a target=\"_blank\" rel=\"noopener\" style=\"color: var(--mud-palette-primary); \" href=\"api/{enumName}\">{enumName}.{enumItemName}</a>";
                 }

diff --git a/src/Cropper.Blazor/Cropper.Blazor.Client.Compiler/ExamplesMarkup.cs b/src/Cropper.Blazor/Cropper.Blazor.Client.Compiler/ExamplesMarkup.cs
@@ -56,7 +56,7 @@ public bool Execute()
 
                     // Note: the @ creates problems and thus we replace it with an unlikely placeholder and in the markup replace back.
                     var html = formatter.GetHtmlString(blocks0, Languages.Html).Replace("PlaceholdeR", "@");
-                    html = AttributePostprocessing(html).Replace("@", "<span class=\"atSign\">&#64;</span>");
+                    html = AttributePostprocessing(html).Replace("@", "<span class=\"at-sign\">&#64;</span>");
 
                     var currentCode = string.Empty;
                     if (File.Exists(markupPath))
@@ -73,7 +73,7 @@ public bool Execute()
                     {
                         cb.AddLine(
                             formatter.GetHtmlString("@code" + blocks[1], Languages.CSharp)
-                                .Replace("@", "<span class=\"atSign\">&#64;</span>")
+                                .Replace("@", "<span class=\"at-sign\">&#64;</span>")
                                 .ToLfLineEndings());
                     }
 
@@ -118,7 +118,7 @@ public static string AttributePostprocessing(string html)
         {
             return Regex.Replace(
                 html,
-                @"<span class=""htmlAttributeValue"">&quot;(?'value'.*?)&quot;</span>",
+                @"<span class=""html-attribute-value"">&quot;(?'value'.*?)&quot;</span>",
                 new MatchEvaluator(m =>
                     {
                         var value = m.Groups["value"].Value;
@@ -136,15 +136,15 @@ private static string AttributeValuePostprocessing(string value)
             if (Regex.IsMatch(value, "^[A-Z][A-Za-z0-9]+[.][A-Za-z][A-Za-z0-9]+$"))
             {
                 var tokens = value.Split('.');
-                return $"<span class=\"enum\">{tokens[0]}</span><span class=\"enumValue\">.{tokens[1]}</span>";
+                return $"<span class=\"enum\">{tokens[0]}</span><span class=\"enum-value\">.{tokens[1]}</span>";
             }
 
             if (Regex.IsMatch(value, "^@[A-Za-z0-9]+$"))
             {
-                return $"<span class=\"sharpVariable\">{value}</span>";
+                return $"<span class=\"sharp-variable\">{value}</span>";
             }
 
-            return $"<span class=\"htmlAttributeValue\">{value}</span>";
+            return $"<span class=\"html-attribute-value\">{value}</span>";
         }
     }
 }
diff --git a/src/Cropper.Blazor/Cropper.Blazor.Shared/Extensions/MethodInfoExtensions.cs b/src/Cropper.Blazor/Cropper.Blazor.Shared/Extensions/MethodInfoExtensions.cs
@@ -271,7 +271,7 @@ public static string RemoveNamespace(this string value)
             return splittedValue[splittedValue.Length - 1];
         }
 
-        public static (string enumName, string enumItemName) RemoveNamespaceFromEnumValue(this string value)
+        public static (string enumName, string enumItemName) RemoveNamespaceFromenum-value(this string value)
         {
             var splittedValue = value.Split('.');
             var lengthValue = splittedValue.Length;