ag-design 1.0.75 → 1.0.78

package/base.css

@@ -777,6 +777,12 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-wb-inh{word-break: inherit;}
 .s-wb-ini{word-break: initial;}
 .s-wb-u{word-break: unset;}
+
+.s-c-b{clear: both;}
+.s-c-l{clear: left;}
+.s-c-r{clear: right;}
+.s-c-n{clear: none;}
+.s-c-u{clear: unset;}
  
 .t-h-1{font-family: var(--p-f);font-size: var(--f-s-7);}
 .t-h-1:has(> br):first-line{color: var(--c-1);font-family: var( --s-f);font-size:var(--f-s-6);}
@@ -1486,19 +1492,19 @@ article{animation: animate-in-and-out cubic-bezier(0.3,0.1,0.4,0.2);animation-ti
     .l-b.fflag.ff-lg{height: 27px !important;}
 }
 /* button start*/
-.btn-1{background: var(--c-1);color: var(--c-99);border-radius: var(--b-r-1);box-sizing: border-box;display: inline-block;font-weight: var(--f-w-6);font-size: var(--f-s-1);overflow: hidden;padding: 14px 20px;position: relative;text-decoration: none;transition: all 0.3s ease-in-out;width:max-content;}
+.btn-1{background: var(--c-1);color: var(--c-99);border-radius: var(--b-r-2);box-sizing: border-box;display: inline-block;font-weight: var(--f-w-6);font-size: var(--f-s-1);overflow: hidden;padding: 14px 20px;position: relative;text-decoration: none;transition: all 0.3s ease-in-out;width:max-content;}
 .btn-1:hover{background: var(--c-4);}
 .btn-1:active{transform: scale(0.95);background: var(--c-5);font-weight: var(--f-w-6);}
-.btn-2{background: var(--bg-t);border: 1px solid var(--c-1);color: var(--c-1);font-weight: var(--f-w-6);border-radius: var(--b-r-1);box-sizing: border-box;display: inline-block;font-size: var(--f-s-1);overflow: hidden;padding: 14px 20px;position: relative;text-decoration: none;transition: all 0.3s ease-in-out;}
-.btn-2:hover{background: var(--c-3);}
-.btn-2:active{transform: scale(0.95);background: var(--c-6);font-weight: var(--f-w-6);}
 
-.btn-3{color: var(--c-7 );border: transparent;display: inline-block;font-size: var(--f-s-2);overflow: hidden;position: relative;font-weight: var(--f-w-6);}
-.btn-4{color: var(--c-1);border: transparent;display: inline-block;font-size: var(--f-s-2);overflow: hidden;position: relative;font-weight: var(--f-w-6);padding-right: 6px;}
-.btn-4 > i{font-size: 12px;}
-.btn-5{background: var(--bg-t);border: 1px solid var(--c-6);color: var(--c-1);font-weight: var(--f-w-6);border-radius: var(--b-r-1);box-sizing: border-box;display: inline-block;font-size: var(--f-s-1);overflow: hidden;padding: 14px 20px;position: relative;text-decoration: none;transition: all 0.3s ease-in-out;}
-.btn-5:hover{border-color: var(--c-2);}
-.btn-5:active{transform: scale(0.95);background: var(--c-6);font-weight: var(--f-w-6);}
+.btn-2 {background: var(--bg-t); border: 1px solid var(--c-6); color: var(--c-1); font-weight: var(--f-w-6); border-radius: var(--b-r-2); box-sizing: border-box; display: inline-block; font-size: var(--f-s-1); overflow: hidden; padding: 14px 20px; position: relative; text-decoration: none; transition: all 0.3s ease-in-out; text-transform: uppercase;}
+.btn-2:hover{border-color: var(--c-2);}
+.btn-2:active {transform: scale(0.95); background: var(--c-2); font-weight: var(--f-w-6);color: var(--c-99);}
+.btn-3{background: var(--c-2);color: var(--c-99);border-radius: var(--b-r-2);box-sizing: border-box;display: inline-block;font-weight: var(--f-w-6);font-size: var(--f-s-1);overflow: hidden;padding: 14px 20px;position: relative;text-decoration: none;transition: all 0.3s ease-in-out;width:max-content;border:1px solid transparent}
+.btn-3:hover{background: transparent; border: 1px solid var(--c-99); }
+.btn-3:active{transform: scale(0.95);background: var(--c-2);font-weight: var(--f-w-6);}
+.btn-4 {background: var(--bg-t); border: 1px solid var(--c-2); color: var(--c-99); font-weight: var(--f-w-6); border-radius: var(--b-r-2); box-sizing: border-box; display: inline-block; font-size: var(--f-s-1); overflow: hidden; padding: 14px 20px; position: relative; text-decoration: none; transition: all 0.3s ease-in-out; text-transform: uppercase;}
+.btn-4:hover{border-color: var(--c-99);}
+.btn-4:active {transform: scale(0.95); background: var(--c-99); font-weight: var(--f-w-6);color: var(--c-1);}
 
 .btn-99{background: var(--c-99);color: var(--c-100);border-radius: var(--b-r-2);box-sizing: border-box;display: inline-block;font-weight: var(--f-w-2);font-size: var(--f-s-1);overflow: hidden;padding: 10px 18px;position: relative;text-decoration: none;transition: all 0.3s ease-in-out;width:max-content; border: 1px solid var(--c-100); height: 42px;}
 .btn-99:hover{background: var(--c-100); color: var(--c-99);}
