fixed scss file

Author: amur-bashirov

examples/Web Applications/Framework Examples/React/ApiKeyAuthApp/src/App.scss

@@ -1,34 +1,47 @@
-@use "@ni/nimble-react/styles/tokens" as *;
+
+@use '@ni/nimble-react/styles/tokens' as *;
+
 
 body {
   background-color: #f5f5f5;
   overflow-y: auto;
-  margin: 0;
+  margin: 0; 
   font: $ni-nimble-body-font;
 }
 
-.header {
+.header{
   background-color: #e6e6e6;
   box-sizing: border-box;
   display: grid;
+  /* grid-template-columns: repeat(auto-fit, 220px); */
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 2%;
+
   width: 100%;
   min-height: 120px;
-  padding: 0 1%;
+  padding-left: 1%;
+  padding-right: 1%;
 }
 
 .header a {
   color: inherit;
   text-decoration: none;
+}
+
+
+.header a{
   background-color: #e6e6e6;
-  margin: 4% 0 5% 0;
+  margin-top: 4%;
+  margin-bottom: 5%;
   display: flex;
   flex-direction: column;
-  padding: 3%;
+  padding-top: 3%;
+  padding-left: 3%;
+  padding-right: 3%;
+  padding-bottom: 3%;
 }
 
-.header a:hover {
+.header a:hover{
   background-color: white;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
   border: 1px solid #26a97c;
@@ -40,7 +53,139 @@ body {
   text-align: center;
 }
 
-.head_text {
-  padding: 0 5%;
+.head_text{
+  padding-left: 5%;
+  padding-right: 5%;
   font-size: 16px;
 }
+
+
+
+
+
+.page {
+  min-height: 100vh;  
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;               
+}
+
+.main_description{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.button_and_title{
+  display: flex;          
+  flex-direction: row;
+  align-items: center;    
+  gap: 16px;              
+  flex-direction: row;
+  margin-bottom: 0.25%;
+}
+.button{
+  margin-top: 0.5%;
+  margin-left: 0.5%;
+}
+
+.API_title {
+  align-self: center;
+  margin-top: 12px;         
+  margin-left: 41% !important;
+  font-family: "Source Sans 3", Arial, sans-serif;
+  color: #333;
+  margin-bottom: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+.API_method_and_path {
+  display: flex;
+  color: #044123; 
+  align-items: flex-start;   
+  gap: 8px;                  
+  margin-left: 1%;
+}
+
+.API_description{
+  color: #044123;
+  padding: 1%;
+}
+
+.method {
+  background-color: #009b65;
+  color: #f5f5f5;
+  padding: 4px 10px;
+  display: inline-block;
+  align-items: center;
+  line-height: 1;
+  margin-top: 1%;
+  border-radius:10px;
+  font-size: 18px;
+}
+
+.path {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  margin-top: 1.2%;
+  font-size: 18px;
+}
+
+
+
+.API {
+  background-color:  #e6e6e6;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column; 
+  max-width: 60%;
+  min-width: 60%;
+  height: auto;
+  padding: 0;
+  margin-left: 0;
+  margin-top: 0%;
+  font-size: 18px;
+  /* padding-left: 1%;
+  padding-right: 1%; */
+}
+
+.API_response {
+  background-color: #ffffff;
+  padding: 15px;
+  margin-top: 10px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid #e0e0e0;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.API_description_title {
+  font-weight: bold;
+  color: #044123;
+  padding: 1%;
+}