Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

There are no results to display.

Forums

  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Location


Interests


Company name


Position

Found 9 results

  1. lynkfs

    css styling

    Browsers are certainly talented as multi-language processors. They have to understand html, css, javascript, svg and lately web-assembly as a fifth language. XML and Json are format specifiers, but could be borderline categorised as languages as well. Smart elevates javascript to great heights, but sort of leaves the other ones at the periphery. Especially css. Css can be used for a) component styling including colours, fonts etc, b) visual layout of pages/forms and reacting responsively to screen size and orientation and c) interactivity in various forms. Some of this overlaps with the js domain. Smart basically uses css for a) but not for b) or c). Looking at various css frameworks out there, I would categorise these as on one end of the scale there are many UI kit frameworks where the emphasis is on components - buttons, accordions, cards etc. Sometimes as css stand-alone files, sometimes in conjunction with js. Most of these also have functionality for layout purposes, usually based on flexbox or internal grid structures. on the other end of the scale there are frameworks which forego the component focus, but instead provide a large number of elementary styling functions, which can be applied to any component. and many which occupy a space in between This post is about the open source Tailwind framework, belonging in the second category above, just to see how that would work in the Smart environment. Tailwind comes in 2 flavours : a static framework which can be accessed locally or from a cdn, and a more dynamic version. The latter can be tailored dynamically for any specific project and basically needs to be part of the build toolchain. To keep it simple I used the static version. Change the res/app.css reference to the tailwind css file (either just replace it or change the reference in the index.html file). Now any component can be made to use this styling. Because this is not more (or less) than a list of individual styling functions, the use boils down to defining what you want. Tell a story as in "give me a button with a green background, which turns to blue on hover, has rounded corners and white text and a shadow effect which makes it seem floating". In code : W3Button1.handle.className := "bg-green-500 hover:bg-blue-700 text-white rounded shadow-2xl"; The second button in the demo project (see below) has a different story (className sequence), which gives it a totally different look and feel. I kind of like this approach, it works very well with any component, thus also with the built in Smart components. It is a bit of a drag specifying these className sequences by hand, so it would be nice if this would be supported in the IDE. There are after all only a small number of categories of these elementary styling bits : backgrounds, typography, borders, spacing, sizing, svg, interactivity and effects. And a relatively limited list of functions per category (bg-green-500 means a green background, 500 is the fifth shade in the green colour scheme. So there will be a bg-green-600, a bg-blue-200 etc). Doable I think. Apart from these styling functions, Tailwind also has a number of layout functions. Smart has its own layout mechanism, however the Tailwind functions can be used as well. See the 'card' component in the demo. Demo and source
  2. Ricardo

    Problem with Button and CSS

    Hi. I have this css .TW3Button { display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; border: 1px solid #018dc4; -webkit-border-radius: 3px; border-radius: 3px; font: normal 16px/normal Verdana, Geneva, sans-serif; color: rgba(255,255,255,0.9); -o-text-overflow: clip; text-overflow: clip; background: #007FFF; -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,1) ; box-shadow: 3px 3px 4px 0 rgba(0,0,0,1) ; text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ; -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); } .TW3Button:hover { background: #0048ff; } .TW3Button:focus { background: #178c19; } .TW3Button:DisabledState { background: #F0DC82; } with this result I've also tried with .TW3Button: Disabled. How to assign any background color to disabled button?
  3. Hi, Bug #1 - tw3panel vs tw3button I've encountered a discrepancy with how the css is applied to different components. In this example the :active selector in the css doesn't work on the button but does work for other selectors like :hover. :active also works on tw3panel for example. :active -> green :hover -> red normal -> blue Bug #2 - toggle button As a work around of not being able to use :selected in the past I was using two css classes and switching the StyleClass of the component onClick to create essentially a Toggle Button. This has now broken for some reason in the latest patch on android but not iOS devices. The android issue can be recreated on a computer as well using the demo link and chrome mobile dev tools. It seems to be that to get the onclick to fire properly and switch the css as intended one must hold down on the button for some time, tapping doesn't work, this is not an issue on iOS or Desktop use. An example of the onclick: procedure TNWToggleButton.CheckBoxClick(Sender: TObject); begin // sets css class and checked boolean to Mark toggle status if TNWToggleButton(Sender).Checked then begin // On TNWToggleButton(Sender).StyleClass := OffCssClass; Checked := False; end else begin TNWToggleButton(Sender).StyleClass := OnCssClass; // Off Checked := True; end; end; Please also let me know if there is a better way of achieving what i'm trying to do here. Demo Source
  4. lennart

    Working with css, how to

    Someone posted a technique for injecting CSS, and while I normally dont go around correcting - the code posted was so bad that it could easily break the application. Smart has classes for css that are easy to use. Always check the RTL folder, and search in the class-browser. So if you are looking for CSS stuff, then search "CSS" in the class browser. Quick intro A stylesheet is just an object, like everything else in the DOM (document object model). The browser will take your css-files (if listed in the html) and load them in, then they turn up as objects you can access. But, you can also create these objects yourself and feed in the CSS as a string. You can even create single rules (or styles) as objects and manually populate them. Few does this since its easier to use a string. Loading CSS The easiest way to load an extra CSS file is to use the LoadCSS() method in TW3Storage. This is a class function in a static class, so you dont create an instance of TW3Storage first. You will find this class in SmartCL.FileUtils. An example for loading css looks like this: TW3Storage.LoadCss('thisurl', procedure (const FromUrl: string; const ObjectHandle: THandle; const Success: boolean) begin if success then begin writeln("css loaded"); end; end); Notice the parameter "objecthandle" in the anonymous callback. This is a handle to the created stylesheet object. You dont need to care about that, but if you should want to manually access the stylesheet DOM object after loading - then this is the easiest way to do it. The second method is to create a stylesheet class: var sheet := TW3StyleSheet.Create; sheet.append(#" .mystyle { background-color: #FFFFFF; }"); This class has several add methods, but it also has a very clear "Append" method, allowing you to add chunks of css style code. So as you can see, getting external css into its own stylesheet is very simple, and class based - rather than hacking into a stylesheet you simply presume will be there. The global stylesheet When your application starts a global stylesheet is created. This is not the theme stylesheet, but a secondary stylesheet that controls and units can use to stuff their dependencies into. All our effect css is stored in this secondary stylesheet. If you just need to store a couple of new styles or define some animation, then its overkill to create a third stylesheet object. Just append your code to the global stylesheet instead var globalstyles := TW3StyleSheet.GlobalStyleSheet(); globalstyles.append(#" .TMyCoolStuff { some-value: 12px; }"); The whole point of Smart is to create standard ways of accessing otherwise cumbersome things. Adding & removing styles from your controls TW3Stylesheet contains more class members that should be interesting: AddClassToElement RemoveClassFromElement FindClassInElement So whenever you want to add a style to a class, these are the best to use. You can also remove and check if a style is applied to an element with these. They take the control-handle as a parameter and should be fairly straight forward to understand. Well, hope it clears up a few things!
  5. recursiveElk

    Alpha 2.9.9.59 InsertRule CSS Error

    There is an issue that is very obscure with the IDE/RTL which seems to glitch out only when Project Options is not entered. The Exact steps to reproduce are shown in the demo but are also outlined here: Create New Project Add the code into InitializeObject: writeln("entered intialize object of form"); var s := #' .TW3EditBox { color: #0000ff; }'; writeln("After multi-line css"); browserapi.document.styleSheets[0].insertRule(s, 0); writeln("After insert rule css"); Compile and Run Error will show, now go to Project > Default Project Options If you do nothing but press CANCEL then it will remain broken If you do nothing but press OK then it will fix itself and successfully run every time afterwards. Demo Demo 2 showing Css is applied successfully Not sure what's going on here, very strange behaviour. Recreate able on two separate computers at Work. Luckily this is not critical.
  6. recursiveElk

    Styling Tw3Dialog

    Hi there, I've been attempting to restyle the TW3Dialog component so that it fits more in theme with the rest of our program. However since the changes in the last alpha(2.9.9.59) the construction of this component has changed somewhat. This is what i have so far: but i can't seem to get the text to center correctly. I have tried using things like TW3Dialog > TW3Label { text-align:center; } or TW3Dialog > p { text-align:center; } or TW3Dialog > * { text-align:center; } Here is the code that i found in the external css relevant to the TW3Dialog Box that i have been editing. /* overwritten css for dialog box - F */ .TW3DialogButtonBackground { background-color: #A6DCE5; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit1)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit2)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMoz)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMs)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtIE)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtAny)?>; } .TW3DialogButtonBorder { border-radius: <?pas=EdgeRounding?>; border-top: 1px solid rgba(250, 250, 250, 0.7); border-left: 1px solid rgba(250, 250, 250, 0.7); border-right: 1px solid rgba(240, 240, 240, 0.5); border-bottom: 1px solid rgba(240, 240, 240, 0.5); -webkit-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>; -moz-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>; -ms-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>; -o-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>; box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>; } /* ######################################################################### */ /* TW3DialogButton */ /* ######################################################################### */ .TW3DialogButton { min-width: 80px; min-height: 32px; margin: 5px; font-size: <?pas=fntMediumSize?>; font-weight: bold; color: <?pas=clDlgButtonText?>; text-shadow: 1px 1px 1px <?pas=GetRGBA(clDlgButtonTextShadow, 0.8) ?>; } .TW3DialogButton:active:enabled { color: <?pas=clDlgButtonTextSelect?>; text-shadow: -1px -1px 1px <?pas=GetRGBA(clDlgButtonTextShadow, 0.8) ?>; } .TW3DialogButton > * { font-family: inherit !important; font-name: inherit !important; font-size: inherit !important; background-color: #A6DCE5; } /* ######################################################################### */ /* TW3Dialog */ /* ######################################################################### */ .TW3Dialog { padding: 0px; border-radius: 8px; z-index: 1000; box-shadow: 0 8px 19px rgba(0,0,0,.9); background : #69c3d3; color: #fff; font-size:<?pas=fntMediumSize?>; } /* ######################################################################### */ /* TW3DialogHeader */ /* ######################################################################### */ .TW3DialogHeader { border-top-left-radius: 8px; border-top-right-radius: 8px; height: 48px; background-color: #A6DCE5; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit1)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit2)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMoz)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMs)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtIE)?>; background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtAny)?>; } /* ######################################################################### */ /* TW3DialogButtonPanel */ /* ######################################################################### */ .TW3DialogButtonPanel { height: 64px; }
  7. recursiveElk

    Custom Styling of TW3CheckBox

    Hi, Given that TW3CheckBox is made up of two components being : TW3CheckMark and TW3CheckBoxLabel, How would one go about styling this component? Can we set styles for the sub components and go from there? Just a bit confused by the cross over between CSS and SMS for this component. Thanks!
  8. lynkfs

    Component styling

    For myself I've adopted the following recipe for component styling 1) Compose new components using any of the standard components, like w3Panel, w3Label, w3Button etc. The uptake is that this way new components auto-style according to the project theme and switching themes changes component styling automatically. Overriding properties where necessary of course. 2) Avoid themes outside the ones provided in SMS. I find external css files hard to read and comprehend, and I tend to steer away from them. The uptake is no external dependencies and also styling can be done in BEM format, which I find really helpful. 3) Component styling has to be added in code (standard smart pascal) rather than manually extending the projects css-file.
  9. dualarrow

    How do you edit the css file

    I have made a custom control and I'm trying to set the css so that it persists across compiles. If I set the options to create a seperate css file, then after a compile I can edit this and it runs correctly, but each time I recompile, it regenerates the css. I'm guessing the only way may be to copy the theme file I'm using (ios.css) and create a new theme. Is this currently the correct way to do this or is there a way to either output an inline style or have a 2nd css file ?
×