@@ -1523,7 +1529,7 @@ article{animation: animate-in-and-out cubic-bezier(0.3,0.1,0.4,0.2);animation-ti
 .s-dot {
     width: 15px;
     height: 15px;
-    background-color: color-mix(in srgb, var(--c-100) 100%, var(--c-99) 10%);
+    background-color: color-mix(in srgb, var(--c-1) 100%, var(--c-99) 10%);
     border-radius: 50%;
     transition: all .5s ease-in-out,background-color 0s;
     margin: 5px;
@@ -1531,7 +1537,7 @@ article{animation: animate-in-and-out cubic-bezier(0.3,0.1,0.4,0.2);animation-ti
 .dots {
     width: 15px;
     height: 15px;
-    background-color: color-mix(in srgb, var(--c-100) 100%, var(--c-99) 100%);
+    background-color: color-mix(in srgb, var(--c-1) 100%, var(--c-99) 100%);
     border-radius: 50%;
     transition: all .5s ease-in-out,background-color 0s;
     margin: 5px;
@@ -1539,7 +1545,7 @@ article{animation: animate-in-and-out cubic-bezier(0.3,0.1,0.4,0.2);animation-ti
 .e-dot {
     width: 8px;
     height: 8px;
-    background-color: color-mix(in srgb, var(--c-100) 100%, var(--c-99) 100%);
+    background-color: color-mix(in srgb, var(--c-1) 100%, var(--c-99) 100%);
     border-radius: 50%;
     transition: all .5s ease-in-out,background-color 0s;
     margin: 5px;

package/fonts/ag-icons.css

@@ -358,3 +358,6 @@
 .aga-account-account-circle:before{content:"\f252"}
 .aga-account-account-box:before{content:"\f253"}
 .aga-account-account-balance:before{content:"\f254"}
+.aga-color-picker-arrows-fixed:before{content:"\f255"}
+.aga-color-color-text-fixed:before{content:"\f256"}
+.aga-color-color-background-fixed:before{content:"\f257"}

package/fonts/ag-icons.html

@@ -49,7 +49,7 @@
         }
     </style>
 
-    <link rel="stylesheet" type="text/css" href="./ag-icons.css" />
+    <link rel="stylesheet" type="text/css" href="ag-icons.css" />
 </head>
 <body>
 
@@ -2468,6 +2468,15 @@
         </div>
 
 
+        <div class="preview">
+            <span class="inner">
+                <i class="aga aga-color-picker-arrows-fixed"></i>
+            </span>
+            <br>
+            <span class='label'>color-picker-arrows-fixed</span>
+        </div>
+
+
         <div class="preview">
             <span class="inner">
                 <i class="aga aga-color-color-text"></i>
@@ -2477,6 +2486,15 @@
         </div>
 
 
+        <div class="preview">
+            <span class="inner">
+                <i class="aga aga-color-color-text-fixed"></i>
+            </span>
+            <br>
+            <span class='label'>color-color-text-fixed</span>
+        </div>
+
+
         <div class="preview">
             <span class="inner">
                 <i class="aga aga-color-color-background"></i>
@@ -2486,6 +2504,15 @@
         </div>
 
 
+        <div class="preview">
+            <span class="inner">
+                <i class="aga aga-color-color-background-fixed"></i>
+            </span>
+            <br>
+            <span class='label'>color-color-background-fixed</span>
+        </div>
+
+
         <div class="preview">
             <span class="inner">
                 <i class="aga aga-alignment-align-right"></i>